vue之computed和watch
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue之computed和watch相关的知识,希望对你有一定的参考价值。
计算属性 computed
侦听器or观察者 watch
一直以来对computed和watch一知半解,用的时候就迷迷糊糊的,今天仔细看了看文档,突然茅塞顿开,原来就是这么简单啊:
computed,通过别人改变自己watch,通过自己改变别人
需要注意的是,computed会缓存数据,只有在满足以下两个条件时才会重新计算:
1、存在依赖型数据,即存在于VUE的data等对象的实下的实例数据2、依赖型数据发生改变
如果不满足以上两个条件,computed不会重新计算,只会拿缓存的数据。而watch,只要调用他,他就会执行。
注意:computed会缓存数据,所以进行开销较大的操作时不适合用它。
非依赖型数据发生改变时,这是使用methods方法即可。
computed也可以通过自己改变别人
computed默认只有 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 也会相应地被更新。
什么时候使用
computed
1、其他依赖型数据发生改变,自身也要改变的时候2、自身改变了,想要改变其他数据的时候,这时需要添加setter
watch
1、自身改变时改变其他数据2、当需要在数据变化时执行异步或开销较大的操作时
原文地址:https://segmentfault.com/a/1190000012610140
以上是关于vue之computed和watch的主要内容,如果未能解决你的问题,请参考以下文章