Vue - 源码之双向数据绑定

最新推荐文章于 2024-10-24 09:15:47 发布

原创最新推荐文章于 2024-10-24 09:15:47 发布 · 120 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

Vue 专栏收录该内容

1 篇文章

订阅专栏

本文深入探讨了Vue.js中实现的数据双向绑定机制，并对比了Vue 2.0与Vue 3.0之间的区别。通过具体代码示例展示了Vue 2.0使用`Object.defineProperty`进行属性监听，而Vue 3.0则采用`Proxy`来简化实现过程。

Vue - 源码之双向数据绑定

复杂问题简单化，Vue 2.0和Vue 3.0的区别


 // vue - 2.0 - 数据的双向绑定
    var obj = {};
    Object.keys(obj).forEach((item, index) => {
      
      Object.defineProperty(obj, obj[item], {
        get: function () {
          return value;
        },
        set: function (newVal) {
          obj[item] = newVal;
        }
      });
    })
    obj.name = 'jack';
    obj.age = 18;
    console.log(obj);

    // vue - 3.0 - 数据的双向绑定
    var obj3 = {};
    new Proxy(obj3, {
      get: function (obj3, prop) {
        return obj3[prop];
      },
      set: function (obj3, prop, value) {
        obj3[prop] = value;
      }
    });
    obj3.name = 'Jack';
    console.log(obj3)