上学的时候。想要考试考得好。教材熟读少不了。所以我们快乐的打开官方文档。开始阅读文档中的释意。vue 来到计算属性(computed)和监听器(watch)页面。
computed
首先我们看到设计初衷：虽然template模板内可以写一些简单的js表达式。比如{{this.a + this.b}}。但是如果表达式的逻辑复杂。就会让模板本身变得过重。对页面的维护性也造成很大的影响。所以对于任何复杂逻辑都需要用computed来解决。
基础例子
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage() {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
注意：reversedMessage的值始终取决于message的值。也就是说，他是基于响应式依赖带有缓存性质的。只要message的值不变。你多次访问reversedMessage。计算属性也会立即返回之前的计算结果。不会重新计算。举个例子比如和方法进行对比：
<p>Reversed message: "{{ reversedMessage() }}"</p>
// 在组件中
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
虽然两者输出的结果相同。但是使用计算属性（有缓存）和使用方法（无缓存）对内存的消耗还是有很大区别的。
计算属性默认只有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]
}
}
}
运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。
watch
一般来说计算属性可以给我们解决问多响应式依赖改变监听的需求。但是还有一些。比如当响应数据变化。需要做一些执行异步或者开销比较大的操作的时候。watch是最合适的。
- 深度监听(所有属性)
watch:{
obj:{
handler(newVal,oldVal){
},
deep:true
}
}
- 监听某个属性的变化
watch:{
'obj.aaa':{
handler(newVal,oldVal){
}
},
}
总结
相同点
都能监听属性变化。并形成新属性。
computed是根据其他依赖的属性来形成新的属性
watch是用来监听data或者props属性的变化。来触发相关操作
不同点
computed结果会被缓存。只有当依赖数据变化。它才会重新计算
不支持异步，虽然属性有也有get和set方法。但是默认走get方法
watch不会缓存。且支持异步。适用于需要异步操作或者开销比较大的操作。可以deep深层便利。只要obj里面数据有变化就会触发监听操作。也可以只针对某个属性做监听。
网友评论