一个开始
有如下代码,full是一个计算属性,开始,他的值是'hello world',1s后,msg变成了‘I like’, full的值同步变成了'I like world';其原理解析来看一下。
<div id="app"> <span :msg="msg"></span> <div> {{full}}</div> </div> <script src="./vue.js"></script> <script> new Vue({ el: '#app', data: { msg: 'hello ', }, computed: { full() { return this.msg + 'world'; }, }, mounted() { setTimeout(() => { this.msg = 'I like '; }, 1000); } }) </script>
从入口开始
new Vue时,首先vue执行了_init方法,在这里做了vue的初始化工作,其中执行了一个initState函数,该函数进行的数据处理。
函数内容如下
function initState (vm) { vm._watchers = []; var opts = vm.$options; if (opts.props) { initProps(vm, opts.props); } if (opts.methods) { initMethods(vm, opts.methods); } // data数据绑定,数据驱动核心 if (opts.data) { initData(vm); } else { observe(vm._data = {}, true /* asRootData */); } // 计算属性绑定 if (opts.computed) { initComputed(vm, opts.computed); } if (opts.watch && opts.watch !== nativeWatch) { initWatch(vm, opts.watch); } }
其中有两个核心流程,data绑定和computed初始化。首先来看一下计算属性初始化干了什么事。
计算属性初始化
执行initComputed时,会执行以下操作,会为每一个computed属性创建watcher并且执行defineComputed,在开始的示例中,会给full属性new一个watcher。
function initComputed (vm, computed) { // 创建watchers对象缓存watcher var watchers = vm._computedWatchers = Object.create(null); for (var key in computed) { // 计算属性的执行函数/get、set描述对象 var userDef = computed[key]; var getter = typeof userDef === 'function' ? userDef : userDef.get; watchers[key] = new Watcher( vm, getter || noop, noop, computedWatcherOptions ); if (!(key in vm)) { defineComputed(vm, key, userDef); } } }
defineComputed做了什么呢?
function defineComputed ( target, key, userDef ) { // 只论述传入的值为函数的情况 if (typeof userDef === 'function') { sharedPropertyDefinition.get = function computedGetter () { var watcher = this._computedWatchers && this._computedWatchers[key]; if (watcher) { watcher.depend(); return watcher.evaluate() } } sharedPropertyDefinition.set = noop; } // 进行了属性的描述定义。 Object.defineProperty(target, key, sharedPropertyDefinition); }
defineComputed函数会给当前的vue实例挂载计算属性,defineProperty定义其描述,其中get执行的函数如上。
那么现在回到开始。开始的示例中,定义了full计算属性,并且template中使用了full属性,当模板中渲染full时,做了什么(这是vnode解析并渲染部分)?我们假设会获取full的值并且填充到模板中
,因此我们会触发了full的get函数,就是以上get代码。
首先获取当前vue实例中的计算属性对应的监听器Watcher,然后进行depend方法执行,然后执行evaluate()方法,接下来我们走进监听器Watcher。
Vue中的Watcher
简单介绍watcher的作用,watcher顾名思义,监听器,1.监听什么2.要干什么事,这是我们关心的。
var Watcher = function Watcher ( vm, expOrFn, cb, options, isRenderWatcher ) { this.vm = vm; if (isRenderWatcher) { vm._watcher = this; } vm._watchers.push(this); // options if (options) { this.deep = !!options.deep; this.computed = !!options.computed; } else { this.deep = this.user = this.computed = this.sync = false; } this.cb = cb; this.id = ++uid$1; // uid for batching this.active = true; this.dirty = this.computed; // for computed watchers this.deps = []; this.newDeps = []; this.depIds = new _Set(); this.newDepIds = new _Set(); // parse expression for getter if (typeof expOrFn === 'function') { this.getter = expOrFn; } // 如果是计算属性,执行if,如果不是执行else if (this.computed) { this.value = undefined; this.dep = new Dep(); } else { this.value = this.get(); } };
以上代码是Watcher的入口,看我们关心的入参数:
vm:当前vue对象
expOrFn:监听器触发的函数(2.要干什么)
options:其他参数
计算属性在new Watcher时,会传入getter函数给expOrFn,从上面代码看,如果expOrFn是函数,就会给getter属性赋值expOrFn,这是没问题的。
同时计算实行new Watcher时,传递{computed: true}给options, 从以上代码看出,如果是计算属性的watcher,会与其他watcher不同的逻辑。
计算属性的Watcher会new Dep赋值给this.dep。
那么Watcher到底是干嘛的,Watcher是监听器,Vue会提供观察者去订阅他,如果观察者发现需要更新某个操作,会通知Watcher,watcher会执行update进行更新。
那么Dep是什么。
Vue中的Dep
Dep是个订阅器,观察者想要订阅监听器,需要订阅器Dep来实现。
同时计算属性的Watcher也会有订阅器,那么他订阅什么呢?同样是其他的Watcher,比如render Watcher, 当计算属性发生变化时,他可以通知render Watcher进行view渲染。
回到主链路
现在我们知道了,计算属性初始化会new Watcher,并计算属性在渲染到视图层时会触发getter,getter中计算属性会触发自己的watcher的两个函数,depend和evaluate,
depend函数会将当前的订阅对象添加到自己的订阅器中,此时的订阅对像则是render watcher,此步骤可以自己做详细了解。
主要的逻辑在evaluate中,evaluate中如果是计算属性并且没有被污染则调用get方法,来看一下get方法
Watcher.prototype.get = function get () { // 将自身设置为订阅对象 pushTarget(this); var value; var vm = this.vm; try { value = this.getter.call(vm, vm); } catch (e) { if (this.user) { handleError(e, vm, ("getter for watcher "" + (this.expression) + """)); } else { throw e } } finally { // "touch" every property so they are all tracked as // dependencies for deep watching if (this.deep) { traverse(value); } popTarget(); this.cleanupDeps(); } return value };
get方法中,首先,计算属性的watcher会将自己设置为订阅对象,共观察者订阅。然后执行getter,那么this.getter我们前面提到了,是我们写的计算属性函数 () {return this.msg + 'world'};
当此getter执行时,我们来想一下。this.msg触发了msg属性的get,那么我们前面提到vue启动了2个核心流程 ,那么这里computed的流程中进入到了data流程中。
initData简介
function initData (vm) { var data = vm.$options.data; data = vm._data = typeof data === 'function' ? getData(data, vm) : data || {}; observe(data, true /* asRootData */); }
简化后,initData就做了这个事情,将data包装为观察者,observe方法中最终会针对data中每一个属性做defineReactive操作,并且递归调用。
defineReactive便是我们双向数据绑定的主要部分。vue将msg属性进行defineReactive重写get/set,并且将它作为一个观察者。
Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: function reactiveGetter () { var value = getter ? getter.call(obj) : val; if (Dep.target) { dep.depend(); if (childOb) { childOb.dep.depend(); if (Array.isArray(value)) { dependArray(value); } } } return value }, set: function reactiveSetter (newVal) { var value = getter ? getter.call(obj) : val; /* eslint-disable no-self-compare */ if (newVal === value || (newVal !== newVal && value !== value)) { return } /* eslint-enable no-self-compare */ if ("development" !== 'production' && customSetter) { customSetter(); } if (setter) { setter.call(obj, newVal); } else { val = newVal; } childOb = !shallow && observe(newVal); dep.notify(); } });
当我们执行this.msg, 进行msg的get时,以上get方法执行,并且此时我们说过计算属性full将自己的watcher设置为订阅对象Dep.target,因此msg的get中会执行dep.depend,depend方法中会将当前的Dep.target添加到订阅器中,因此msg的订阅列表会有full的watcher。
再次回到主链路
前面说到,计算属性在初始化时会创建一个watcher,并且计算属性会被定义为vue实例的一个属性Object.defineProperty,并且其getter会触发自身watcher的两个方法。
sharedPropertyDefinition.get = function computedGetter () { var watcher = this._computedWatchers && this._computedWatchers[key]; if (watcher) { watcher.depend(); return watcher.evaluate() } }
getter的返回值是watcher.evaluate();
Watcher.prototype.evaluate = function evaluate () { if (this.dirty) { this.value = this.get(); this.dirty = false; } return this.value };
evaluate方法返回了this.value,其实此时value就是计算好的值 hello world。计算的逻辑上面讲述了,连贯的叙述一遍:
在full计算属性getter执行时,会使用this.msg的值,触发this.msg的get,在这里,发现目前拥有被观察对象Dep.target(也就是计算属性full的监听器),msg的订阅器会添加此观察对象进行观察,msg getter返回msg的值,因此full的getter执行完毕,返回了'hello world',这就是初始化的整个过程。
计算属性的动态性实现
计算属性的初始化已经讲述完成了。那么在msg改变时,full怎么动态改变的呢。
大概你应该明白么,前面讲到了,msg作为双向数据绑定的属性,会包装为观察者,其有订阅器会订阅监听器。当full计算属性初始化时,msg的订阅器订阅了full的watcher,
那么在msg值改变时,也就是setter时,我只需要通知full的watcher同步更新就好了。
Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: function reactiveGetter () { var value = getter ? getter.call(obj) : val; if (Dep.target) { dep.depend(); if (childOb) { childOb.dep.depend(); if (Array.isArray(value)) { dependArray(value); } } } return value }, set: function reactiveSetter (newVal) { var value = getter ? getter.call(obj) : val; /* eslint-disable no-self-compare */ if (newVal === value || (newVal !== newVal && value !== value)) { return } /* eslint-enable no-self-compare */ if ("development" !== 'production' && customSetter) { customSetter(); } if (setter) { setter.call(obj, newVal); } else { val = newVal; } childOb = !shallow && observe(newVal); console.log(dep) dep.notify(); } });
dep.notify()执行后,会通知所有观察的watcher进行更新,因此full的watcher自然也会触发更新,
Watcher.prototype.update = function update () { var this$1 = this; // 如果是计算属性,执行这里 if (this.computed) { this.getAndInvoke(function () { this$1.dep.notify(); }); } else if (this.sync) { this.run(); } else { queueWatcher(this); } };
按照我们的代码走,执行到getAndInvoke。
Watcher.prototype.getAndInvoke = function getAndInvoke (cb) { var value = this.get(); if ( value !== this.value || isObject(value) || this.deep ) { // set new value var oldValue = this.value; this.value = value; this.dirty = false; if (this.user) { try { cb.call(this.vm, value, oldValue); } catch (e) { handleError(e, this.vm, ("callback for watcher "" + (this.expression) + """)); } } else { cb.call(this.vm, value, oldValue); } } };
通过getAndInvoke方法,我们又一次执行了this.get,此时,msg值已经变为了'I like ',因此这里获取到了新的full值。并执行了cb,cb是什么呢,就是上一步的代码
this.getAndInvoke(function () { this$1.dep.notify(); });
this$1指向计算属性full的watcher对象自己,this$1.dep是full watcher的订阅器,这段代码就是通知full watcher订阅的watcher进行update。前面说到,计算属性在初始getter时候,进行了
watcher.depend并添加了订阅对象render watcher,所以在这里,计算属性通知更新的watcher也就是render watcher。 render watcher是什么,是整个vue实例的渲染watcher,承载着vnode
渲染真实dom的角色。
结尾
到这里此次分析已经完成了,此次分析从computed初始化为入口,以双向数据绑定为辅助,完成的整个解析思路,以上代码片段均已删减。
能力有限,源码比较庞大,有些错误的地方请指正。
vue v2.5.17-beta.0版本。