computed 與緩存
html 部分
<div id="app">
{{fullName}}
<span>{{age}}</span>
</div>
js 部分
let app = new Vue({
el: '#app',
data: {
firstName: 'dev',
lastName: 'zhang',
age: 88
},
computed: {
fullName() {
console.log('計算一次');
return this.firstName + " " + this.lastName
}
},
})
實現效果
image
動態修改 age 的值, 計算屬性不會觸發更改, 修改兩個參考值中的一個, 計算屬性會觸發重新計算. 所以計算屬性是有緩存的, 在參考值沒有發生變化的情況下是不會重復計算和更新 DOM 的, 對性能提升有好處.
image
computed 與 function
html 修改為
<div id="app">
{{fullName()}}
<span>{{age}}</span>
</div>
js 代碼修改為
let app = new Vue({
el: '#app',
data: {
firstName: 'dev',
lastName: 'zhang',
age: 29
},
methods: {
fullName() {
console.log('執行一次方法');
return this.firstName + ' ' + this.lastName
}
},
})
效果圖
image
這時候雖然效果能實現, 但是每次更新元素里的任何一項, 都會觸發方法進行計算, 并更新 DOM,對性能有不必要的浪費
computed 與 watch
js 代碼修改
let app = new Vue({
el: '#app',
data: {
firstName: 'dev',
lastName: 'zhang',
fullName: 'dev zhang',
},
watch: {
firstName(val) {
this.fullName = val + ' ' + this.lastName
},
lastName(val) {
this.fullName = this.firstName + ' ' + val
}
},
})
image
watch 會監聽對應的要素值變化, 這樣也能實現和 computed 一樣的效果, 但代碼量會比 computed 多.
