Vue计算属性 

1
2
3
4
5
6
7
8
9
10
11
12
new Vue({
  data:(){
    return {
      test: 'a',
    }
  },
  computed: {
    testComputed() {
      return 'computed ' + this.test
    }
  }
}

上一次讲到了Vue的响应式原理，这次就可以依赖上次说到的东西展开说一下Vue的计算属性了。
上次说到我们希望监听一个属性变化的时候new Watcher然后把这个订阅者放到属性的订阅者队列里面。那我们计算属性不也算是可以用同样的原理来做吗？其实Vue确实也是这样做的。简单来说就是为每个一计算属性生成Watcher实例,然后这个Watcher执行求值操作，这样就触发了里面依赖属性的getter,这个getter就可以把这个计算属性的Watcher实例放到自己的订阅者队列里面，最后如果依赖的属性发生变化就会触发这个计算属性Watcher实例的update方法重新对计算属性进行求值。