Vue的生命周期
Vue示例被創(chuàng)建到銷毀的過程
Vue的鉤子函數詳解
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue的聲明周期和鉤子函數</title>
</head>
<body>
<div id="app">
<button @click="win">control</button>
{{msg}}
</div>
<script src="js/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: 'hello'
},
// template: "<h1>{{msg}}-------ok</h1>",
methods: {
win() {
alert('ok');
}
},
// 生命周期(鉤子函數 hook)函數就是vue實例在某一個時間點會自動執(zhí)行的函數
// 此時vue實例已經進行了基礎的初始化，但data數據還沒有綁定到vue的實例剃盾，此時狮惜，訪問不到data數據
beforeCreate() {
console.log('beforeCreate', this.msg);
},
// 此時，data數據已經注入vue的實例踱讨，我們可以通過this訪問到data數據
created() {
console.log('created', this.msg);
},
// 此時，模板和數據已經結合砍的，編譯痹筛，但還沒有掛載到指定的掛載點上 （或者沒有掛載到指定的頁面元素上）
beforeMount() {
console.log('beforeMount', this.$el);
},
// 此時，編譯后的模板已經掛載到掛載點上廓鞠，我們會看到加載了數據的視圖的更新
mounted() {
console.log('mounted', this.$el);
},
// 當有數據發(fā)生改變時帚稠，模板重新渲染之前，會觸發(fā)該事件床佳。
beforeUpdate() {
console.log('beforeUpdate', this.$el.innerHTML);
},
// 當模板重新渲染之后滋早，觸發(fā)該事件
updated() {
console.log('updated', this.$el.innerHTML);
},
// 當執(zhí)行vm.$destroy()，vue實例銷毀之前發(fā)生
beforeDestroy() {
console.log('beforeDestroy');
},
//vue實例銷毀之后發(fā)生砌们，此時再改變數據杆麸，不會觸發(fā)視圖更新（或者視圖重新渲染）
destroyed() {
console.log('destroyed');
}
});
//也可以通過vm.$mount注冊掛載點
// vm.$mount('#app');
</script>
</body>
</html>
