生命周期鈎子
這篇文章主要記錄與生命周期相關的問題。 之前，我們講到過生命周期，如下所示：
根據圖示我們很容易理解vue的生命周期：
- js執行到new Vue() 后，即進入vue的beforeCreate狀態。
- 接着觀察data下的數據，緊接着create。
- create之后，就會檢測是否含有el屬性，如果有，就直接檢測是否含有模板屬性； 如果沒有，就當vm.$mount()調用之后再檢測，vm.$mount()的作用就是將Vue實例掛載到某一個DOM元素上。
- 如果有template，那么我們就編譯模板到render函數中，作用就是為了將模板中的元素渲染進去；如果沒有template，我們就把el所在的HTML作為模板編譯。
- 這樣就進入了 beforeMount 狀態。
- 在mounted 之前，就會創建一個 vm.$el 用來替代 實例中的el， ok！ 這樣就可以mouted了。
- 接着，如果data發生了變化，就會有beforeUpdata，在替換了之后，就是updated的狀態啦！ 這是一個循環的過程，因為updated是可以一直更新的嘛！
- 最后如果我們調用了 vm.$destroy() 就會進入 beforeDestory, 然后解除 watchers、child components 以及 listeners，最后就destroyed了， 那么他的生命也就結束了。
總結來說： 是 new Vue() 開啟了vue實例的生命周期， vm.$destroy() 結束了vue實例的生命周期。
當然了，對於不同的生命周期，都對應着相應的鈎子函數，且一共有8個鈎子函數，如下所示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="example"> <p>朱振偉</p> {{message}} </div> <script> var example=new Vue({ el:'#example', beforeCreate () { alert("beforeCreate"); }, created () { alert("created"); }, beforeMount () { alert("beforeMount"); }, mounted () { alert("mounted"); }, beforeUpdate () { alert("beforeUpdate"); }, updated () { alert("updated"); }, beforeDestroy () { alert("beforeDestroy"); }, destroyed () { alert("destroyed"); } }); </script> </body> </html>
當我們運行之后，會發現，beforeCreate、created、beforeMount、mounted以此觸發，如果我們在控制台輸入 example.message = "JohnZhu"; 那么就又會依次觸發 beforeUpdate 和 updated 對應的鈎子函數， 如果我們在控制台輸入 example.$destroy() 那么就會依次觸發 beforeDestroy 和 destroyed 對應的鈎子函數。
生命周期大概就是這樣了。
補充：
除了在vue官網（上圖）中提到的生命周期鈎子之后，vue2中還添加了 activated 和 deactivated 鈎子函數，當渲染的組件啟用了 keep-alive 時，那么進入一個路由指定的組件時，就會調用 activated 鈎子函數，如果一個組件沒有設定 keep-alive ，那么就不會調用 activated 鈎子函數， 而是調用 deactivated 鈎子函數。
比如：
<div id="app"> <keep-alive> <router-view></router-view> </keep-alive> </div>
這里的 router-view 是所有的頁面都會在這里渲染的，而 keep-alive 又包裹在這之外，所以說這個app中的所有路由在切換時都會調用 activated 鈎子函數。
單文件組件下的生命周期
先看下面這個例子：
<template>
<div class="personal-wrap">
<Personal></Personal>
<button v-on:click="exit" class="btn" v-if="loginBool">退出登錄</button>
<button v-on:click="login" class="btn btn-login" v-else>現在登錄</button>
<FooterMenu></FooterMenu>
</div>
</template>
<script>
import FooterMenu from '@components/menu';
import Personal from '@components/personal';
import {mapState,mapMutations, mapActions} from 'vuex'
export default {
components: {
FooterMenu,
Personal
},
data () {
return {
loginBool: Boolean(sessionStorage.getItem("loginBool"))
}
},
methods: {
...mapMutations([
'UPDATE_PICTURES'
]),
...mapActions([
'loginWx'
]),
exit: function () {
var result = confirm("確認注銷登錄？");
if (result == true) {
window.location.href = window.location.href.replace(window.location.search, "");
}
},
login: function () {
this.loginWx(2);
}
},
beforeCreate () {
document.title = "替換之后";
},
created () {
this.UPDATE_PICTURES(3);
alert( 'created' + JSON.stringify(document.querySelector('.btn')));
},
beforeMount () {
alert( 'beforeMounte' + JSON.stringify(document.querySelector('.btn')));
},
mounted () {
alert( 'mounted' + JSON.stringify(document.querySelector('.btn')));
}
}
</script>
這是一個單文件組件，因為只是為了說明生命周期的使用，刪去了一部分。
- beforeCreate 是在創建data之前的鈎子，即這時剛剛創建完Vue實例，然后el，data這些還都沒有，但是因為這是單文件組件，所以，document.title是可以訪問到的，這點值得注意。並且由於這時候是沒有data和method可以使用的，所以不能使用method下的方法。
- 接着在created之后，el仍然是沒有掛載的，但是data已經初始化完成了，並且一些方法(methods)也已經可以使用了，沒有掛載，所以訪問不到單組件中的html元素。
- boforeMount 這時仍然沒有掛載，只是開始調用了render函數，同樣，沒有掛載，也是訪問不到vue單組件中的html元素的。
-
在mounted之后， 這時已經將vue和組件聯系起來，掛載完成，所以就可以得到其中的html元素了。
常用的鈎子
可以看出，我們可以在beforeCreate中使用一些操作document的方法。 在created中可以使用大部分的方法。 在 mounted中可以使用與掛載元素相關的一些方法，如操作dom。
補充： 當然，因為localStorage這種東西都是一直存在的，所以在任何生命周期下都是可以正常訪問 localStorage 和 sessionStorage的。