Vue区别于传统的JS库，例如JQuery，其中一个最大的特点就是不用手动去操作DOM，只需要对数据进行变更之后，视图也会随之更新。 比如你想修改div#app里的内容:
/// JQuery <div></div> <script> $('#app').text('lxb') </script>
<template> <div>{{ message }}</div> <button @click="change">点击修改message</button> </template> <script> export default { data () { return { message: 'lxb' } }, methods: { change () { this.message = 'lxb1' // 触发视图更新 } } } </script>
在代码层面上的最大区别就是，JQuery直接对DOM进行了操作，而Vue则对数据进行了操作，接下来我们通过分析源码来进一步分析，Vue是如何做到数据驱动的，而数据驱动主要分成两个部分依赖收集和派发更新。
数据驱动
// _init方法中 initLifecycle(vm) initEvents(vm) initRender(vm) callHook(vm, 'beforeCreate') initInjections(vm) // resolve injections before data/props initState(vm) // 重点分析 initProvide(vm) // resolve provide after data/props callHook(vm, 'created')
在Vue初始化会执行_init方法，并调用initState方法. initState相关代码在src/core/instance/state.js下
export function initState (vm: Component) { vm._watchers = [] const opts = vm.$options if (opts.props) initProps(vm, opts.props) // 初始化Props if (opts.methods) initMethods(vm, opts.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) { // 初始化watch initWatch(vm, opts.watch) } }
我们具体看看initData是如何定义的。
function initData (vm: Component) { let data = vm.$options.data data = vm._data = typeof data === 'function' // 把data挂载到了vm._data上 ? getData(data, vm) // 执行 data.call(vm) : data || {} if (!isPlainObject(data)) { data = {} // 这也是为什么 data函数需要返回一个object不然就会报这个警告 process.env.NODE_ENV !== 'production' && warn( 'data functions should return an object:\n' + 'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function', vm ) } // proxy data on instance const keys = Object.keys(data) // 取到data中所有的key值所组成的数组 const props = vm.$options.props const methods = vm.$options.methods let i = keys.length while (i--) { const key = keys[i] if (process.env.NODE_ENV !== 'production') { if (methods && hasOwn(methods, key)) { // 避免方法名与data的key重复 warn( `Method "${key}" has already been defined as a data property.`, vm ) } } if (props && hasOwn(props, key)) { // 避免props的key与data的key重复 process.env.NODE_ENV !== 'production' && warn( `The data property "${key}" is already declared as a prop. ` + `Use prop default value instead.`, vm ) } else if (!isReserved(key)) { // 判断是不是保留字段 proxy(vm, `_data`, key) // 代理 } } // observe data observe(data, true /* asRootData */) // 响应式处理 }
其中有两个重要的函数分别是proxy跟observe，在往下阅读之前，如果还有不明白Object.defineProperty作用的同学，可以点击这里进行了解，依赖收集跟派发更新都需要依靠这个函数进行实现。
proxy
proxy分别传入vm,'_data',data中的key值,定义如下:
const sharedPropertyDefinition = { enumerable: true, configurable: true, get: noop, set: noop } export function proxy (target: Object, sourceKey: string, key: string) { sharedPropertyDefinition.get = function proxyGetter () { return this[sourceKey][key] } sharedPropertyDefinition.set = function proxySetter (val) { this[sourceKey][key] = val } Object.defineProperty(target, key, sharedPropertyDefinition) }
proxy函数的逻辑很简单，就是对vm._data上的数据进行代理，vm._data上保存的就是data数据。通过代理的之后我们就可以直接通过this.xxx访问到data上的数据，实际上访问的就是this._data.xxx。
observe
oberse定义在src/core/oberse/index.js下,关于数据驱动的文件都存放在src/core/observe这个目录中:
export function observe (value: any, asRootData: ?boolean): Observer | void { if (!isObject(value) || value instanceof VNode) { // 判断是否是对象或者是VNode return } let ob: Observer | void // 是否拥有__ob__属性 有的话证明已经监听过了，直接返回该属性 if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) { ob = value.__ob__ } else if ( shouldObserve && // 能否被观察 !isServerRendering() && // 是否是服务端渲染 (Array.isArray(value) || isPlainObject(value)) && // 是否是数组、对象、能否被扩展、是否是Vue函数 Object.isExtensible(value) && !value._isVue ) { ob = new Observer(value) // 对value进行观察 } if (asRootData && ob) { ob.vmCount++ } return ob }
observe函数会对传入的value进行判断,在我们初始化过程会走到new Observer(value)，其他情况可以看上面的注释。
Observer类