学习笔记:vue中watch和computed的区别
引用参考:https://www.jianshu.com/p/bb7a2244c7ca
https://www.cnblogs.com/widgetbox/p/8954162.html
https://segmentfault.com/a/1190000012948175?utm_source=tag-newest
computed
计算属性,当页面中有些数据依赖其他数据进行变动的时候使用。
<p id="app"> {{fullName}} </p>
<script>
var vm = new Vue({
el: '#app',
data: {
firstName: 'Foo',
lastName: 'Bar',
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
</script>
- data中没有直接声明要计算的变量,也可以直接在computed中写入
- computed默认只有get,在需要的时候可以自己设定set
// ...
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 = ‘bibi wang’,相应的firstName和lastName也会改变。
watch
watch用于观察和监听页面上的vue实例,变化的同时进行异步操作或者是比较大的开销,那么watch为最佳选择。watch为一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。
var vm = new Vue({
el: '#app',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
- 如果在data中没有相应的属性的话,是不能watch的,这点和computed不一样。
mimmediate属性
watch 的一个特点是,最初绑定的时候是不会执行的,要等到 firstName 改变时才执行监听计算。
watch: {
firstName: {
handler (newName, oldName) {
this.fullName = newName + ' ' + this.lastName
},
immediate: true
}
},
immediate:true代表如果在 wacth 里声明了 firstName 之后,就会立即先去执行里面的handler方法
deep属性
- 不使用 deep 时,当我们改变 obj.a 的值时,watch不能监听到数据变化,默认情况下,handler 只监听属性引用的变化,也就是只监听了一层,但改对象内部的属性是监听不到的。
- 通过使用 deep: true 进行深入观察,这时,我们监听 obj,会把 obj 下面的属性层层遍历,都加上监听事件,这样做,性能开销也会变大,只要修改 obj 中任意属性值,都会触发 handler。
new Vue({
template: `
<div>
<p>Obj.a: <input type="text" v-model="obj.a"/></p>
</div>
`,
data: {
obj: {
a: '123'
}
},
watch: {
obj: {
handler () {
console.log('obj.a changed')
},
immediate: true
// deep: true
}
}
})
- 但是监听到的newVal和oldVal是一样的,因为他们索引的是同一个对象/数组
可以监听对象的单个属性
watch: {
'obj.a': {
handler () {
console.log('obj.a changed')
},
immediate: true
// deep: true
}
}
区别
- 缓存性:
- computed具有缓存性,页面重新渲染值不变化,只有当所依赖的数据发生变化时,计算属性才会重新计算
- watch没有缓存性,页面重新渲染时值不变化也会执行
- 绑定时执行 最初绑定时,watch不会执行