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

vue底层原理的Object.defineProperty()方法

时间:2023-04-01 00:23:56 vue.js

1.双向数据绑定原理众所周知,当vue中的数据发生变化时,view中相应的数据也会发生变化,实现了两个方式数据绑定。其实vue主要是通过watch来监听事件,监听data中的属性。都是使用object.defineProperty方法中的get方法获取属性值方法和set方法设置属性值。当属性值发生变化时,就会触发,进而触发watch。,并且视图被更新。2.object.defineProperty()方法1.官方说法:**Object.defineProperty()**方法会直接在一个对象上定义一个新的属性,或者修改一个对象已有的属性,并返回这个对象。这意味着他可以为一个对象添加属性,或者修改属性。2.object.defineproperty(obj,attr,description)包含三个参数,都是必须的;其中obj是对象,attr是对象的属性,description是属性的描述。leta='hello'letobj={}Object.defineProperty(obj,'name',{get:function(){returna},set:function(v){console.log("我是set的数据")returna=v}})console.log(obj.name)//helloobj.name='66666'console.log(obj.name)//我是设置数据,6666说明:代码清晰一目了然,可以直接打印获取属性值,改变时执行set函数,返回结果给watch,从而触发双向数据绑定。