当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用把这些属性全部转为 。Object.defineProperty 是 ES5 中一个无法 shim 的特性,这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器
以上摘自 深入响应式原理
那么,把这些属性全部转为 getter/setter 具体是怎样一个过程呢?本文不深入具体,简单大致了解其过程,旨在整体把握,理解其主要思路
假设代码如下:
const vm = new Vue({ el: '#app', data: { msg: 'hello world' } })
选项可以接收一个对象或者方法,这里以对象为例(其实最后都会转为对象)
首先,这个对象的所有键值对都会被挂载在 vm._data 上(此外 vm._data 对象上还有个 __ob__ key,暂时可以忽视),这样我们便能用 vm._data.msg 访问到数据
但是通常我们是用 vm.msg 这样访问数据,如何做到的呢?其实就是做了个代理,将 data 键值对中的 vm[key] 的访问都代理到 vm._data[key] 上
proxy(vm, `_data`, key) 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) }
通常 vm._data (下划线变量)用作内部程序,对外暴露的 API 是 ,其实这两者也是一个东西,也是做了个代理,代码大概这样:
const dataDef = {} dataDef.get = function () { return this._data } Object.defineProperty(Vue.prototype, '$data', dataDef) if (process.env.NODE_ENV !== 'production') { dataDef.set = function () { warn( 'Avoid replacing instance root $data. ' + 'Use nested data properties instead.', this ) } }
简单理解就是访问 vm.data.msg 其实就是访问 vm._data.msg。如果直接在开发环境对 vm.data = xxx这样的赋值,而不是vm.$data.msg = xxx` 这样的赋值,后者是没问题的)
至此,我们理解了为什么能用 vm.msg、vm._data.msg 以及 vm.$data.msg 三种方式获取/改变数据,最原始的数据是 vm._data.msg,而另外两者即代理了 _data 的数据,vm.$data.msg 即为 Vue 向外提供的 API,一般情况下开发我们直接用 vm.msg 这样比较多,也方便,如果要获取整个 data,程序中需要用 this.$data,而不是 this.data
接下来说 getter/setter
将 demo 稍微添点东西:
const vm = new Vue({ el: '#app', data: { msg: 'hello world' }, computed: { msg2() { return this.msg + '123' } } })
msg2 是依赖于 msg 的,当 msg 改变的时候,msg2 的值需要自动更新,msg 的改变可以在 vm._data.msg 的 setter 中监听到,但是怎么知道 msg2 是依赖于 msg 的呢?
直观地我们可以想到,遍历所有 computed 对象的键值对,然后进行分析,理论上似乎可行,但是我寻思着这可能需要解析 AST 啊,或者正则去匹配,看看是否用到了 this.msg,也可能是 this.$data.msg 啊,还可能是 this._data.msg,而且还要遍历 data 中的所有 key,这看起来也太麻烦了吧,而且,如果程序中没有用到 msg2,那不是多此一举了?
事实上,Vue 初始化的时候会对 vm._data 的每个键值对设置 getter/setter,大概代码如下:
// obj 即为 vm._data const keys = Object.keys(obj) for (let i = 0; i < keys.length; i++) { defineReactive(obj, keys[i]) } Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: function reactiveGetter () { const 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) { const 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 (process.env.NODE_ENV !== 'production' && 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() } })
Vue 响应式核心就是,setter 的时候会收集依赖,getter 的时候会触发依赖更新
我们还是以上面的 computed msg2 为例,当我们第一次去取值 msg2 时(注意,必须是取值行为,可以是在 template,也可以是程序中),势必需要去取值 this.msg,这就会触发 msg 的 getter,此时我们就可以确定 msg2 依赖于 msg
msg 可以被哪些东西依赖呢?目前看来有三
template 模版中
computed
watch
我们可以打印 vm._watchers 查看,是一个 Watcher 实例数组,直接看实例的 expression 值,其实就是触发这个表达式的时候,会触发 msg 的 getter