const app = new Vue({
el:"#app',
data:{
message:'hello,lifePeriod'
},
methods:{
init(){
console.log('這是一個方法!')
}
}
})
觸發 beforeCreate 鈎子函數
組件實例剛被創建,此時無法訪問到 el 屬性和 data 屬性等..
beforeCreate(){
console.log(`元素:${this.$el}`) //undefined
console.log(`屬性message:${this.message}`) //undefined
console.log(`方法init:${this.init}`) //undefined
}
對data進行雙向綁定,初始化方法(Observer Data && init events)
當一個 vue 實例被創建時,他向 Vue 的響應式系統中加入了其 data 對象中能找到的所有屬性.
利用 es5 特性 Object.defineProperty,遍歷 data 對象下所有屬性,將其轉化為 getter/setter,以便攔截對象賦值與取值操作,然后利用發布/訂閱者模式,從而實現數據的雙向綁定!
所以只有當實例被創建時 data 中存在的屬性才是響應式的!!!!
將methods 下的所有方法進行聲明.
將methods下的方法和data下的屬性通過遍歷和利用 es5 特性 Object.defineProperty代理到實例下.
this.a = this.$data.a = this.data.a;
this.fn = this.$methods.fn = this.methods.fn;
觸發 created 鈎子函數
組件實例創建完成,屬性已綁定,但 DOM 還未生成,$el 屬性還不存在!
created(){
console.log(`元素:${this.$el}`) //undefined
console.log(`屬性message:${this.message}`) //message:hey,vue-lifePeriod!
console.log(`方法init:${this.init}`) //function n(n){var r=arguments.length;return r?r>1?t.apply(e,arguments):t.call(e,n):t.call(e)}
}
將模板編譯成函數 (compile template into render function)
將模板 template 編譯成 AST 樹、render 函數(new Watch 將模板與數據建立聯系)以及 staticRenderFns 函數(通過 diff 算法優化 dom 更新);
運行 render 方法,返回一個 vnode 對象(virtual dom)
觸發 beforeMount 鈎子函數
模板編譯/掛載之前
beforeMount(){
console.log(`元素:${(this.$el)}`)
console.log(this.$el) //<div id="app">{{message}}</div> ,我們發現此時的el還未對數據進行渲染.(虛擬dom的內容)
}
觸發 mounted 鈎子函數
模板編譯/掛載之后
mounted(){
console.log(`元素:${(this.$el)}`)
console.log(this.$el) //<div id="app">{{hello,vue-lifePeriod!}}</div> ,已將數據渲染到真實dom
}
我們這時將 app.message 改變為'hey,vue-lifePeriod';
觸發 beforeUpdate 鈎子函數
組件更新之前
beforeUpdate(){
console.log(this.$el.innerHTML); //hello,vue-lifePeriod ,此時,元素的真實dom內容還未改變.
}
重新渲染虛擬 dom,並通過 diff 算法對比 vnode 節點差異更新真實 dom (virtual DOM re-render and patch)
觸發 updated 鈎子函數
組件更新之后
updated(){
console.log(this.$el.innerHTML); //hey,vue-lifePeriod ,此時,元素的真實dom內容已經改變.
}
我們這時調用 app.$destroy()函數對組件進行銷毀
觸發 beforeDestroy 鈎子函數
組件銷毀之前
beforeDestroy(){
console.log(this.$el) //<div id="app">{{hey,vue-lifePeriod!}}</div>
console.log(`屬性message:${this.message}`) //message:hey,vue-lifePeriod!
console.log(`方法init:${this.init}`) //function n(n){var r=arguments.length;return r?r>1?t.apply(e,arguments):t.call(e,n):t.call(e)}
}
銷毀數據監聽,子組件和解除事件監聽!
觸發 destroy 鈎子函數
組件銷毀之后
destroyed(){
console.log(this.$el) //<div id="app">{{hey,vue-lifePeriod!}}</div>
console.log(`屬性message:${this.message}`) //message:hey,vue-lifePeriod!
console.log(`方法init:${this.init}`) //function n(n){var r=arguments.length;return r?r>1?t.apply(e,arguments):t.call(e,n):t.call(e)}
}
實例銷毀后雖然 dom 和屬性方法都還存在,但改變他們都將不再生效!
app.message = 'hu,vue-lifePeriod';
console.log(app.message) //hey,vue-lifePeriod