vue对象数据响应式原理,通过observe()查看对象上是否有__ob__属性,没有 就实例化Observer类,在该类中通过调用walk函数遍历对象属性,逐个执行defineReactive函数,在该函数,当设置新值时,setter(newVal)函数中的newVal也要调用observe()

utils.js 工具函数,不遍历__ob__属性

export const def = (obj,key,value,enumerable)=>{
Object.defineProperty(obj,key,{
value,
enumerable, //是否可遍历
writable:true,configurable:true// 可改写,可删除
}}

Observer.js 将一个正常对象转换为每层都是响应式的(是否存在__ob__)

import { def } from 'utils.js';
import defineReactive from 'defineReactive.js'
export default class Observer {
constructor(value){
def(value,'__ob__',this,false)// 不希望遍历到__ob__属性
// this 表示Observer类的实例
this.walk(value) // 调用遍历函数
}
walk(value){
for(let key in value){
defineReactive(value,key)
}
}
}

observe.js 判断对象是否存在__ob__,不存在则返回ob:Observer的实例

import Observer from 'Observer.js'
export const observe =(value)=>{
if(typeof value.__ob__ !=='undefined'){
   ob = value.__ob__
}
else{
   ob = new Observer(value) // value上不存在__ob__,则存Observer实例
}
return ob
}

defineReactive.js 递归侦测,包括setter函数中设定的新值

import {observe} from 'observe.js'
const defineReactive =(data,key,val)=>{
if(arguments.length ===2){
val = data[key] // 这里val是子对象了
}
let childOb = observe(val) // 侦测子对象 ,这里实现了对子对象递归
Object.defineProperty(data,key,{
enumerable:true,configurable:true,
get(){
// 收集依赖
},
ser(newVal){
if(val===newValue) return // 如果设置的新值与val相同,return;
childOb = observe(newVal) // 否则也要侦测设置的这个新值,添加响应式
}
})

}

爬。