vue中watch和computed为什么能监听到数据的改变以及不同之处
先来个流程图,水平有限,凑活看吧-_-||
首先在创建一个vue应用时:
var app = new vue({ el: '#app', data: { message: 'hello vue!' } })
vue构造函数源码:
//创建vue构造函数 function vue (options) { if (!(this instanceof vue) ) { warn('vue is a constructor and should be called with the `new` keyword'); } this._init(options); } //_init方法,会初始化data,watch,computed等 vue.prototype._init = function (options) { var vm = this; // a uid vm._uid = uid$3++; ...... // expose real self vm._self = vm; initlifecycle(vm); initevents(vm); initrender(vm); callhook(vm, 'beforecreate'); initinjections(vm); // resolve injections before data/props initstate(vm); ...... };
在initstate方法中会初始化data、watch和computed,并调用observe函数监听data(object.defineproperty):
function initstate (vm) { vm._watchers = []; var opts = vm.$options; if (opts.props) { initprops(vm, opts.props); } if (opts.methods) { initmethods(vm, opts.methods); } if (opts.data) { initdata(vm);//initdata中也会调用observe方法 } else { observe(vm._data = {}, true /* asrootdata */); } if (opts.computed) { initcomputed(vm, opts.computed); } if (opts.watch && opts.watch !== nativewatch) { initwatch(vm, opts.watch); } }
1、observe
observe在initstate 时被调用,为vue实例的data属性值创建getter、setter函数,在setter中dep.depend会把watcher实例添加到dep实例的subs属性中,在getter中会调用dep.notify,调用watcher的update方法。
/** * attempt to create an observer instance for a value, * returns the new observer if successfully observed, * or the existing observer if the value already has one. * 该函数在initstate中有调用 */ function observe (value, asrootdata) { if (!isobject(value) || value instanceof vnode) { return } var ob; if (hasown(value, '__ob__') && value.__ob__ instanceof observer) { ob = value.__ob__; } else if ( shouldobserve && !isserverrendering() && (array.isarray(value) || isplainobject(value)) && object.isextensible(value) && !value._isvue ) { ob = new observer(value); } if (asrootdata && ob) { ob.vmcount++; } re * observer class that is attached to each observed
* object. once attached, the observer converts the target * object's property keys into getter/setters that * collect dependencies and dispatch updates. */ var observer = function observer (value) { this.value = value; this.dep = new dep(); this.vmcount = 0; def(value, '__ob__', this); if (array.isarray(value)) { if (hasproto) { protoaugment(value, arraymethods); } else { copyaugment(value, arraymethods, arraykeys); } this.observearray(value); } else { this.walk(value); } }; /** * walk through all properties and convert them into * getter/setters. this method should only be called when * value type is object. */ observer.prototype.walk = function walk (obj) { var keys = object.keys(obj); for (var i = 0; i < keys.length; i++) { definereactive$$1(obj, keys[i]); } }; /** * define a reactive property on an object. */ function definereactive$$1 ( obj, key, val, customsetter, shallow ) { var dep = new dep(); var property = object.getownpropertydescriptor(obj, key); if (property && property.configurable === false) { return } // cater for pre-defined getter/setters var getter = property && property.get; var setter = property && property.set; if ((!getter || setter) && arguments.length === 2) { val = obj[key]; } var childob = !shallow && observe(val); object.defineproperty(obj, key, { enumerable: true, configurable: true, get: function reactivegetter () { var value = getter ? getter.call(obj) : val;
//dep.target 全局变量指向的就是指向当前正在解析生成的 watcher
//会执行到dep.addsub,将watcher添加到dep对象的watcher数组中 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 (customsetter) { customsetter(); } // #7981: for accessor properties without setter if (getter && !setter) { return } if (setter) { setter.call(obj, newval); } else { val = newval; } childob = !shallow && observe(newval); dep.notify();//如果数据被重新赋值了, 调用 dep 的 notify 方法, 通知所有的 watcher
} }); }
2、dep
watcher的update方法是在new dep的notify的方法中被调用的
/** * a dep is an observable that can have multiple * directives subscribing to it. */ var dep = function dep () { this.id = uid++; this.subs = []; };
//设置某个watcher的依赖
//这里添加dep.target,用来判断是不是watcher的构造函数调用
//也就是其this.get调用 dep.prototype.depend = function depend () { if (dep.target) { dep.target.adddep(this); } }; //在该方法中会触发subs的update方法 dep.prototype.notify = function notify () { // stabilize the subscriber list first var subs = this.subs.slice(); if (!config.async) { // subs aren't sorted in scheduler if not running async // we need to sort them now to make sure they fire in correct // order subs.sort(function (a, b) { return a.id - b.id; }); } for (var i = 0, l = subs.length; i < l; i++) { subs[i].update(); } };
3、watch
初始化watch,函数中会调用createwatcher,createwatcher会调用$watch,$watch调用new watcher实例。
function initwatch (vm, watch) { for (var key in watch) { var handler = watch[key]; if (array.isarray(handler)) { for (var i = 0; i < handler.length; i++) { createwatcher(vm, key, handler[i]); } } else { createwatcher(vm, key, handler); } } } function createwatcher ( vm, exporfn, handler, options ) { if (isplainobject(handler)) { options = handler; handler = handler.handler; } if (typeof handler === 'string') { handler = vm[handler]; } return vm.$watch(exporfn, handler, options) } vue.prototype.$watch = function ( exporfn, cb, options ) { var vm = this; if (isplainobject(cb)) { return createwatcher(vm, exporfn, cb, options) } options = options || {}; options.user = true; var watcher = new watcher(vm, exporfn, cb, options); if (options.immediate) { try { cb.call(vm, watcher.value); } catch (error) { handleerror(error, vm, ("callback for immediate watcher \"" + (watcher.expression) + "\"")); } } return function unwatchfn () { watcher.teardown(); } }; }
2、computed
初始化computed,调用new watcher(),并通过definecomputed函数将计算属性挂载到vue实例上,使计算属性可以在模板中使用
var computedwatcheroptions = { lazy: true }
function initcomputed (vm, computed) { // $flow-disable-line var watchers = vm._computedwatchers = object.create(null); // computed properties are just getters during ssr var isssr = isserverrendering(); for (var key in computed) { var userdef = computed[key]; var getter = typeof userdef === 'function' ? userdef : userdef.get;
//getter也就是computed的函数 if (getter == null) { warn( ("getter is missing for computed property \"" + key + "\"."), vm ); } if (!isssr) { // create internal watcher for the computed property. watchers[key] = new watcher( vm, getter || noop, noop, computedwatcheroptions ); } //组件定义的计算属性已在 //组件原型。我们只需要定义定义的计算属性 //在这里实例化。 if (!(key in vm)) { definecomputed(vm, key, userdef); } else { if (key in vm.$data) { warn(("the computed property \"" + key + "\" is already defined in data."), vm); } else if (vm.$options.props && key in vm.$options.props) { warn(("the computed property \"" + key + "\" is already defined as a prop."), vm); } } } }
function definecomputed (
target,
key,
userdef
) {
var shouldcache = !isserverrendering();//true
if (typeof userdef === 'function') {
sharedpropertydefinition.get = shouldcache
? createcomputedgetter(key)
: creategetterinvoker(userdef);
sharedpropertydefinition.set = noop;
} else {
sharedpropertydefinition.get = userdef.get
? shouldcache && userdef.cache !== false
? createcomputedgetter(key)
: creategetterinvoker(userdef.get)
: noop;
sharedpropertydefinition.set = userdef.set || noop;
}
if (sharedpropertydefinition.set === noop) {
sharedpropertydefinition.set = function () {
warn(
("computed property \"" + key + "\" was assigned to but it has no setter."),
this
);
};
}
object.defineproperty(target, key, sharedpropertydefinition);
}
//computed的getter函数,在模板获取对应computed数据时会调用
function createcomputedgetter (key) {
return function computedgetter () {
var watcher = this._computedwatchers && this._computedwatchers[key];
if (watcher) {
if (watcher.dirty) {//true
watcher.evaluate();//该方法会调用watcher.get方法,也就是computed对应的函数
}
if (dep.target) {
watcher.depend();
}
return watcher.value
}
}
}
通过以上代码可以看到watch和computed都是通过new watcher实例实现数据的监听的,但是computed的options中lazy为true,这个参数导致它们走的是两条不同路线。
computed:模板获取数据时,触发其getter函数,最终调用watcher.get,也就是调用对应回调函数。
watch:模板获取数据时,触发其getter函数,将watcher添加到对应的dep.subs中,在之后setter被调用时,dep.notify通知所有watcher进行update,最终调用watcher.cb,也就是调用对应回调函数。
3、watcher
构造函数在是watch时,会最后调用this.get,会触发属性的getter函数,将该watcher添加到dep的subs中,用于通知数据变动时调用。
调用watcher实例的update方法会触发其run方法,run方法中会调用触发函数。其depend方法会调用new dep的depend方法,dep的depend会调用watcher的adddep方法,最终会把该watcher实例添加到dep的subs属性中
/** *观察者解析表达式,收集依赖项, *并在表达式值更改时激发回调。 *这用于$watch()api和指令。 */ var watcher = function watcher ( vm, exporfn, cb, options, isrenderwatcher ) { this.vm = vm; ...... this.cb = cb;//触发函数 this.id = ++uid$2; // uid for batching this.active = true; this.dirty = this.lazy; // for lazy watchers ...... this.value = this.lazy ? undefined ? this.get();//computed会返回undefined,而watch会执行watcher.get }; /** * scheduler job interface. * will be called by the scheduler. * 该方法会执行触发函数 */ watcher.prototype.run = function run () { if (this.active) { var value = this.get(); if ( value !== this.value || // deep watchers and watchers on object/arrays should fire even // when the value is the same, because the value may // have mutated. isobject(value) || this.deep ) { // set new value var oldvalue = this.value; this.value = value; if (this.user) { try { this.cb.call(this.vm, value, oldvalue); } catch (e) { handleerror(e, this.vm, ("callback for watcher \"" + (this.expression) + "\"")); } } else { this.cb.call(this.vm, value, oldvalue); } } } }; /** * evaluate the getter, and re-collect dependencies. */ 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 }; /** * subscriber interface. * will be called when a dependency changes. * 在方法中调用watcher的run方法 */ watcher.prototype.update = function update () { /* istanbul ignore else */ if (this.lazy) { this.dirty = true; } else if (this.sync) { this.run(); } else { queuewatcher(this);//该方法最终也会调用run方法 } }; /** * depend on all deps collected by this watcher.会调用new dep的depend方法,dep的depend会调用watcher的adddep方法 */ watcher.prototype.depend = function depend () { var i = this.deps.length; while (i--) { this.deps[i].depend(); } }; /** * add a dependency to this directive. */ watcher.prototype.adddep = function adddep (dep) { var id = dep.id; if (!this.newdepids.has(id)) { this.newdepids.add(id); this.newdeps.push(dep); if (!this.depids.has(id)) { dep.addsub(this); } } };