美文网首页Vue技术
彻底理解vue双向数据绑定

彻底理解vue双向数据绑定

作者: 程序小小黑 | 来源:发表于2021-04-06 14:16 被阅读0次

    原理

    1.vue双向数据绑定是通过 数据劫持 结合 发布订阅模式 实现的,数据和视图同步,即数据发生变化,视图跟着变化,视图变化,数据也随之发生改变

    2.核心:Object.defineProperty()

    Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。 -- 来自MDN

    语法:Object.defineProperty(obj, prop, descriptor)

    参数:
    obj:要定义属性的对象。
    prop:要定义或修改的属性的名称或 Symbol
    descriptor:要定义或修改的属性描述符。

    简单地说,就是用这个方法来定义一个值。当调用时我们使用了它里面的get方法,当我们给这个属性赋值时,又用到了它里面的set方法;

    let obj = {}
    Object.defineProperty(obj,'test',{
      get:function(){
            console.log('调用get方法')
       },
     set:function(newVal){
            console.log('调用set方法,新值为:'+newVal)
       }
    })
    obj.test; // '调用get方法'
    obj.test='我们都是打工人' // 调用set方法,新值为:我们都是打工人
    

    简单实现双向数据绑定

    双向数据绑定

    相关文章

      网友评论

        本文标题:彻底理解vue双向数据绑定

        本文链接:https://www.haomeiwen.com/subject/wflqkltx.html