vue1--》
一 vue的生命周期如下圖所示
二 vue生命周期的例子
注意觸發(fā)vue的created事件以后,this便指向vue實(shí)例,這點(diǎn)很重要
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue生命周期</title>
<script src="../js/vue.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<div class="test" style="border: 1px black dashed;padding: 8px;">
{{a}}
</div>
<div class="test2" style="border: 1px red solid;margin-top: 10px;padding: 8px;">
我是內(nèi)容二
</div>
<script type="text/javascript">
var myVue = new Vue({
el: ".test",
data: {
a: "我是內(nèi)容,在控制臺(tái)輸入myVue.a=123456,可以改變我的值"
},
created: function () {
//在實(shí)例創(chuàng)建之后同步調(diào)用。此時(shí)實(shí)例已經(jīng)結(jié)束解析選項(xiàng)，這意味著已建立：數(shù)據(jù)綁定汽久，計(jì)算屬性，方法忙上，watcher/事件回調(diào)。
//但是還沒有開始 DOM 編譯闲坎，$el 還不存在,但是實(shí)例存在,即this.a存在,可打印出來 疫粥。
console.log("建立");
},
beforeCompile: function () {
console.log("未開始編譯");
},
compiled: function () {
//在編譯結(jié)束后調(diào)用。此時(shí)所有的指令已生效腰懂，因而數(shù)據(jù)的變化將觸發(fā) DOM 更新梗逮。但是不擔(dān)保 $el 已插入文檔。
console.log("編譯完成");
},
ready: function () {
//在編譯結(jié)束和 $el 第一次插入文檔之后調(diào)用绣溜，如在第一次 attached 鉤子之后調(diào)用慷彤。注意必須是由 Vue 插入（如 vm.$appendTo() 等方法或指令更新）才觸發(fā) ready 鉤子。
console.log("一切準(zhǔn)備好了");
},
attached :function () { //myVue.$appendTo(".test2")暫時(shí)觸發(fā)不了,不知道怎么解決
//在 vm.$el 插入 DOM 時(shí)調(diào)用怖喻。必須是由指令或?qū)嵗椒ǎㄈ?$appendTo()）插入底哗，直接操作 vm.$el 不會(huì) 觸發(fā)這個(gè)鉤子。
console.log("插入DOM成功");
},
detached :function () { //觸發(fā)事件 myVue.$destroy(true),其中參數(shù)true控制是否刪除DOM節(jié)點(diǎn)或者myVue.$remove()
//在 vm.$el 從 DOM 中刪除時(shí)調(diào)用锚沸。必須是由指令或?qū)嵗椒▌h除跋选，直接操作 vm.$el 不會(huì) 觸發(fā)這個(gè)鉤子。
console.log("刪除DOM成功");
},
beforeDestroy: function () { //觸發(fā)方式,在console里面打myVue.$destroy();
//在開始銷毀實(shí)例時(shí)調(diào)用哗蜈。此時(shí)實(shí)例仍然有功能前标。
console.log("銷毀前");
},
destroyed: function () { //觸發(fā)方式,在console里面打myVue.$destroy();其中myVue.$destroy(true)是刪除DOM節(jié)點(diǎn),會(huì)觸發(fā)detached函數(shù),但是實(shí)例仍然存在
//在實(shí)例被銷毀之后調(diào)用坠韩。此時(shí)所有的綁定和實(shí)例的指令已經(jīng)解綁，注意是解綁不是銷毀,所有的子實(shí)例也已經(jīng)被銷毀炼列。
console.log("已銷毀");
}
});
</script>
</body>
</html>
--->vue2
Vue提供的可以注冊(cè)的鉤子都在上圖片的紅色框標(biāo)注只搁。 他們是：
beforeCreate
在實(shí)例初始化之后，數(shù)據(jù)觀測(cè)(data observer) 和 event/watcher 事件配置之前被調(diào)用俭尖。
created
實(shí)例已經(jīng)創(chuàng)建完成之后被調(diào)用氢惋。在這一步，實(shí)例已完成以下的配置：數(shù)據(jù)觀測(cè)(data observer)目溉，屬性和方法的運(yùn)算， watch/event 事件回調(diào)菱农。然而缭付，掛載階段還沒開始，$el 屬性目前不可見循未。
beforeMount
在掛載開始之前被調(diào)用：相關(guān)的 render 函數(shù)首次被調(diào)用陷猫。
mounted
el 被新創(chuàng)建的 vm.$el 替換，并掛載到實(shí)例上去之后調(diào)用該鉤子的妖。如果 root 實(shí)例掛載了一個(gè)文檔內(nèi)元素绣檬，當(dāng) mounted 被調(diào)用時(shí) vm.$el 也在文檔內(nèi)。
beforeUpdate
數(shù)據(jù)更新時(shí)調(diào)用嫂粟，發(fā)生在虛擬 DOM 重新渲染和打補(bǔ)丁之前娇未。 你可以在這個(gè)鉤子中進(jìn)一步地更改狀態(tài)，這不會(huì)觸發(fā)附加的重渲染過程星虹。
updated
由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補(bǔ)丁零抬，在這之后會(huì)調(diào)用該鉤子。
當(dāng)這個(gè)鉤子被調(diào)用時(shí)宽涌，組件 DOM 已經(jīng)更新平夜，所以你現(xiàn)在可以執(zhí)行依賴于 DOM 的操作。然而在大多數(shù)情況下卸亮，你應(yīng)該避免在此期間更改狀態(tài)忽妒，因?yàn)檫@可能會(huì)導(dǎo)致更新無限循環(huán)。
該鉤子在服務(wù)器端渲染期間不被調(diào)用兼贸。
beforeDestroy
實(shí)例銷毀之前調(diào)用段直。在這一步，實(shí)例仍然完全可用溶诞。
destroyed
Vue 實(shí)例銷毀后調(diào)用坷牛。調(diào)用后，Vue 實(shí)例指示的所有東西都會(huì)解綁定很澄，所有的事件監(jiān)聽器會(huì)被移除京闰，所有的子實(shí)例也會(huì)被銷毀颜及。 該鉤子在服務(wù)器端渲染期間不被調(diào)用。
