观察 Watchers
虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的 watcher 。这是为什么 Vue 提供一个更通用的方法通过watch 选项,来响应数据的变化。当你想要在数据变化响应时,执行异步操作或开销较大的操作,这是很有用的。
大家对于 watch 应该不陌生,项目中都用过下面这种写法:
watch: { someProp () { // do something } } // 或者 watch: { someProp: { deep: true, handler () { // do something } } }
上面的写法告诉 vue,我需要监听 someProp 属性的变化,于是 vue 在内部就会为我们创建一个 watcher 对象。(限于篇幅,我们不聊 watcher 的具体实现,感兴趣的可以直接看源码 watcher)
然而在 vue 中,watcher 的功能并没有这么单一,先上段代码:
<template> <div> <p>a: {{ a }}</p> <p>b: {{ b }}</p> <button @click="increment">+</button> </div> </template> <script> export default { data () { return { a: 1 } }, computed: { b () { return this.a * 2 } }, watch: { a () { console.log('a is changed') } }, methods: { increment () { this.a += 1 } }, created () { console.log(this._watchers) } } </script>
在线demo
上面代码非常简单,我们现在主要关注 created 钩子中打印的 this._watchers,如下:
分别展开三个 watcher,观察每一个 expression,从上到下分别为:
b() { return this.a * 2;↵ } "a" function () { vm._update(vm._render(), hydrating);↵ }
上面三个 watcher 代表了三种不同功能的 watcher,我们将其按功能分为三类:
- 在 watch 中定义的,用于监听属性变化的 watcher (第二个)
- 用于 computed 属性的 watcher (第一个)
- 用于页面更新的 watcher (第三个)
normal-watcher
我们在 watch 中定义的,都属于这种类型,即只要监听的属性改变了,都会触发定义好的回调函数
computed-watcher
每一个 computed 属性,最后都会生成一个对应的 watcher 对象,但是这类 watcher 有个特点,我们拿上面的 b 举例:
属性 b 依赖 a,当 a 改变的时候,b 并不会立即重新计算,只有之后其他地方需要读取 b 的时候,它才会真正计算,即具备 lazy(懒计算)特性
render-watcher
每一个组件都会有一个 render-watcher, function () {↵ vm._update(vm._render(), hydrating);↵ }