vue學習筆記(二)vue的生命週期和鉤子函數

時間 2020-01-03

標籤 vue 學習筆記生命週期鉤子函數简体版

原文原文鏈接

前言

經過上一章的學習，咱們已經初步的瞭解了vue究竟是什麼東西，能夠幹什麼，而這一篇博客主要介紹vue的生命週期和它經常使用的鉤子函數，若是有學過java的園友可能有接觸到在學習servlet的時候學過servlet的生命週期servlet 加載--->實例化--->服務--->銷燬,對於vue的而言他也有本身的生命週期，那麼一塊兒來看看吧！javascript

本章目標

學會並瞭解vue的生命週期和鉤子函數
學會使用手動掛載和調用事件

vue的生命週期和鉤子函數

其實在提到vue的生命週期和鉤子函數的時候，有的人認爲經常使用的鉤子函數有10個，也有的人認爲是8個，不管是10個仍是8個對於我而言都是同樣的，咱們主要講解8個vue的鉤子函數。首先來一波官網的對於vue生命週期的圖解html

這一張圖對於vue的生命週期已經講解的特別詳細了，可是光靠這一張圖還不足於瞭解它的生命週期，咱們須要實踐一下，有句古話說的好，實踐是檢驗道理的惟一標準，介紹一下vue的鉤子函數。vue

beforeCreate(實例建立前)

實例組件剛開始建立，元素dom和數據都尚未初始化java

應用場景：能夠在這加個loading事件api

created(實例建立後)

數據data已經初始化完成，方法也已經能夠調用，可是dom爲渲染，在這個週期裏面若是進行請求是能夠改變數據並渲染，因爲dom未掛載，請求過多或者佔用時間過長會致使頁面線上空白
應用場景：在這結束loading，還作一些初始化，實現函數自執行數組

beforeMoute(元素掛載前)

dom未完成掛載，數據初始化完成，可是數據的雙向綁定仍是{{}},這是由於vue採用了虛擬dom技術。app

mouted(元素掛載後)

數據和dom都完成掛載，在上一個週期佔位的數據把值渲染進去，通常請求會放在這個地方，由於這邊請求改變數據以後恰好能渲染。dom

beforeUpdate(實例更新前)

只要是頁面數據改變了都會觸發，數據更新以前，頁面數據仍是原來的數據，當你請求賦值一個數據的時候就會執行這個週期，若是沒有數據改變不執行。函數

updated(實例更新後)

只要是頁面數據改變了都會觸發，數據更新完畢，頁面的數據是更新完成的，beforeUpdated和updated要謹慎使用，由於頁面更新數據的時候都會觸發，在這裏操做數據很影響性能和死循環。性能

beforeDestory(實例銷燬前)

實例銷燬以前調用，在這一步，實例仍然徹底可用。

destory(實例銷燬後)

vue實例銷燬後調用，調用後，Vue實例指示的全部內容都會解除綁定，全部的事件監聽器都會被移除，全部的子實例也會被銷燬。

實例一

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>vue的生命週期實例一</title>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="msg" />
            {{msg}}
        </div>
        <button onclick="destory()">銷燬</button>
        <script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            const vm=new Vue({
                el:'#app',
                data:{
                    msg:'vue'
                },
                beforeCreate(){
                    console.log('vue實例建立前:'+this.msg+','+this.$el);
                    //    數據data和dom都尚未初始化
                },
                created(){
                    console.log('vue實例建立後:'+this.msg+','+this.$el);
                    //數據dom初始化完成，dom尚未初始化完成
                },
                beforeMount(){
                    console.log('元素掛載前:');
                    console.log(this.$el);
                },
                mounted(){
                    console.log('元素掛載後:');
                    console.log(this.$el);
                },
                beforeUpdate(){
                    console.log('實例更新前');
                    console.log(this.msg);
                    console.log(this.$el);
                },
                updated(){
                    console.log('實例更新後');
                    console.log(this.msg);
                    console.log(this.$el);
                },
                beforeDestroy(){
                    console.log('實例銷燬前');
                    console.log(this.msg);
                },
                destroyed(){
                    console.log('實例銷燬後');
                    console.log(this.msg);
                }
            });
            function destory(){
                vm.$destroy();
            }
        </script>
    </body>
</html>

結果:

