美文网首页工作生活
vue双向数据绑定原理

vue双向数据绑定原理

作者: 光头小青蛙 | 来源:发表于2019-07-03 14:26 被阅读0次

    vue中通过v-model进行一个双向数据绑定。

    双向数据绑定的原理是什么?

    Vue内部通过Object.defineProperty方法属性拦截的方式,把data对象里每个数据的读写转化成getter/setter,当数据变化时通知视图更新。

    就是data数据发生变化时,视图也跟着变化。视图的数据变化时(表单数据),data里的数据也发生变化。

    什么是Object.defineProperty

    Object.defineProperty() 是一个方法,这个方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。
    Object.defineProperty()有三个参数

    Object.defineProperty(obj, prop, desc)
    

    obj 需要定义属性的当前对象
    prop 当前需要定义的属性名
    desc 存取描述符
    存取描述符 --是由一对 getter、setter 函数功能来描述的属性.
    get:一个给属性提供getter的方法,如果没有getter则为undefined。该方法返回值被用作属性值。默认为undefined。
    set:一个给属性提供setter的方法,如果没有setter则为undefined。该方法将接受唯一参数,并将该参数的新值分配给该属性。默认值为undefined。

    let Person = {}
    let temp = null
    Object.defineProperty(Person, 'name', {
      get: function () {
        return temp
      },
      set: function (val) {
        temp = val
      }
    })
        Person.name="222"   console.log(Person.name)
    

    相关文章

      网友评论

        本文标题:vue双向数据绑定原理

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