/**
* 在object上定义一个响应式的属性
*/
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
}
// 满足预定义的 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()
}
// #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()
}
})
}
概述
这个方法,就是把对象obj
里的属性key
变成一个getter/setter形式的响应式的属性。同时在getter的时候收集依赖,并在setter的时候触发依赖。
相关内容
const dep = new Dep()
这条语句,是初始化了一个依赖的实例,用来把用到该属性的依赖都放在这里面。
const property = Object.getOwnPropertyDescriptor(obj, key)
if (property && property.configurable === false) {
return
}
这部分代码,是通过getOwnPropertyDescriptor()
方法来判断该属性key
是否是自有属性,getOwnPropertyDescriptor()
方法返回该属性的属性描述property descriptor
,通过configurable判断该属性能否修改,不能修改就返回
// 满足预定义的 getter/setters
const getter = property && property.get
const setter = property && property.set
if ((!getter || setter) && arguments.length === 2) {
val = obj[key]
}
这部分代码,承接上面的,如果该属性是自有属性,getter/setter,如果没有getter有setter,而且只传了2个参数,那就给val赋值一下。
let childOb = !shallow && observe(val)
这部分的代码,是函数中的val很有可能会是一个数组,通过上一篇的observe
方法,就可以拿到数组的Observer实例(childOb),最后可以通过childOb的dep执行depend方法来收集依赖。
- 下面的
Object.defineProperty()
方法,是Vue2.x里响应式的核心,把属性变成了getter和setter的形式, - get 方法
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
},
get方法就是把该属性的值返回去,同时收集依赖,记录哪些地方用到了该属性。
因为该属性的值有可能是数组,所以判断,如果childOb存在,那就把通过childOb.dep.depend()来收集依赖。同时使用dependArray,来递归的收集数组子元素的依赖
/**
* 因为我们不能像拦截器那样获取属性的getter,
* 所以通过该方法,在数组被访问的时候收集依赖
*/
function dependArray (value: Array<any>) {
for (let e, i = 0, l = value.length; i < l; i++) {
e = value[i]
e && e.__ob__ && e.__ob__.dep.depend()
if (Array.isArray(e)) {
dependArray(e)
}
}
}
- set方法
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()
}
set方法,就是把新的值newVal,赋值给旧的val,如果有以前的setter,就用以前的setter,如果没有setter,就返回。
最后新的值添加__ob__
属性,然后触发该属性的依赖,通知他们去变更