数据驱动视图:
- 理解watcher、dep、observer这三个对象之间的关系
- 这和VUE对象又有什么关系?
- 这和视图又有什么关系?
翻看了文档。找到了一段清晰的代码,
var vm = new Vue({
data: { a: 1 },
computed: {
// 仅读取
aDouble: function () {
return this.a * 2
},
// 读取和设置
aPlus: {
get: function () {
return this.a + 1
},
set: function (v) {
this.a = v - 1
}
}
}
})
然后带着上面的问题,去阅读了vue的构造过程,在initState中发现了computed的构造,其中有一个关键的用法:
function initComputed (vm: Component) {
const computed = vm.$options.computed
...
const userDef = computed[key]
makeComputedGetter(userDef, vm)
...
}
function makeComputedGetter (getter: Function
, owner: Component): Function {
const watcher = new Watcher(owner, getter, noop, {
lazy: true
})
...
}
对于观察者来说用户定义的函数是getter
也就是对于框架底层来说,程序员写的computed函数,对组件来说是getter。computed实际上是用包装了一下用户定义的函数。
可以把他理解成一种特殊的watcher,根据官方的文档,提到了computed有缓存功能,不会更新相同的结果。简单起见我们就把computed当作watcher理解。
然后开始关注这个函数内部发生了什么:
...
computed: {
// 仅读取
aDouble: function () {
return this.a * 2
},
...
这里读取了this.a。
想起来vue内部的变量都是处理过的。
用了observe这个工厂方法加工过,set和get都和watcher和deb耦合。
执行aDouble这个函数,computed就作为一个watcher被Dep.target记住了,而a就是一个obsserver,调用了get就会将watcher保存在deps数组中,就好像a调用get就被aDouble盯上(watch)了,下次a变化(调用a.set)就重新执行一遍aDouble。
这个时候我们再回去看wacher对象,发现这个对象有一个cb存放回调函数,而且代码中还出来了属于VNode模块的**patch**。
cb应该是负责重新渲染视图。
所以这就可以解释VUE是如何驱动视图改变的,源自于一种自动更新的一对多机制。这可以解决父子组件的通信问题,父子组件状态同步可以通过向子组件注入父组件的数据引用,可以实现单向数据流。
查看了官方文档:
每个组件实例都对应一个 watcher 实例,它会在组件渲染的过程中把“接触”过的数据属性记录为依赖。之后当依赖项的 setter 触发时,会通知 watcher,从而使它关联的组件重新渲染。
证实了掘金那个作者说的没错,每一个vue的确有一个watcher
查看watcher.get的call stack:
get (vue.js:647)
Watcher (vue.js:638)
Vue.$watch (vue.js:1254)
createWatcher (vue.js:1232)
initWatch (vue.js:1217)
initState (vue.js:1105)
Vue._init (vue.js:2110)
Vue (vue.js:2150)
(anonymous) (app.js:7)
我们看到Vue.$watch说明vue下确实有一个watcher
这个watcher目的是什么呢?我们回去看了一下watch的构造函数
constructor (
vm: Component,
expOrFn: string | Function,
cb: Function,
options?: Object = {}
) {
...
this.getter = parsePath(expOrFn)
this.value = this.lazy
? undefined
: this.get()
...
}
在parsePath之中会触发所有vue的内部对象的get的函数句柄,然后被执行,所有的内部数据改动都会导致wacher重新渲染数据