vue生命週期理解

時間 2019-12-05

標籤 vue 生命週期理解简体版

原文原文鏈接

關於`vue`

vue是一套用於構建用戶頁面的漸進式框架。屬於 MVVM(model+view+viewModel)框架。詳細瞭解能夠到官網

下面這張圖很好的展現了 vue 的生命週期html

下面咱們詳細解釋一下這張圖vue

實例化

顯而易見，這個就是實例化。實例化以後，會執行如下操做。

初始化事件生命週期函數

首先就是初始化事件和生命週期函數。

beforeCreate建立前

接着就是 beforeCreate（建立前）執行。可是這個時候拿不到 data 裏邊的數據。

注射響應

injections(注射器) reactivity(響應) 給數據添加觀察者。

`created`建立後

created建立後執行。由於上邊給數據添加了觀察者，因此如今就能夠訪問到 data裏的數據了。這個鉤子也是經常使用的，能夠請求數據了。由於請求數據是異步的，因此發送請求宜早不宜遲，一般在這個時候發送請求。

是否存在 `el`

el 指明掛載目標。這個步驟就是判斷一下是否有寫 el ，若是沒有就判斷有沒有調用實例上的 $mount('') 方法調用。也就是下一張圖。

這兩個是等價的。

判斷是否有 `template`

判斷是否有 template。

若是有 template 則渲染 template 裏的內容。

若是沒有則渲染 el 指明的掛載對象裏的內容。

`beforeMount`掛載前

beforeMount掛載前執行。

替換 `el`

這個時候會在實例上建立一個 el ，替換掉原來的 el。也是真正的掛載。

`mounted`掛載後

mounted掛載後執行。這個時候 DOM已經加載完成了，能夠操做 DOM了。這個也是經常使用的鉤子。通常操做 DOM都是在這裏。

`dataChange`

當數據有變更時，會觸發下面這兩個鉤子。

在 beforeUpdate更新前 和 updated更新後之間會進行DOM的從新渲染和補全。

接着是 updated更新後

`callDestroy`

beforeDestroy銷燬前和destroy銷燬後這兩個鉤子是須要咱們手動調用實例上的$destroy方法纔會觸發的。
當$destroy方法調用後。
beforeDestroy銷燬前觸發

移除數據劫持、事件監聽、子組件屬性全部的東西還保留只是不能修改

destroy銷燬後觸發

新增鉤子

activated：keep-alive 組件激活時調用。
相似 created 沒有真正建立，只是激活
deactivated：keep-alive 組件停用時調用。
相似 destroyed 沒有真正移除，只是禁用
在 2.2.0 及其更高版本中，activated 和 deactivated 將會在 <keep-alive> 樹內的全部嵌套組件中觸發。
詳細使用可在官網中查看。

代碼以下

<body>
    <div id="app">
        {{msg}}
        outerHTML
        npm init -y
        npm install vue
    </div>
    <script>
        let vm = new Vue({
            el:"#app", // 指明 VUE實例 的掛載目標 （只在 new 建立的實例中遵照）
            data:{msg:"sxq"},
            beforeCreate() {
                // console.log(this.msg) // 拿不到
                // debugger
            },
            created() { // 初始化數據 ajax
                console.log(this.msg)
            },
            beforeMount() {
                // alert(1)
            },
            // template:"<div>345</div>",
            mounted() { // dom 已經加載完成 操做 dom
                
            },
            beforeUpdate() {
                alert('更新前')
            },
            updated() {
                alert('更新後')
            },
            beforeDestroy() {
                alert('銷燬前')
            },
            destroyed() {
                alert('銷燬後')
            },
        })
        option
        // vm.$mount('#app') // 等價於 el:"#app"
        vm.$destroy()                                                                               
        // init events, init lifecycle 初始事件，初始化生命週期鉤子函數
        // init injections （注射器） reactivity （響應） 給數據添加觀察者
        // Compile el's outerHTML as template 編譯el的outerHTML做爲模板
        // 在beforeMount mounted 之間 create vm.$el and replace 「el」 with it 會建立一個 el 代替本身的el對象
        // virtual DOM re-render and patch 虛擬DOM從新渲染和修補
        // when vm.$destroy() is called 當銷燬函數vm.$destroy()調用時 纔會調用銷燬先後的生命週期
        // teardown watchs child components and event listeners 移除數據劫持、事件監聽、子組件屬性 全部的東西還保留 只是不能修改
    </script>
</body>