阅读 51

双向数据绑定原理

目录:

  • Vue2.x实现双向数据绑定

  • Vue3.x实现双向数据绑定

Vue2.x:

在Vue2.x中使用ES5中的Object.defineProperty方法实现双向数据绑定。

Object.defineProperty()

在对象上添加新的属性或修改原有属性,并返回。

  • 第一个参数为目标对象

  • 第二个参数是属性名

  • 第三个参数提供getter/setter方法。

因此Object.defineProperty()就是对数据进行劫持,实现其getter/setter方法。

例如:

 let obj = {    name: 'IFTS'  }  Object.defineProperty(obj, 'name', {    get() {      console.log('getter');    },    set() {      console.log('setter');    }  })  console.log(obj.name); //getter  obj.name = 'IFFTS'; //setter 复制代码

当我们访问对象属性时,就会触发get方法;修改对象属性时,就会触发set方法。因此我们可以实现数据的设置和修改。

 let obj = {    name: 'IFTS'  }  Object.defineProperty(obj, 'name', {  get() {    return obj.name;  },  set(val) {    obj.name = val;  }  })  console.log(obj.name);  obj.name = 'IFFTS';  复制代码

这样设置吗?显示报错,肯定是不行的。 因为当我们获取属性时走get方法返回obj.name,这时它又继续走get方法,死循环。设置也是一样。 由于不能直接设置,那我们可以借助中间变量。

 let obj = {  name: 'IFTS'  }  let middle = obj.name //中间变量  Object.defineProperty(obj, 'name', {  get() {    return middle;  },  set(val) {    middle = val;  }  })  console.log(obj.name); //IFTS  obj.name = 'IFFTS';   console.log(obj.name); //IFFTS 复制代码

结论:

因此,Vue在创建实例时会将数据配置到实例中,利用Object.defineProperty()方法和发布-订阅模式为数据动态添加get和set方法。当数据改变时触发set方法,之后订阅者就会监听到数据的改变。

最后附上具体业务实现:(p标签绑定input输入框)

 <p id="pDom"></p>  <input type="text" id="inputDom">  <script>  let obj = {};  let middle;  Object.defineProperty(obj, 'value', {    get() {      return middle;    },    set(val) {      document.querySelector("#pDom").innerHTML = val;      middle = val;    }  })  document.querySelector("#inputDom").addEventListener('input', (e) => {  obj.value = e.target.value;  }) 复制代码

缺点:

  • 无法监听增加或删除的对象属性

  • 无法监听增加或删除的数组元素

Vue3.x:

在Vue3.x中使用ES6中的proxy实现双向数据绑定。


作者:swiftslee
链接:https://juejin.cn/post/7028733489172201480


文章分类
代码人生
文章标签
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