標籤：$.watch
生命週期：
650) this.width=650;" src="http://s1.51cto.com/wyfs02/M01/8B/3B/wKioL1hHqxGxe-zWAAILL5z4vV8240.png" title="lifecycle.png" alt="wKioL1hHqxGxe-zWAAILL5z4vV8240.png" />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>
650) this.width=650;" src="http://s3.51cto.com/wyfs02/M00/8B/3B/wKioL1hHsiKRpGgSAAfuIyK43dY856.gif" title="33.gif" alt="wKioL1hHsiKRpGgSAAfuIyK43dY856.gif" />
監聽資料變化
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>
650) this.width=650;" src="http://s3.51cto.com/wyfs02/M01/8B/3B/wKioL1hHt6-y3VdzAAUkbvbA7qM088.gif" title="56.gif" alt="wKioL1hHt6-y3VdzAAUkbvbA7qM088.gif" />
選項：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` 的當前值觸發回調
本文出自 “dapengtalk” 部落格，請務必保留此出處http://dapengtalk.blog.51cto.com/11549574/1880350
Vue.js 生命週期
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
