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 多.
