计算属性 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, 当需要在数据变化时执行异步或开销较大的操作时
来源: http://www.bubuko.com/infodetail-2847194.html