vue计算属性

  computed和methods有什么区别？

  vue 对methods处理特别简单，就是循环methods里的所有方法，然后用bind绑定this，然后放到Vue实例中

对computed的处理有些复杂

  当组件实例触发beforeCreate后，他会做一些事情，其中就有对computed的处理

  他会遍历computed配置中的所有属性，为每一个属性创建一个Wathcer对象，然后传入一个函数，这个函数其实就是getter函数，这样一来，getter运行过程中就会收集依赖。

  但是和渲染函数不同，为计算属性创建的Watcher不会立即执行，因为要考虑到该计算属性是否会被渲染函数使用，如果没有使用,就不会得到执行。因此，在创建Watcher的时候，它使用了lazy配置（懒加载），lazy配置可以让wathcer不会立即执行。

  受到lazy的影响，Watcher内部会保存两个关键属性来实现缓存，一个是value，一个是dirty.

value属性用于保存Watcher运行的结果，受lazy的影响，该值最开始是true

Watcher创建好以后，vue会使用代理模式，将计算属性挂载到组件实例中。

当读取到计算属性时，vue会检查对应的Watcher是否是脏值，如果是的话就重新运行函数得到对应的值，然后放到Watcher的value中，然后设置dirty为false(的踢)，然后返回。

如果dirty为false，直接返回Watcher的value(这就是为什么计算属性有缓存的原因了)

巧妙的是，在收集依赖的时候，被依赖的数据不仅会收集到计算属性的watcher,还会收集到组件的watcher,当计算属性的依赖发生变化时，会先触发计算属性的watcher执行，此时，它只需要谁知dirty为true即可，不做任何处理，然后因为也收集了组件的watcher，因此组件会重新渲染，而重新渲染又读取到了计算属性，然后发现dirty为true，所以就会重新运行getter，重新计算对应的值。

而对于计算属性的setter，处理很简单，当设置计算属性时，直接运行setter即可