實例二

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>vue的生命週期實例二</title>
    </head>
    <body>
        <div id="app">
            {{name}}
        </div>
        <button onclick="destory()">銷燬實例</button>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            const vm=new Vue({
                el:'#app',
                data:{
                    name:'一隻流浪的kk',
                    age:18
                },
                beforeCreate(){
                    console.log('============實例建立前=============');
                    console.log(this.$el);    //undefined
                    console.log(this.$data);//undefined
                },
                created(){
                    console.log('============實例建立後=============');
                    console.log(this.$el);
                    console.log(JSON.stringify(this.$data));
                },
                beforeMount(){
                    console.log('============元素掛載前=============');
                    console.log(this.$el);    
                    console.log(JSON.stringify(this.$data));
                },
                mounted(){
                    console.log('============元素掛載後=============');
                    console.log(this.$el);    
                    console.log(JSON.stringify(this.$data));
                },
                beforeUpdate(){
                    console.log('============實例更新前=============');
                    console.log(this.$el);    
                    console.log(JSON.stringify(this.$data));
                },
                updated(){
                    console.log('============實例更新後=============');
                    console.log(this.$el);    
                    console.log(JSON.stringify(this.$data));
                },
                beforeDestroy(){
                    console.log('============實例銷燬前=============');
                    console.log(this.$el);    
                    console.log(JSON.stringify(this.$data));
                },
                destroyed(){
                    console.log('============實例銷燬後=============');
                    console.log(this.$el);    
                    console.log(JSON.stringify(this.$data));
                }
            });
            function destory(){
                vm.$destroy();
            }
        </script>
    </body>
</html>

總結

　beforeCreate() : 此時$el、data 的值都爲undefined,即el 和 data 並未初始化。
　create(): 此時能夠拿到data的值，可是$el依舊爲undefined，即data完成了數據的初始化，el沒有。
　beforeMounte(): $el的值爲「虛擬」的元素節點,dom未完成掛載，數據初始化完成，可是數據的雙向綁定仍是{{}},這是由於vue採用了虛擬dom技術。
　mouted(): 數據和dom都完成掛載，在上一個週期佔位的數據把值渲染進去，通常請求會放在這個地方，由於這邊請求改變數據以後恰好能渲染。

vue實例的手動掛載和調用事件

vm.＄mount( [elementOrSelector] ) 若是 Vue 實例在實例化時沒有收到 el 選項，則它處於「未掛載」狀態，沒有關聯的 DOM 元素。能夠使用 vm.＄mount() 手動地掛載一個未掛載的實例，學習手動掛載和調用事件以前，我提取了一些vue實例經常使用的屬性和方法，帶有前綴＄便於與代理的data區分。

vm.＄el：類型（HTMLElement）掛載元素，Vue實例的DOM根元素；即vm.$el===document.getElementById('節點')，注意：相等的狀況必須是實例建立以後才行，也就是created以後。

vm.＄data：類型（Object），Vue實例觀察的數據對象。

vm.＄props：類型（Object），當前組件接收到的 props 對象。Vue 實例代理了對其 props 對象屬性的訪問。

vm.＄options：類型（Object），用於當前 Vue 實例的初始化選項。須要在選項中包含自定義屬性時會有用處。

vm.＄parent：類型（Vue實例），父實例，若是當前實例有的話。

vm.＄root：類型（Vue實例），當前組件樹的根 Vue 實例。若是當前實例沒有父實例，此實例將會是其本身。

vm.＄children：類型（Array(Vue實例)），當前實例的直接子組件。須要注意 $children 並不保證順序，也不是響應式的。若是你發現本身正在嘗試使用 $children 來進行數據綁定，考慮使用一個數組配合 v-for 來生成子組件，而且使用 Array 做爲真正的來源。

官網地址：https://cn.vuejs.org/v2/api/

接下來是介紹手動掛載和調用事件的經常使用方法，共有三個

var MyComponent = Vue.extend({
template: '<div>Hello!</div>'
})

// 建立並掛載到 #app (會替換 #app)
new MyComponent().＄mount('#app')

// 同上
new MyComponent({ el: '#app' })

// 或者，在文檔以外渲染而且隨後掛載
var component = new MyComponent().＄mount()
document.getElementById('app').appendChild(component.＄el)

示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>手動掛載和調用事件</title>
    </head>
    <body>
        <div id="app">
        </div>
        <button onclick="hanlderOne()">手動掛載方式一</button>
        <button onclick="hanlderTwo()">手動掛載方式二</button>
        <button onclick="hanlderThree()">手動掛載方式三</button>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            const vm=new Vue({
                data:{
                    name:'vue'
                },
                template:'<h2>{{name}}</h2>'
            })
            function hanlderOne(){
                //方法一，手動掛載到指定的dom
                vm.$mount("#app");
            }
            function hanlderTwo(){
                //手動掛載，觸發編譯
                vm.$mount();
                document.getElementById('app').appendChild(vm.$el);
            }
            function hanlderThree(){
                //擴展一個新的vue構造器
                const component=Vue.extend({
                    template:'<h2>{{name}}</h2>'
                });
                const a=new component({
                    data:{
                        name:'vue'
                    },
                    el:'#app'
                })
            }
        </script>
    </body>
</html>