Vue2.x 计算属性与侦听器区别： - saphigu - 沸点 - 掘金

5年前

Vue2.x 计算属性与侦听器区别：
1. 两者本质都是 watcher：计算属性是 lazy watcher，实例化 Watcher 时不会求值，只有访问到它时才会去订阅其中响应式数据的变化；侦听器是 user watcher，实例化 Watcher 时，就会去订阅所侦测数据的变化。
2. 计算属性的值可以是函数也可以是对象，是对象时，可以设置 get 和 set 以及 cache (cache 为 false，则不会去做数据订阅，只是简单地求值)；侦听器的值可以是字符串、函数也可以是对象，是对象时，可以设置 deep、sync、immediate (deep 为 true 时，会让侦听器 watcher 去订阅侦测对象的每个属性的变化，sync 为 true 时，会同步执行 watcher 回调，immediate 为 true 时，会在实例化 Watcher 后立即执行一次 watcher 回调)，侦听器除了可以侦听响应式属性，还支持 'obj.xxx' 以及侦测一个函数。
3. 计算属性 watcher 的 update 过程只是去修改 dirty 为 true，在渲染 watcher (render 中访问了计算属性) 或侦听器 watcher (侦听了计算属性) 的 update 时去重新进行求值；侦听器 watcher 的 update 过程，要不同步执行回调 (sync 为 true)，要不 nextTick 时，异步执行回调。

展开

等人赞过