vue学习之计算属性和侦听器
程序员文章站
2022-05-17 07:50:53
...
- 计算属性是基于响应式依赖进行缓存,只在相关响应式依赖(被调用)发生改变时才会重新求值(同一函数定义为一个方法时,只有触发重新渲染时,才会再次执行函数)。
// 以下计算属性将不再更新,因为 `Date.now()` 不是响应式依赖:
computed: {
now: function () {
return Date.now()
}
}
- 计算属性默认只有 getter,在需要时自己提供一个 setter,当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]
}
}
}
- 当需要在数据变化时执行异步或开销较大的操作时,使用watch。
// 在初始化时就执行(默认false)
immediate:true
// 深度监听(默认false)。消耗性能,优化:使用字符串形式监听
deep:true
// 注销watch(这种写法会导致内置溢出)
const app = new Vue({
template: '<div id="root">{{text}}</div>',
data: {
text: 0
},
watch: {
text(newVal, oldVal){
console.log(`${newVal} : ${oldVal}`);
}
}
});
const unWatch = app.$watch('text', (newVal, oldVal) => {
console.log(`${newVal} : ${oldVal}`);
})
// 手动注销
unWatch();
- 计算属性和侦听器属性定义的函数不能使用箭头函数,否则内部this会指向组件的父环境,比如window,导致调用失败。
-
最后:
计算属性依赖一个或多个数据(不限于当前vue实例
),即模板中的某个值需要通过一个或多个数据计算得到时,就可以使用计算属性;另:计算属性的函数不接受参数。侦听器属性主要是监听某个值发生变化后,根据新值去进行逻辑处理。