实现vue响应式,归纳起来,vuejs主要做了以下三件事情:
1、通过Observer对data进行监听,并且提供了订阅某个数据项变化的能力。
2、把template编译成一段document fragment,然后解析其中的指令,得到每一个指令所依赖的数据项和update方法。
3、通过Watcher把上述两部分结合起来,就是把指令中的数据依赖通过Watcher订阅在对应数据的Observer的Dep上。当数据发生变化时,就会触发Observer的Dep上的notify方法通知对应的Watcher的update,进而触发指令的update方法来更新DOM视图,最后让数据和模型关联起来。
Vue实例创建的过程会有一个生命周期,其中一个过程就是调用vm.initData方法处理data选项,initData方法源码如下:
function initData (vm: Component) {
let data = vm.$options.data
data = vm._data = typeof data === 'function'
? getData(data, vm)
: data || {}
if (!isPlainObject(data)) {
data = {}
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)
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)) {
warn(
`Method "${key}" has already been defined as a data property.`,
vm
)
}
}
if (props && hasOwn(props, 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 */)
}
在initData中需要特别注意一下proxy方法,它的功能就是遍历data的key,把data上的属性代理到vm实例上。prox方法源码如下:
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方法主要通过Object.defineProperty的getter和setter方法实现了代理。也就是说当我们调用vm.data的时候实际上是调用了vm.data.data。其中sharePropertyDefinition常量就是getter和setter的配置如下:
const sharedPropertyDefinition = {
enumerable: true,
configurable: true,
get: noop,
set: noop
}
在initData最后调用了observe(data,true)方法来对data做监听,observe方法定义如下:
export function observe (value: any, asRootData: ?boolean): Observer | void {
if (!isObject(value) || value instanceof VNode) {
return
}
let ob: Observer | void
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++
}
return ob
}
observe方法首先判断value是否已经添加了ob属性,它是一个Observer对象的实例。如果已经添加了就直接用,否则当value满足(数组或对象、可扩展、非vue组件等)的情况下创建一个Observer对象。看一下Observer这个类:
export class Observer {
value: any;
dep: Dep;
vmCount: number; // number of vms that has this object as root $data
constructor (value: any) {
this.value = value
this.dep = new Dep()
this.vmCount = 0
def(value, '__ob__', this)
if (Array.isArray(value)) {
const augment = hasProto
? protoAugment
: copyAugment
augment(value, arrayMethods, arrayKeys)
this.observeArray(value)
} else {
this.walk(value)
}
}
Observer类的构造函数主要做了这么几件事,首先创建了一个Dep对象,然后把自身this添加到value的ob属性上。最后对value进行类型判断,如果是数组就观察数组,否则观察单个元素。其实observeArray方法就是对数组进行遍历,递归调用observe方法,最终都会调用walk方法观察单个元素。下面看walk代码的源码:
walk (obj: Object) {
const keys = Object.keys(obj)
for (let i = 0; i < keys.length; i++) {
defineReactive(obj, keys[i])
}
}
walk方法是对obj的key进行遍历依次调用defineReactive方法,对obj的属性进行转换,让他们拥有getter、setter方法。只有当obj是一个对象的时候才会调用这个方法。这样一旦属性被访问或更新,我们就可以追踪到这些变化。接下来看defineReactive方法的源码:
export function defineReactive (
obj: Object,
key: string,
val: any,
customSetter?: ?Function,
shallow?: boolean
) {
const dep = new Dep()
const property = Object.getOwnPropertyDescriptor(obj, key)
if (property && property.configurable === false) {
return
}
// cater for pre-defined getter/setters
const getter = property && property.get
const setter = property && property.set
if ((!getter || setter) && arguments.length === 2) {
val = obj[key]
}
let childOb = !shallow && observe(val)
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()
}
if (setter) {
setter.call(obj, newVal)
} else {
val = newVal
}
childOb = !shallow && observe(newVal)
dep.notify()
}
})
}
defineReactive方法最核心的部分就是通过调用Object.defineProperty给data的每个属性添加getter和setter方法。当data某个属性被访问时,则回调用getter方法,判断当Dep.target不为空时调用dep.depend和childOb.dep.depend方法做依赖收集。如果访问的属性是一个数组,则会遍历这个数组收集数组元素的依赖。当改变data的属性时,则会调用setter方法,这时调用dep.notify方法通知。这里我们说的dep,他是Dep的实例。接下来看一下Dep类的源码:
export default class Dep {
static target: ?Watcher;
id: number;
subs: Array<Watcher>;
constructor () {
this.id = uid++
this.subs = []
}
addSub (sub: Watcher) {
this.subs.push(sub)
}
removeSub (sub: Watcher) {
remove(this.subs, sub)
}
depend () {
if (Dep.target) {
Dep.target.addDep(this)
}
}
notify () {
// stabilize the subscriber list first
const subs = this.subs.slice()
for (let i = 0, l = subs.length; i < l; i++) {
subs[i].update()
}
}
}
// the current target watcher being evaluated.
// this is globally unique because there could be only one
// watcher being evaluated at any time.
Dep.target = null
Dep类是一个简答的观察者模式的实现。他的构造函数非常简单初始化了id和subs。其中subs用来存储所有订阅它的Watcher。Dep.target表示当前正在计算的的Watcher,它是全局唯一的,因为同一时间只能有一个Watcher被计算。
前面提到了在getter和setter方法调用时会分别调用dep.depend方法和dep.notify方法,接下里看下这两个方法(见上图)
depend方法很简单,它通过Dep.target.addDep(this)方法把当前Dep的实例添加到当前正在计算的Watcher的依赖中。
notify方法也很简单,它遍历了所有的订阅的Watcher,调用他们的update方法。
到此vm实例中给data对象添加Observer的过程就结束了。