您现在的位置是:首页 > 文章列表 > Vue > Vue3使用Proxy进行数据监听

Vue3使用Proxy进行数据监听

admin 2020-08-14 14:57 181人围观
简介 Vue的初始化过程,分别有Observer、Compiler和Watcher,当我们newVue的时候,会调用Observer,通过Object.defineProperty遍历vue对象的data、computed或者props(如果是组件的话)的所有属性进行监听

双向绑定其实已经是一个老掉牙的问题了,只要涉及到MVVM框架就不得不谈的知识点,但它毕竟是Vue的三要素之一,可以实现双向绑定的方法有很多,KnockoutJS基于观察者模式的双向绑定,Ember基于数据模型的双向绑定,Angular基于脏检查的双向绑定,本篇文章我们重点讲面试中常见的基于数据劫持的双向绑定。常见的基于数据劫持的双向绑定有两种实现,一个是目前Vue在用的Object.defineProperty,另一个是ES2015中新增的Proxy,而Vue的作者宣称将在Vue3.0版本后加入Proxy从而代替Object.defineProperty,通过本文你也可以知道为什么Vue未来会选择Proxy


Vue 初始化过程

Vue 的初始化过程,分别有Observer、Compiler和Watcher,当我们 new Vue 的时候,会调用Observer,通过 Object.defineProperty 遍历 vue 对象的 data、computed 或者 props(如果是组件的话)的所有属性进行监听。同时通过Compiler解析模板指令,解析到属性后就 new 一个Watcher并绑定更新函数到 watcher 当中,Observer 和 Compiler 就通过属性来进行关联.

Object.defineProperty

来个简单的 Object.defineProperty 例子

class Observer {
        constructor(data) {
          // 遍历参数 data 的属性,给添加到 this 上
          for (let key of Object.keys(data)) {
            if (typeof data[key] === "object") {
              data[key] = new Observer(data[key]);
            }
            Object.defineProperty(this, key, {
              enumerable: true,
              configurable: true,
              get() {
                console.log("你访问了" + key);//你访问了age
                return data[key];//20
              },
              set(newVal) {
                console.log("你设置了" + key); //你设置了age
                console.log("新的" + key + "=" + newVal); //新的age=20
                if (newVal === data[key]) {
                  return;
                }
                data[key] = newVal;
              }
            });
          }
        }
      }
 const obj = {
        name: "app",
        age: "18",
        a: {
          b: 1,
          c: 2,
        }
      };
const app = new Observer(obj);
app.age = 20;
console.log(app.age);
app.newPropKey = "新属性";
console.log(app.newPropKey); //新属性

从上面可以知道:Object.defineProperty 需要遍历所有的属性,这就造成了如果 vue 对象的data/computed/props 中的数据规模庞大,那么遍历起来就会慢很多.同理,如果 vue 对象的 data/computed/props 中的数据规模庞大,那么 Object.defineProperty 需要监听所有的属性的变化,那么占用内存就会很大.

Proxy

我们来看看proxy

Proxy 对象用于定义基本操作的自定义行为(如属性查找,赋值,枚举,函数调用等)

可以理解为在对象之前设置一个”拦截“,当监听的对象被访问的时候,都必须经过这层拦截。可以在这拦截中对原对象处理,返回需要的数据格式,也就是无论访问对象的什么属性,之前定义的或是新增的属性,都会走到拦截中进行处理。这就解决了之前所无法监听的问题。

const obj = {
        name: "krry",
        age: 24,
        others: {
          mobile: "mi10",
          watch: "mi4",
        },
      };
      const p = new Proxy(obj, {
        get(target, key, receiver) {
          console.log("查看的属性为:" + key);  
          return Reflect.get(target, key, receiver);
        },
        set(target, key, value, receiver) {
          console.log("设置的属性为:" + key); 
          console.log("新的属性:" + key, "值为:" + value); 
          Reflect.set(target, key, value, receiver);
        },
      });
      p.age = 22;
      console.log(p.age); 
      p.single = "NO";
      console.log(p.single);
      p.others.shoe = "boost";
      console.log(p.others.shoe);
    输出结果为:
    设置的属性为:age
    新的属性:age 值为:22
    查看的属性为:age22

    设置的属性为:single
    新的属性:single 值为:NO
    查看的属性为:single
    NO 

    查看的属性为:others
    查看的属性为:others
    boost

由上可知,新增或编辑属性,并不需要重新添加响应式处理,都能监听的到,因为 Proxy 是对对象的操作,只要你访问对象,就会走到 Proxy 的逻辑中。Reflect 是一个内置的对象,它提供拦截 JavaScript 操作的方法。这些方法与proxy handlers的方法相同。Reflect不是一个函数对象,因此它是不可构造的,区别Proxy 和 Object.defineProperty 的使用方法看似很相似,其实 Proxy 是在更高维度上去拦截属性的。

Object.definePropertyVue2 中,对于给定的 data:如 { count: 1 },是需要根据具体的 key 也就是 count,去对 get 和 set 进行拦截,也就是:

Object.defineProperty(data, 'count', {
  get() {},
  set() {},
})

必须预先知道要拦截的 key 是什么,这也就是为什么 Vue2 里对于对象上的新增属性无能为力,所以 Vue 初始化的过程中需要遍历 data 来维持数据变化,造成速度变慢,内存变大的原因。

Proxy 而 Vue3 所使用的 Proxy,则是这样拦截的:

new Proxy(data, {
  get(key) { },
  set(key, value) { },
})

可以看到,proxy 不需要关心具体的 key,它去拦截的是修改 data 上的任意 key和读取 data 上的任意 key

所以,不管是已有的 key 还是新增的 key,都会监听到


阅读排行

本栏推荐

  • Vue常见的面试题

    Vue常见的面试题 作为前端开发中现行最火的框架之一,Vue在面试中出现的频率不断增加。​本文给大家收藏...

官方微信