关于javascript:vue底层原理之ObjectdefineProperty方法

一.双向数据绑定原理

  1. 家喻户晓,vue中data数据扭转,视图绝对应的数据也会扭转,实现了双向数据绑定。
  2. 其实vue次要通过watch监听事件,监听data中的属性,全副应用object.defineProperty办法中的get获取属性值办法和set设置属性值办法,当属性值扭转的时候,就会触发,而后watch就会触发,进而视图更新。

二.object.defineProperty()办法

1.官网原话:**Object.defineProperty()** 办法会间接在一个对象上定义一个新属性,或者批改一个对象的现有属性,并返回此对象。
意思就是他能够给一个对象增加属性,或者批改属性。
2.object.defineproperty(obj,attr,description)蕴含三个参数,都是必须的;其中obj是对象,attr是对象的属性,description是属性的形容。

let a = 'hello'
        let obj = {}
        Object.defineProperty(obj,'name',{
            get:function(){
                return a
            },
            set:function(v){
                console.log("我是set的数据")
                return a = v
            }
        })
        console.log(obj.name)//hello
        obj.name = '66666'
        console.log(obj.name)//我是set的数据, 6666
        

阐明:代码高深莫测,间接打印就能获取属性值,当扭转之后,便执行set函数,而后将后果返回给watch,进而触发双向数据绑定。

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理