vue的鉤子函式

1.computed 計算屬性

計算屬性將被混入到 vue 例項中。所有 getter 和 setter 的 this 上下文自動地繫結為 vue

1..aplus: ,
set: 
function
(v) 
}2.. aplus()

這兩種方法都可以，平時我們可以只寫get，可以寫成2形式，省略set方法，但是如果我們相對我們的計算屬性進行修改，這個set方法不能省略。

2.methods 方法

這裡只提一下它和computed的區別

methods 和 computed 看起來可以做同樣的事情，單純看結果兩種方式確實是相同的。

然而，不同的是計算屬性是基於它們的依賴進行快取的。計算屬性只有在它的相關依賴發生改變

時才會重新求值。這就意味著只要 message 還沒有發生改變，多次訪問 reversedmessage 計算屬性會

立即返回之前的計算結果，而不必再次執行函式。相比而言，只要發生重新渲染，method 呼叫總會執行

該函式。

3.watcher

乙個物件，鍵是需要觀察的表示式，值是對應**函式。值也可以是方法名，或者包含選項的物件。vue 例項將會在例項化時呼叫$watch()，遍歷 watch 物件的每乙個屬性。

watch: ,
//方法名
b: 'somemethod',
//深度 watcher
c: ,
deep: 
true
}, 
//該**將會在偵聽開始之後被立即呼叫
d: ,
immediate: 
true
}, e: [
function handle1 (val, oldval) ,
function handle2 (val, oldval) 
],}

這裡主要說深度watcher 加乙個 deep:true，類似於深拷貝的深，可以監聽陣列和物件

4.生命週期函式

之前有總結過，這裡說兩點

vue.nexttick(function
() )

在vue做**的時候，一般在操作完之後，要更新列表重新整理資料。但是我們本地做一些**的變換，不想發請求怎麼辦？我們可以利用nexttick，比如， ,在我們更新完資料，這個**因為沒有更新資料，所以它沒有變化，我們可以 this.tab = ' ' this.$nexttick(() => this.tab = 'a'）

在 vue 生命週期的 created() 鉤子函式進行的 dom 操作一定要放在 vue.nexttick() 的**函式中。原因是什麼呢，原因是

1.在 created() 鉤子函式執行的時候 dom 其實並未進行任何渲染，而此時進行 dom 操作無異於徒勞，所以此處一定要將 dom 操作

的 js **放進 vue.nexttick() 的**函式中。與之對應的就是 mounted 鉤子函式，因為該鉤子函式執行時所有的 dom 掛載和渲染此時在該鉤子函式中進行任何dom操作都不會有問題。

2.在資料變化後要執行的某個操作，而這個操作需要使用隨資料改變而改變的 dom 結構的時候，這個操作都應該放進 vue.nexttick() 的**函式中。

小結：beforecreate : 可以在這加個loading事件，在載入例項時觸發

created : 初始化完成時的事件寫在這裡，如在這結束loading事件，非同步請求也適宜在這裡呼叫

mounted : 掛載元素，獲取到dom節點

updated : 如果對資料統一處理，在這裡寫上相應函式

beforedestroy : 可以做乙個確認停止事件的確認框

nexttick : 更新資料後立即操作dom

vue的鉤子函式

vue 鉤子函式

vue 鉤子函式

vue鉤子函式

vue的鉤子函式

vue 鉤子函式

vue 鉤子函式

vue鉤子函式

相關推薦