Vue3生命週期函式和方法詳解

阿新 • • 發佈：2021-12-14

1. 概述

所謂生命週期函式，就是在某一條件下被自動觸發的函式。

2. 3 生命週期函式介紹

2.1 beforeCreate

在 VUE 例項生成之前會自動執行的mXzMMD函式

2.2 created

在 VUE 例項生成之後會自動執行的函式

2.3 beforeMount

在元件內容被渲染到頁面之前自動執行http://www.cppcns.com的函式

2.4 mounted

在元件內容被渲染到頁面之後自動執行的函式

2.5 beforeUpdate

當data中的資料發生變化前執行的函式

2.6 updated

當data中的資料發生變化後執行的函式

2.7 beforeUnmount

VUE例項與元素解除繫結前執行的函式

2.8 unmounted

VUE例項與元素解除繫結後執行的函式

3. 程式碼例子

<script src="../vue.global."></script>
</head>
<body>
    <div id="myDiv"></div>
</body>
<script>

    // 生命週期函式：在某一時刻會自動執行的函式
    const app = Vue.createApp({     // 建立一個vue應用例項
        data() {
            return {
                message : "hello"
            }
        },//在例項生成之前會自動執行的函式
        beforeCreate() {
            al 
ert("beforeCreate")
        },//在例項生成之後會自動執行的函式
        created() {
            alert("created")
        },// 在元件內容被渲染到頁面之前自動執行的函式
        beforeMount() {
            alert("beforeMount：" + document.getElementById("myDiv").innerHTML)
        },// 在元件內容被渲染到頁面之後自動執行的函式
        mounted() { // 繫結後自動執行
            alert("mounted：" + document.getElementById("myDiv").innerHTML)
        },// 當data中的資料發生變化前執行
        beforeUpdate() {
            
            alert("beforeUpdate：" + document.getElementById("myDiv 
").innerHTML);
        },// 當data中的資料發生變化後執行
        updated() {
            alert("updated：" + document.getElementById("myDiv").innerHTML);
        },// 解除繫結前執行的函式
        beforeUnmount() {
            alert("beforeUnmount：" + document.getElementById("myDiv").innerHTML);
        },// 解除繫結後執行的函式
        unmounted() {
            alert("unmounted：" + document.getElementById("myDiv").innerHTML);
        },// 如果沒有 template ，則取繫結元素下面的子元素作為 template
        template : "<div>{{message}}</div>"
    });

    // vm 就是vue應用的根元件
    const vm = app.mount('#myDiv');  // 繫結id為 myDiv 的元素

    // 更新資料
    vm.$data.message = 'hello world!!!';

    // 解除繫結
    app.unmount();
</script>

4. 綜述

以上所述是小編給大家介紹的Vue3生命週期函式和方法詳解，希望對大家有所幫助。在此也非常感謝大家對我們的支援！

Vue3生命週期函式和方法詳解

1. 概述所謂生命週期函式，就是在某一條件下被自動觸發的函式。 2. 3 生命週期函式介紹

JavaScript基礎系列之函式和方法詳解

目錄一、函式和方法的區別二、如何寫好一個函式2.1 命名準確2.1.1 函式命名2.1.2 引數命名2.2 函式註釋2.2.1 引數註釋2.3 函式引數2.3.1 引數預設值2.3.2 物件引數2.3.3 引數數量2.3.4 引數型別防禦2.4 函式的返回2.

C++中使用function和bind繫結類成員函式的方法詳解

定義一個普通的類 class Test1{ public: void fun(int val){ cout<<\"hello world \"<<val<<endl;

vue3 Teleport瞬間移動函式使用方法詳解

vue3 Teleport瞬間移動函式的使用，供大家參考，具體內容如下 Teleport一般被翻譯成瞬間移動元件,實際上是不好理解的.我把他理解成\"獨立元件\"

python super函式使用方法詳解

一、super函式簡介 python內建函式super()主要用於類的多繼承中，用來查詢並呼叫父類的方法，所以在單重繼承中用不用 super 都沒關係；但是，使用 super() 是一個好的習慣。一般我們在子類中需要呼叫父類的方法時才會

如何在 clion 執行多個 main 函式（方法詳解）

在寫 C++ 的題目的時候經常會遇到這樣的問題，寫了多個 cpp 檔案，在 clion 中編譯報錯不能同時存在多 main 函式

Vue過濾器,生命週期函式和vue-resource簡單介紹

一、過濾器使用例子： <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\">

js的Map函式使用方法詳解

Map是ES2015引入的Global Object，Map物件中儲存了鍵值對，且任何物件（包括原始值）都可以作為鍵或者值。

Python的hasattr() getattr() setattr() 函式使用方法詳解

hasattr(object, name) 判斷一個物件裡面是否有name屬性或者name方法，返回BOOL值，有name特性返回True，否則返回False。

Vue生命週期介紹和鉤子函式詳解

目錄生命週期介紹和鉤子函式VUE生命週期鉤子Vue生命週期簡介create 和 mounted 相關update 相關destroy 相關總結Vue生命週期介紹和鉤子函式

Vue3生命週期鉤子函式詳解

本文例項為大家分享了3生命週期鉤子函式的具體程式碼，供大家參考，具體內容如下

關於MySQL的儲存函式(自定義函式)的定義和使用方法詳解

儲存函式什麼是儲存函式: 封裝一段sql程式碼，完成一種特定的功能，返回結果。

React 【生命週期】三個階段生命週期函式、不同生命週期詳解、生命週期呼叫順序

目錄： 1. 三個階段生命週期函式 2. 不同生命週期詳解　　　　　建立階段　　　　　更新階段

JavaScript詳解——函式和方法

技術標籤：筆記javascriptjs 1、JavaScript中的函式 1.1函式定義方法1： function 函式名（引數1，引數2，······）{ }

react新版本生命週期鉤子函式及用法詳解

和舊的生命週期相比準備廢棄三個鉤子，已經新增了兩個鉤子 React16 之後有三個生命週期被廢棄(但並沒有刪除)

Vue之生命週期函式詳解

目錄生命週期函式常用的生命週期的鉤子關於銷燬例項：總結生命週期函式生命週期函式又叫：生命週期回撥函式，生命週期函式、生命週期鉤子

Redis和Lua實現分散式限流器的方法詳解

主要是依靠 redis + lua 來實現限流器,使用 lua 的原因是將多條命令合併在一起作為一個原子操作,無需過多考慮併發.

MySQL和Redis實現二級快取的方法詳解

redis簡介 Redis 是完全開源免費的，遵守BSD協議，是一個高效能的key-value資料庫

MySQL設定global變數和session變數的兩種方法詳解

1、在MySQL中要修改全域性（global）變數，有兩種方法：方法一，修改my.ini配置檔案，如果要設定全域性變數最簡單的方式是在my.ini檔案中直接寫入變數配置，如下圖所示。重啟資料庫服務就可以使全域性變數生效。

Oracle中的translate函式和replace函式的用法詳解

translate函式語法： translate(expr,from_strimg,to_string) 簡介： translate返回expr，其中from_string中的每個字元的所有出現都被to_string中的相應字元替換。expr中不在from_string中的字元不會被替換。如果exp

Vue3生命週期函式和方法詳解

1. 概述

2. 3 生命週期函式介紹

2.1 beforeCreate

2.2 created

2.3 beforeMount

2.4 mounted

2.5 beforeUpdate

2.6 updated

2.7 beforeUnmount

2.8 unmounted

3. 程式碼例子

4. 綜述

相關推薦