每個 Vue 實例在被創(chuàng)建時都要經(jīng)過一系列的初始化過程——例如,需要設(shè)置數(shù)據(jù)監(jiān)聽鸠匀、編譯模板蕉斜、
將實例掛載到 DOM 并在數(shù)據(jù)變化時更新 DOM 等。同時在這個過程中也會運行一些叫做生命周期鉤子的函數(shù)
1. new Vue() 創(chuàng)建vue實例
? 2. Init Events & Lifecycle 初始化 事件 和 生命周期
Lifecycle Hocks 1: beforeCreate? 創(chuàng)建前的狀態(tài)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? 3.Init (初始化) injections (依賴注入) & reactivity (開始響應(yīng))? ? ? ? ? ? ? ?
Lifecycle Hocks 2:created 創(chuàng)建完畢狀態(tài)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? 4. 'el','template', 'render function' or 'as template' 是否有元素el缀棍,? ? ? ?
是否有模板宅此,是否渲染到了函數(shù)內(nèi),是否作為模板進行了outerHTML渲染到了頁面? ? ?
? Lifecycle Hocks 3:beforeMount 掛載前狀態(tài)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? 5. Create app.$el and replace 'el' with it 掛載我們的"#app"
并且還是把我們的‘#app’生成虛擬DOM爬范,生成完畢后并渲染到view層父腕。
? Lifecycle Hocks 4:mounted 掛載結(jié)束狀態(tài)
? 6. when data changes 當我們的數(shù)據(jù)發(fā)生了改變
? Lifecycle Hocks 5:beforeUpdate beforeUpdate 更新前狀態(tài)
? 7.Virtual DOM re-render and patch? 虛擬Dom重渲染
? Lifecycle Hocks 6:updated 更新完成狀態(tài)
beforecreate:el 和 data 并未初始化
created:完成了 data 數(shù)據(jù)的初始化,el沒有
beforeMount:完成了 el 和 data 初始化,虛擬DOM渲染
mounted :完成掛載 掛載到真正的DOM上
以上只是理解青瀑,那上代碼:
beforeCreate: function () {
? ? ? ? ? ? console.group('beforeCreate 創(chuàng)建前狀態(tài)===============》');
? ? ? ? ? ? console.log("%c%s", "color:red" , "el? ? : " + this.$el); //undefined
? ? ? ? ? ? console.log("%c%s", "color:red","data? : " + this.$data); //undefined
? ? ? ? ? ? console.log("%c%s", "color:red","message: " + this.message)
? ? ? ? },
? ? ? ? created: function () {? //請求后臺數(shù)據(jù)放在此鉤子函數(shù)下
? ? ? ? ? ? console.group('created 創(chuàng)建完畢狀態(tài)===============》');
? ? ? ? ? ? console.log("%c%s", "color:red","el? ? : " + this.$el); //undefined
? ? ? ? ? ? console.log("%c%s", "color:red","data? : " + this.$data); //已被初始化
? ? ? ? ? ? console.log("%c%s", "color:red","message: " + this.message); //已被初始化
? ? ? ? },
? ? ? ? beforeMount: function () {
? ? ? ? ? ? console.group('beforeMount 掛載前狀態(tài)===============》');
? ? ? ? ? ? console.log("%c%s", "color:red","el? ? : " + (this.$el)); //已被初始化
? ? ? ? ? ? console.log(this.$el);
? ? ? ? ? ? console.log("%c%s", "color:red","data? : " + this.$data); //已被初始化
? ? ? ? ? ? console.log("%c%s", "color:red","message: " + this.message); //已被初始化
? ? ? ? },
? ? ? ? mounted: function () {? //在此鉤子函數(shù)下可以操作DOM了
? ? ? ? ? ? console.group('mounted 掛載結(jié)束狀態(tài)===============》');
? ? ? ? ? ? console.log("%c%s", "color:red","el? ? : " + this.$el); //已被初始化
? ? ? ? ? ? console.log(this.$el);
? ? ? ? ? ? console.log("%c%s", "color:red","data? : " + this.$data); //已被初始化
? ? ? ? ? ? console.log("%c%s", "color:red","message: " + this.message); //已被初始化
? ? ? ? },
? ? ? ? // 下面就能看到data里的值被修改后璧亮,將會觸發(fā)update的操作。
? ? ? ? beforeUpdate: function() {
? ? ? ? ? console.group('beforeUpdate 更新前狀態(tài)===============》');
? ? ? ? ? console.log("%c%s", "color:red", "el? ? : " + this.$el.innerHTML);
? ? ? ? ? console.log(this.$el);
? ? ? ? ? console.log("%c%s", "color:red", "data? : " + JSON.stringify(this.$data));
? ? ? ? ? console.log("%c%s", "color:red", "message: " + this.message);
? ? ? ? ? console.groupEnd();
? ? ? ? },
? ? ? ? updated: function() {
? ? ? ? ? console.group('updated 更新完成狀態(tài)===============》');
? ? ? ? ? console.log("%c%s", "color:red", "el? ? : " + this.$el.innerHTML);
? ? ? ? ? console.log(this.$el);
? ? ? ? ? console.log("%c%s", "color:red", "data? : " + JSON.stringify(this.$data));
? ? ? ? ? console.log("%c%s", "color:red", "message: " + this.message);
? ? ? ? ? console.groupEnd();
? ? ? ? },
? ? ? ? // 我們在console里執(zhí)行下命令對 vue實例進行銷毀斥难。
? ? ? ? // 執(zhí)行命令:app.$destroy()
? ? ? ? // 銷毀完成后杜顺,我們再重新改變message的值,vue不再對此動作進行響應(yīng)了蘸炸。
? ? ? ? // 但是原先生成的dom元素還存在躬络,可以這么理解,執(zhí)行了destroy操作搭儒,后續(xù)就不再受vue控制了穷当。
? ? ? ? beforeDestroy: function () {
? ? ? ? ? ? console.group('beforeDestroy 銷毀前狀態(tài)===============》');
? ? ? ? ? ? console.log("%c%s", "color:red","el? ? : " + this.$el);
? ? ? ? ? ? console.log(this.$el);
? ? ? ? ? ? console.log("%c%s", "color:red","data? : " + this.$data);
? ? ? ? ? ? console.log("%c%s", "color:red","message: " + this.message);
? ? ? ? },
? ? ? ? destroyed: function () {
? ? ? ? ? ? console.group('destroyed 銷毀完成狀態(tài)===============》');
? ? ? ? ? ? console.log("%c%s", "color:red","el? ? : " + this.$el);
? ? ? ? ? ? console.log(this.$el);
? ? ? ? ? ? console.log("%c%s", "color:red","data? : " + this.$data);
? ? ? ? ? ? console.log("%c%s", "color:red","message: " + this.message)
? ? ? ? }
? ? })