前端面试宝典---vue原理

vue的Observer简化版

class Observer {constructor(value) {if (!value || typeof value !== 'object') returnthis.walk(value) // 对对象的所有属性进行遍历并定义响应式}walk (obj) {Object.keys(obj).forEach(key => defineReactive(obj, key, obj[key]))}
}
// 定义核心方法 defineReactive
function defineReactive (target, key, value) {new Observer(value) // 如果值还是对象，则继续对其子属性进行观察Object.defineProperty(target, key, {enumerable: true,configurable: true,get: function reactiveGetter () {return value},set: function reactiveSetter (newVal) {if (newVal === value) returnvalue = newValnew Observer(value) // 新值如果是对象，也需要对其进行观察}})
}let observer = {name: 'observer',age: 18,tempObj: {n: 1,m: 2}
}new Observer(observer)console.dir(observer)