Vue計算屬性vs監聽器vs函式方法
new Vue({
el: '#app',
data: {
num: 1, //被監聽，被函式呼叫，被屬性呼叫
msg: 'hello', //頁面中的無關資料
watchNum: ''
},
watch：{ //監聽器
num:{ //監聽值
immediate:true, //初始化的時候也會執行一次
handler(newValue,oldValue){ //固定封裝函式名
this.watchNum = newValue*2 //只有監聽值發生改變才執行
}
}
}
computed: { //計算屬性
computedNum():{
return this.num * 2 //依賴項
}
},
methods:{ //函式方法
doubleNum(){ //當無關資料更改時，方法會被呼叫
return this.num * 2 //如果資料沒有宣告，值為NaN
}
}
})
1.計算屬性
計算屬性寫法是一個函式，以屬性的方式進行呼叫，計算屬性會根據現有的資料生成一個新的資料，并且兩者會產生關聯，建立永久性快取，并且當無關資料發生改變的時候，計算屬性內部不會重新計算，而是直接從快取里面取值使用即可，
計算屬性默認只有 getter，不過在需要時你也可以提供一個 setter：
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
2.watch
watch可以監聽現有的資料的改變，然后當現有的資料發生改變后，接下來實作對應的業務邏輯，
監聽具體的某個值的改變，當某個值發現變化了，對應的回呼函式會重新計算，
3.函式方法
methods里可以封裝一些函式方法，方法可以修改資料，但是當頁面中的使用了無關資料，無關資料改變，該方法也會呼叫重新計算，
computed vs watch的區別？
1.watch的監聽只能是單個的監聽，每次監聽只能監聽一個變數的修改，不能同時監聽多個變數的修改
computed可以依賴多個資料的變化（并且只跟他所依賴的項進行關聯）
2.當需要在資料變化時執行異步或開銷較大的操作時，只能采用watch
computed vs methods中函式方法的區別？
1.無關資料發生變化時，methods中函式重新呼叫，重新計算，computed不會被呼叫，從快取取值
2.多次呼叫相同方法時，methods中函式呼叫多次，計算多次，computed就只計算一次，之后從快取取值，computed只基于依賴項進行改變，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/152798.html
標籤：其他
上一篇：JAVASCRIPT知識點（一）
下一篇：JS特效：兩側廣告跟隨