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

object对象和Array数组的变化检测(响应式原理)

时间:2023-03-31 17:50:02 vue.js

变化检测,顾名思义就是检测数据变化,响应数据更新。分为两种:一种是push,一种是pull;Angular和React的变更检测都是“拉”的。也就是说,当状态发生变化时,它并不知道哪个状态发生了变化,所以它向框架发送信号,框架通过暴力检测DOM来更新状态。这也是Angular脏检查的原理,也是React使用虚拟DOM的原理。而Vue.js采用的是“push”的形式,也就是知道哪个状态发生了一定程度的变化,从而进行更新。但是它有相对更多的依赖性。有两种检测变化的方法:Object.defineProperty和ES6Proxy。Object.defineProperty(obj,prop,desc)**Object.defineProperty()是直接在一个对象上定义一个新的属性,或者修改一个已经存在的属性。**obj当前需要定义属性的对象。prop当前需要定义的属性名。desc属性描述符如:letPerson={}Object.defineProperty(Person,'name',{value:'jack',writable:true//YesYoucanchangeconfigurable:true})由于浏览器对ES6的支持是不理想,Vue.js(2.x.x)是用Object.defineProperty实现的。Vue在初始化实例时对属性进行getter/setter转换,所以属性必须在data()上才能被Vue转换为响应式。(深度响应原则)