vue数据初始化initState的实例详解

 function initState(vm) { vm._watchers = []; var opts = vm.$options; if(opts.props) { initProps(vm, opts.props); //初始化props } if(opts.methods) { initMethods(vm, opts.methods); //初始化methods } if(opts.data) { initData(vm); //初始化data } else { observe(vm._data = {}, true /* asRootData */ ); } if(opts.computed) { initComputed(vm, opts.computed); //初始化computed } if(opts.watch && opts.watch !== nativeWatch) { initWatch(vm, opts.watch); //初始化watch } }

 function initComputed(vm, computed) { var watchers = vm._computedWatchers = Object.create(null); for(var key in computed) { var userDef = computed[key]; var getter = typeof userDef === 'function' ? userDef : userDef.get; //创建一个计算属性 watcher watchers[key] = new Watcher( vm, getter || noop, noop, computedWatcherOptions ); if(!(key in vm)) { //如果定义的计算属性不在组件实例上，对属性进行数据劫持 //defineComputed 很重要，下面我们再说 defineComputed(vm, key, userDef); } else { //如果定义的计算属性在data和props有，抛出警告 } } }

 function initWatch(vm, watch) { //遍历watch，为每一个属性创建侦听器 for(var key in watch) { var handler = watch[key]; //如果属性值是一个数组，则遍历数组，为属性创建多个侦听器 //createWatcher函数中封装了vm.$watch，会在vm.$watch中创建侦听器 if(Array.isArray(handler)) { for(var i = 0; i 

 function defineComputed(target, key, userDef) { //是不是服务端渲染 var shouldCache = !isServerRendering(); //如果我们把计算属性的值写成一个函数，这时函数默认为计算属性的get if(typeof userDef === 'function') { sharedPropertyDefinition.get = shouldCache ? //如果不是服务端渲染，则默认使用缓存，设置get为createComputedGetter创建的缓存函数 createComputedGetter(key) : //否则不使用缓存，直接设置get为userDef这个我们定义的函数 userDef; //设置set为空函数 sharedPropertyDefinition.set = noop; } else { //如果我们把计算属性的值写成一个对象，对象中可能包含set、get和cache三个字段 sharedPropertyDefinition.get = userDef.get ? shouldCache && userDef.cache !== false ? //如果我们传入了get字段，且不是服务端渲染，且cache不为false，设置get为createComputedGetter创建的缓存函数 createComputedGetter(key) : //如果我们传入了get字段，但是是服务端渲染或者cache设为了false，设置get为userDef这个我们定义的函数 userDef.get : //如果没有传入get字段，设置get为空函数 noop; //设置set为我们传入的传入set字段或空函数 sharedPropertyDefinition.set = userDef.set ? userDef.set : noop; } //虽然这里可以get、set都可以设置为空函数 //但是在项目中，get为空函数对数据取值会报错，set为空函数对数据赋值会报错 //而computed主要作用就是计算取值的，所以get字段是必须的 //数据劫持 Object.defineProperty(target, key, sharedPropertyDefinition); }

 function createComputedGetter(key) { return function computedGetter() { var watcher = this._computedWatchers && this._computedWatchers[key]; if(watcher) { if(watcher.dirty) { //watcher.evaluate中更新watcher的值，并把watcher.dirty设置为false //这样等下次依赖更新的时候才会把watcher.dirty设置为true，然后进行取值的时候才会再次运行这个函数 watcher.evaluate(); } //依赖追踪 if(Dep.target) { watcher.depend(); } //返回watcher的值 return watcher.value } } } //对于计算属性，当取值计算属性时，发现计算属性的watcher的dirty是true //说明数据不是最新的了，需要重新计算，这里就是重新计算计算属性的值。 Watcher.prototype.evaluate = function evaluate() { this.value = this.get(); this.dirty = false; }; //当一个依赖改变的时候，通知它update Watcher.prototype.update = function update() { //三种watcher，只有计算属性 watcher的lazy设置了true，表示启用惰性求值 if(this.lazy) { this.dirty = true; } else if(this.sync) { //标记为同步计算的直接运行run，三大类型暂无，所以基本会走下面的queueWatcher this.run(); } else { //将watcher推入观察者队列中，下一个tick时调用。 //也就是数据变化不是立即就去更新的，而是异步批量去更新的 queueWatcher(this); } };