生命週期示意圖：
beforeCreate --> Function
在實例初始化之後，數據觀測（data observer）和event/watcher 事件配置之前調用
created --> Function
實例已經創建完成之後被調用，在這一步，實例已經完成以下的配置：
> 數據觀測（data observer）
> 屬性和方法運算
> watch/event 事件回調
beforeMount --> Function
在掛載開始之前被調用，相關的 render 函數首次被調用
該鉤子在服務器端渲染期間不被調用
mounted --> Function
el 被新創建的 vm.$el 替換，並掛載到實例上去之後調用該鉤子。如果 root 實例掛載了一個文檔內元素，當 mounted 被調用時 vm.$el 也在文檔內。
該鉤子在服務器端渲染期間不被調用。
beforeUpdate --> Function
數據更新時調用，發生在虛擬 DOM 重新渲染和打補丁之前。
你可以在這個鉤子中進一步地更改狀態，這不會觸發附加的重渲染過程。
該鉤子在服務器端渲染期間不被調用。
updated --> Function
由於數據更改導致的虛擬 DOM 重新渲染和打補丁，在這之後會調用該鉤子。
當這個鉤子被調用時，組件 DOM 已經更新，所以你現在可以執行依賴於 DOM 的操作。然而在大多數情況下，你應該避免在此期間更改狀態，因爲這可能會導致更新無限循環。
該鉤子在服務器端渲染期間不被調用。
activated --> Function
keep-alive 組件激活時調用。
該鉤子在服務器端渲染期間不被調用。
deactivated --> Function
keep-alive 組件激活時調用。
該鉤子在服務器端渲染期間不被調用。
beforeDestroy --> Function
實例銷燬之前調用。在這一步，實例仍然完全可用。
該鉤子在服務器端渲染期間不被調用。
destroyed --> Function
Vue 實例銷燬後調用。調用後，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷燬。
該鉤子在服務器端渲染期間不被調用。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
`msg`
</div>
<script src="//cdn.bootcss.com/vue/2.0.8/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'Hello Vue'
},
beforeCreate: function () {
alert('實例創建之前');
},
created: function () {
alert('實例已經創建');
},
beforeMount: function () {
alert('實例掛載之前');
},
mounted: function () {
alert('實例掛載到根元素 #app上');
},
beforeUpdate: function () {
alert('數據更新之前');
},
updated: function () {
alert('數據更新之後');
},
activated: function () {
alert('keep-alive 組件激活時調用');
},
deactivated: function () {
alert('keep-alive 組件停用時調用');
},
beforeDestroy: function () {
alert('實例銷燬之前調用');
},
destroyed: function () {
alert('實例銷燬之後調用');
}
})
</script>
</body>
</html>
監聽數據變化
vm.$watch(expOrFn, callBack, [options])
參數：
expOrFn --> String 或 Function
callBack --> 回調函數
options --> 對象
options取值： deep --> boolean
immediate --> boolean
用法：
觀察 Vue 實例變化的一個表達式或計算屬性函數，回調函數得到的參數爲新值和舊值，表達式只接受監督的鍵路徑。對於更復雜的表達式，用一個函數取代。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
`a`
<br>
`b`
</div>
<script src="//cdn.bootcss.com/vue/2.0.8/vue.js"></script>
<script>
//創建根實例
var vm = new Vue({
el:'#app',
data:{
a:123,
b:321
}
});
//監聽數據變化
vm.$watch('a',function(){
alert('數據a 和 數據b 發生變化了');
this.b = this.a + 100;
},{deep:true});
document.onclick=function(){
vm.a =1;
}
</script>
</body>
</html>
選項：deep 深度監視
爲了發現對象內部值的變化，可以在選項參數中指定 deep: true 。注意監聽數組的變動不需要這麼做。
vm.$watch('someObject', callback, {
deep: true
})
vm.someObject.nestedValue = 123
// callback is fired選項：immediate
在選項參數中指定 immediate: true 將立即以表達式的當前值觸發回調：
vm.$watch('a', callback, {
immediate: true
})
// 立即以 `a` 的當前值觸發回調