vue實(shí)例的生命周期鉤子函數(shù)
vue實(shí)例從創(chuàng)建到最后的銷毀這個(gè)過程中會(huì)自動(dòng)的執(zhí)行一些方法，也被稱為vue實(shí)例的生命周期鉤子函數(shù)，具體可以參照vue官方提供的生命周期圖片
可以看到在vue的生命周期中會(huì)有很多鉤子函數(shù)提供給我們在vue生命周期不同的時(shí)刻進(jìn)行操作, 那么首先我們列出所有的鉤子函數(shù)，再根據(jù)代碼一一講解:
| beforeCreate | 創(chuàng)建前 |
| created | 創(chuàng)建成功 |
| beforeMount | 掛載前 |
| mounted | 掛載完成 |
| beforeUpdate | 更新前 |
| updated | 更新完成 |
| beforeDestroy | 銷毀前 |
| destroyed | 銷毀完成 |
以下我們根據(jù)代碼來看一下每個(gè)階段發(fā)生了什么
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'hello world'
},
beforeCreat() {
console.log('beforeCreate 創(chuàng)建前=====');
console.log( "el : " + this.$el);
console.log("data : " + this.$data);
console.log("message: " + this.message)
},
created () {
console.log('created 創(chuàng)建完成=====');
console.log("el : " + this.$el);
console.log("data : " + this.$data);
console.log("message: " + this.message);
},
beforeMount () {
console.log('beforeMount 掛載前=====');
console.log("el : " + (this.$el));
console.log(this.$el);
console.log("data : " + this.$data);
console.log("message: " + this.message);
},
mounted () {
console.log('mounted 掛載完成=====');
console.log("el : " + this.$el);
console.log(this.$el);
console.log("data : " + this.$data);
console.log("message: " + this.message);
},
beforeUpdate () {
console.log('beforeUpdate 更新前=====');
console.log("el : " + this.$el);
console.log(this.$el);
console.log("data : " + this.$data);
console.log("message: " + this.message);
},
updated() {
console.log('updated 更新完成=====');
console.log("el : " + this.$el);
console.log(this.$el);
console.log("data : " + this.$data);
console.log("message: " + this.message);
},
beforeDestroy() {
console.log('beforeDestroy 銷毀前=====');
console.log("el : " + this.$el);
console.log(this.$el);
console.log("data : " + this.$data);
console.log("message: " + this.message);
},
destroyed() {
console.log('destroyed 銷毀完成=====');
console.log("el : " + this.$el);
console.log(this.$el);
console.log("data : " + this.$data);
console.log("message: " + this.message)
}
})
</script>
</body>
</html>
我們在實(shí)例里面分別執(zhí)行這八個(gè)函數(shù)鉤子，運(yùn)行以上代碼，在瀏覽器控制臺(tái)中查看打印信息：
我們可以看到
beforeCreate創(chuàng)建前：el、data、message都是undefined的狀態(tài)，這表明這些屬性在這一階段時(shí)還未進(jìn)行初始化；
created創(chuàng)建完成：el處于undefined，data已經(jīng)初始化完成，message已經(jīng)能顯示頁面數(shù)據(jù)，所以在此階段data已經(jīng)與頁面數(shù)據(jù)進(jìn)行了綁定
beforeMount掛載前：el，data，message都已經(jīng)初始化完成，el已經(jīng)與頁面div標(biāo)簽綁定，data也已進(jìn)行綁定
mounted掛載完成：該階段與上一階段區(qū)別就是標(biāo)簽中有沒有與data中的數(shù)據(jù)同步，我們分別點(diǎn)擊beforeMount和mounted里面的div標(biāo)簽，分別如下圖
會(huì)發(fā)現(xiàn)，兩個(gè)階段中的textContent內(nèi)容不同，這也驗(yàn)證了我們上面的說法。
我們可以在控制臺(tái)中看到前四個(gè)鉤子函數(shù)，卻沒有后四個(gè)，這我們可以根據(jù)以上圖示知道，vue實(shí)例若想觸發(fā)beforeUpdate和updated函數(shù)必須要對data數(shù)據(jù)進(jìn)行改變，我們在控制臺(tái)中對data進(jìn)行改變繼續(xù)觀察
可以發(fā)現(xiàn)當(dāng)data中的數(shù)據(jù)發(fā)生了改變，會(huì)觸發(fā)對應(yīng)組件的重新渲染，先后調(diào)用beforeUpdate和updated鉤子函數(shù)。兩者的區(qū)別就是在beforeUpdate階段可以監(jiān)聽到data的變化但是view層沒有被重新渲染，view層的數(shù)據(jù)沒有變化。而在updated的時(shí)候 view層才被重新渲染，數(shù)據(jù)更新
我們繼續(xù)往下，當(dāng)我們在控制臺(tái)中將實(shí)例進(jìn)行銷毀時(shí)，就會(huì)觸發(fā)最后兩個(gè)鉤子函數(shù)
在beforeDestroy階段，函數(shù)在實(shí)例銷毀之前調(diào)用。在這一步，實(shí)例仍然可用。
在destroye階段，函數(shù)在Vue 實(shí)例銷毀后調(diào)用。調(diào)用后，Vue 實(shí)例指示的所有東西都會(huì)解除綁定，所有的事件監(jiān)聽器會(huì)被移除，所有的子實(shí)例也會(huì)被銷毀。我們這個(gè)時(shí)候再來通過控制臺(tái)修改數(shù)據(jù)會(huì)發(fā)現(xiàn)頁面上的數(shù)據(jù)已經(jīng)不能響應(yīng)了
這些便是小編對vue實(shí)例生命周期函數(shù)的理解，如果有不足之處，還請大家指出
- 還沒有人評(píng)論，歡迎說說您的想法！
