哈尔滨网站建设2017/视频优化软件

首先明确，vue2是如何实现响应式的？
通过object.defineProperty+观察者模式实现，在创建vue实例的过程中，也就是介于beforecomputed~computed的过程中，会执行如下函数initState

export function initState (vm: Component) {vm._watchers = []const opts = vm.$optionsif (opts.props) initProps(vm, opts.props)if (opts.methods) initMethods(vm, opts.methods)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)}
}

在initState中，initData做了两件事：
1.将data中的属性都挂载到vm上去，方便后面以this.xx访问data里的变量
2.则是通过observe函数对定义的data对象进行数据劫持，在observe的过程中，会判断属性是对象还是数组，
如果是对象：将对象的每个属性添加getter，setter函数，每个属性都拥有自己的一个dep实例对象（dep实例对象相当于是被观察者的一个筐，里面装了有哪些watcher在观察它）；在getter方法里，会收集依赖，也就是存储watcher实例，同时watcher实例也会存储dep实例；在setter方法里，会通知这些watcher实例来更新依赖。
如果是数组：数组的话是通过增强数组七个方法的原型方法，当访问数组上面那七个方法的时候会被拦截，以此来实现响应式。

这时候你可能会问，那get方法是如何被触发的呢？
如果要触发get方法，那么说明有地方在访问这个属性，有哪些地方会访问属性并要对之做出改变呢？
答案是computed、watcher、template；
1.在初始化computed的时候，会对每一个computed属性生成一个watcher，并且会传一个参数lazy：true，表明这个watcher是惰性的；
2.在初始化watch的时候，和computed类似，只是没有传lazy参数
3.在编译模版的时候，会生成render函数，render函数执行的时候会去获取变量值，获取变量值的时候就会触发get，收集依赖。

这就对应了三个watcher，computed watcher；普通watcher；render watcher。