vue数据监听原理
用简单代码模拟vue数据监听原理
// 核心数据响应式方法 function defineReactive(obj,key,val){ // val可能还是个对象,需要递归一下 objserve(val) Object.defineProperty(obj,key,{ get(){ return val }, set(newVal){ if(newVal !== val){ val = newVal // 如果改变的是个对象,还需要调用一下 objserve(newVal) console.log('set', newVal); // 在这里已经监听到了数据的变化,后续可以做一些更新视图的操作 } } }) } // 如果一个对象有多个属性,循环调用defineReactive,传入每一个值去进行监听 function objserve(obj){ // 判断obj类型 if(Object.prototype.toString.call(obj)!=="[object Object]"){ return } Object.keys(obj).forEach(key =>defineReactive(obj,key,obj[key])) } // 如果给对象增加新的属性,是监听不到变化的,那么需要用set方法传入新对象,调用defineReactive手动监听一下 function set(obj,key,val){ defineReactive(obj,key,val) } const obj = {foo:'foo',baz:{a:1}}; objserve(obj) obj.foo = '2222' obj.baz.a = '3333' obj.baz = {a:10} obj.baz.a = 100 set(obj,"dong",'dong') obj.dong = "dong1"