1、watch
理解: 監聽器,監聽某個數據的變化從而來執行一些操作,當data裏面的數據發生變化的時候來執行一下開銷較大或異步的操作
1、監聽值類型(簡單類型)數據
//在一個vue實例中
new Vue({
el:"#myApp",
data:{
num1:1,
num2:2
},
methods:{},
watch:{
//這裏兩個屬性,第一個值是變化後最新的值,第二個是變化前
num1(after,before){
this.num2 = after +1
}
immediate:true //頁面首次加載的時候做一次監聽。
//這裏的意思就是,監聽num1的變化,當num1的數據發生變化的時候,來操作num2的值
}
})
2、監聽引用(複雜)類型的數據
new Vue({
el:"#myApp",
data:{
obj:{
userName:"caicai"
}
},
watch:{
obj:{
handler(newValue,oldValue){
// handler函數是當你的obj發生變化的時候你要做什麼
console.log(newValue.userName,oldValue.userName);
},
deep:true //是否深度偵聽,true開啓,false關閉,默認false
//加了deep之後相當於在對象obj每一層的屬性都加上了handler偵聽器。否則的話偵聽到的只是引用地址,不會執行handler函數
}
}
});
2、computed
理解: 計算屬性,顧名思義就是通過某個屬性(數據)來計算得到某個屬性,這個重點在於計算,我們希望的是拿到data數據後處理一下,得到計算的結果。
在原vue中的template模板,作者初衷只是進行一些簡單的運算,那麼比較複雜的計算就可用computed來進行操作
1、第一種操作,寫在模板裏,導致模板過重,難於維護
{{str.split("").reverse().join("")}}
2、第二種,使用一個方法來調用,若多處使用,就執行多次,降低運行速度,性能減少
{{fn(str)}}
3、第三種,使用過濾器,具有緩存,只要str不發生變化,就不會再次進行運算
{{reverseStr}}
到這裏我先略微總結一下這兩者的區別,以及使用場景
computed:
1、監控自己定義的變量,不用再data裏面聲明,函數名就是變量名
2、適合多個變量或對象進行處理後返回一個值(結果)。若這多個變量發生只要有一個發生變化,結果都會變化。
3、計算的結果具有緩存,依賴響應式屬性變化,響應式屬性沒有變化,直接從緩存中讀取結果。
4、在內部函數調用的時候不用加()。
5、必須用return返回
6、不要在computed 中對data中的數據進行賦值操作,這會形成一個死循環。
watch:鄭州婦科醫院 http://www.xadsyyfk.com/
1、watch 函數是不需要調用的。
2、重點在於監控,監控數據發生變化的時候,執行回調函數操作。
3、當我們需要在數據變化時執行異步或開銷較大的操作時,應該使用 watch
4、函數名就是你要監聽的數據名字
使用場景:
computed:
1、一個需要的結果受多個數據影響的時候,比如購物車結算金額(受到很多處的價格結算)。
2、操作某個屬性,執行一些複雜的邏輯,並在多處使用這個結果。
3、內部函數中多處要使用到這個結果的。
watch :
1、監控一些input框值的特殊處理,適合一個數據影響多個數據。
2、數據變化時,執行一些異步操作,或開銷比較大的操作
3、updated
理解: 是vue生命週期裏面的一個鉤子函數—data數據更新後觸發視圖更新。這裏是視圖更新之後的操作可以在這裏執行。
觸發條件:
1、當data中定義的數據有變化時就會加載updated方法。
2、任何數據的更新,如果要做統一的業務邏輯處理
3、在大多數情況下,此期間避免更改狀態,因爲這可能會導致更新無限循環。該鉤子在服務器端渲染期間不被調用。
特點:
1.執行到它的時候時候是數據發生變化且界面更新完畢
2.不能監聽到路由數據(例如網址中的參數)
3.所有的數據發生變化都會調用(消耗性能)
4.只要數據發生變化,每次觸發的代碼都是同一個