计算属性与侦听器

计算属性

作用

实现原理

• 在 beforeCreate 后，遍历computed中的所有的属性，为每一个属性创建一个 Watcher对象，并传入一个函数，收集依赖
• 在创建 Watcher 的时候，使用了 lazy 配置，lazy 配置可以让 Watcher 不会立即执行。收到 lazy 的影响，Watcher 内部会保存两个关键属性来实现缓存，一个是 value，一个是 dirty
  • value 属性用于保存 Watcher 运行的结果，受 lazy 的影响，该值在最开始是 undefined
  • dirty 属性用于指示当前的 value 是否已经过时了，即是否为脏值，受 lazy 的影响，该值在最开始是 true
• Watcher 创建好后，vue 会使用代理模式，将计算属性挂载到组件实例中当读取计算属性时，vue 检查其对应的 Watcher 是否是脏值，
  • 是，则运行函数，计算依赖，并得到对应的值，保存在 Watcher 的 value 中，然后设置 dirty 为 false，然后返回。
  • 不是，则直接返回 watcher 的 value。

侦听器

计算属性与侦听器的对比

相同点

都是观察数据变化的

区别

• computed
  • 混入到 vue 的实例中，监听自定义变量
  • 有缓存，它依赖的值变了才会重新计算
  • 不支持异步
  • computed 是多对一（监听属性依赖于其他属性）
  • 属性是函数时，都有 get 和 set 方法，默认走 get 方法，get 必须有返回值（return）
• watch
  • 监听 data、props 里面数据的变化
  • 没有缓存
  • 支持异步
  • 是一对多（监听某一个值变化，执行对应操作）
  • 监听函数接收两个参数，第一个是最新值，第二个是输入之前的值

计算属性与methods区别

• 在使用时，computed 当做属性使用，而 methods 则当做方法调用
• computed 可以具有 getter 和 setter，因此可以赋值，而 methods 不行
• computed 无法接收多个参数，而 methods 可以
• computed 具有缓存，而 methods 没有