当前位置: 首页 > Web前端 > vue.js

理解Vue的响应式原理(一)——监控对象

时间:2023-04-01 01:04:43 vue.js

源码如下://1.第一步是使用Object.defineProperty()在跟踪中包含数据letdefineReactive=function(data){if(!data||typeofdata!='object')returnObject.keys(data).forEach(key=>{letvalue=data[key]defineReactive(value)//如果value还是一个对象,继续在对象上递归使用defineReactive方法实现深度绑定Object.defineProperty(data,key,{//使用该方法监听对象属性的变化enumerable:true,configurable:true,get:function(){console.log(value,'getmethod')returnvalue},set:function(newValue){console.log(value,'setmethod')如果(值===newValue)返回值=newValue}})})}letobj={a:3,b:5,c:{c1:7}}defineReactive(obj)//console.log(obj.a);console.log(obj.c.c1)//返回值为7,调用“get方法”前输出7//obj.a=30obj.c.c1=70//输出7“set方法”//控制台日志(obj.a);console.log(obj.c.c1)//返回值为70,在调用“get方法”前输出70,可以看到在修改或调用obj对象的属性时,已经监听到对应的操作输出提示信息至此我们完成了Object的监听,使用递归的方式,在其属性值仍然是一个对象的情况下继续进行更深层次的监听。核心是使用Object.defineProperty来监听对象属性的获取和修改。