observe工厂函数
在之前的源码initdata函数中最后一句
observe(data, true /* asRootData */)复制代码
调用了observe函数观察数据
export function observe (value: any, asRootData: ?boolean): Observer | void {
if (!isObject(value) || value instanceof VNode) {
return //判断是否是一个对象或者VNode
}
let ob: Observer | void //定义变量ob 保存observe实例
if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
ob = value.__ob__ //检测目标对象是否含有_ob_,并且 __ob__ 属性应该是Observer的实例 作用是为了避免重复观察同一个数据对象
} 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
}复制代码
看下else..if..第一个条件shouldObserve 必须为true
export let shouldObserve: boolean = true //初始化默认设置为true
export function toggleObserving (value: boolean) {
// 接收一个布尔值 改变true false shouldObserve = value}复制代码
第二个条件!isServerRendering()
必须ture
let _isServer //定义一个变量
export const isServerRendering = () => {
if (_isServer === undefined) {
/* istanbul ignore if */
if (!inBrowser && !inWeex && typeof global !== 'undefined') {
// detect presence of vue-server-renderer and avoid
// Webpack shimming the process
_isServer = global['process'] && global['process'].env.VUE_ENV === 'server'
} else {
_isServer = false
}
} return _isServer}复制代码
这个函数作用是为了判断是否为服务端渲染
第三个条件判断是否为数组和纯对象
第四个判断对象是可拓展性的...接下来就不说了 相信应该能看懂
ob = new Observer(value)复制代码
最后创建一个observer实例
observe构造函数
export class Observer
{
value: any;
dep: Dep;
vmCount: number; // number of vms that have this object as root $data
constructor (value: any) {
this.value = value //属性引用了数据对象
this.dep = new Dep() //保存了一个新创建的 Dep 实例对象
this.vmCount = 0 //实例属性设置为0
def(value, '__ob__', this) //为数据对象定义了一个 __ob__ 属性,这个属性的值就是当前 Observer 实例对象,
其中 def 函数其实就是 Object.defineProperty 函数的简单封装,
之所以这里使用 def 函数定义 __ob__ 属性是因为这样可以定义不可枚举的属性,
这样后面遍历数据对象的时候就能够防止遍历到 __ob__ 属性
if (Array.isArray(value)) {
//判断是否为数组
if (hasProto) {
protoAugment(value, arrayMethods)
} else {
copyAugment(value, arrayMethods, arrayKeys)
} this.observeArray(value)
} else {
//纯对象的情况 this.walk(value)
}
}
/** * Walk through all properties and convert them into
* getter/setters. This method should only be called when * value type is Object. */
walk (obj: Object) {
const keys = Object.keys(obj)
for (let i = 0; i < keys.length; i++) {
defineReactive(obj, keys[i])
}
}
/** * Observe a list of Array items. */
observeArray (items: Array) {
for (let i = 0, l = items.length; i < l; i++) {
observe(items[i])
}
}
}
复制代码
walk 实例对象方法遍历了变量获得了可枚举的属性,
每个属性调用了defineReactive函数:
export function defineReactive (
obj: Object,
key: string,
val: any,
customSetter?: ?Function, shallow?: boolean) {
const dep = new Dep() //定义一个dep常量接收Dep实例对象
//getOwnPropertyDescriptor方法返回指定对象上一个自有属性对应的属性描述
const property = Object.getOwnPropertyDescriptor(obj, key)
if (property && property.configurable === false) {
return //判断是否可配置
}
// cater for pre-defined getter/setters
const getter = property && property.get
//保存 property 对象的 get 和 set函数
const setter = property && property.set
if ((!getter || setter) && arguments.length === 2) {
val = obj[key]//当只传递两个参数时,说明没有传递第三个参数 val,
那么此时需要根据 key 主动去对象上获取相应的值,即执行 if 语句块内的代码:val = obj[key]
}
let childOb = !shallow && observe(val)
Object.defineProperty(obj, key, {
//函数重新定义属性的 setter/getter,这会导致属性原有的 set 和 get 方法被覆盖,
所以要将属性原有的 setter/getter 缓存,并在重新定义的 set 和 get 方法中调用缓存的函数,
从而做到不影响属性的原有读写操作。
enumerable: true,
configurable: true,
get: function reactiveGetter () {
const value = getter ? getter.call(obj) : val
//判断是否存在getter?直接调用该函数:使用val
if (Dep.target) {
//Dep.target 中保存的值就是要被收集的依赖(观察者)
dep.depend()
//行 dep 对象的 depend 方法将依赖收集到 dep中
if (childOb) {
//大概意思是收集的依赖的触发时机是在使用 $set 或 Vue.set 给数据对象添加新属性时触发
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 //新旧值判断处理 后面判断应该是为了处理NaN
} /* eslint-enable no-self-compare */
if (process.env.NODE_ENV !== 'production' && customSetter) {
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()//深度观测 依赖收集
}
})
}复制代码
接收五个参数,但是在 defineReactive
函数的核心就是 将数据对象的数据属性转换为访问器属性,即为数据对象的属性设置一对 getter/setter
,但其中做了很多处理边界条件的工作defineReactivewalk
方法中调用 defineReactive
函数时只传递了前两个参数,即数据对象和属性的键名