0
点赞
收藏
分享

微信扫一扫

Vue 双向绑定原理

骑在牛背上看书 2022-03-11 阅读 63
  1. vue2 使用的是 Object.defineProperty

  2. vue3 使用的是 proxy

通过对 data 中的数据进行劫持,添加 getter 和 setter,从而实现数据更新-视图更新。

Object.defineProperty

  1. 作用

    1. 可以监听对象的某个属性,添加 getter 和 settter

      const obj = {};
      
      let name = '悟空';
      
      Object.defineProperty(obj, 'name', {
        get() {
          return name;
        },
        set(val) {
          console.log('set');
          name = val;
        },
      });
      console.log(obj.name);
      
      obj.name = '八戒';
      
      console.log(obj.name);

    2. 弊端

  • 无法监听新增属性
  • 无法监听对象深层次属性
  • 无法监听数组 ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse']; 等方法
  • vue2中 使用 数组方法 push 找到数组的原型 来重写 !!!

proxy

es6 新出的对象,翻译为代理

不像 Object.defineProperty 监听的是属性,它监听的是整个对象。

  1. 可以监听新增属性

  2. 可以监听对象深层次属性

  3. 可以监听数组 ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse']; 等方法

const obj = {
  a: '悟空',
};

const proObj = new Proxy(obj, {
  get(target, key) {
    console.log('get');
    return target[key];
  },
  set(target, key, value) {
    target[key] = value;
  },
});

console.log(proObj);

proObj.a = 23;

console.log(proObj);

 

举报

相关推荐

0 条评论