Vue3.0数据双向绑定Proxy探讨

2023年11月8日 318次阅读 来源: faker

媒介

2018年11月16日，关注vue的人都晓得这个时刻点发生了什么事儿吧。vue3.0更新内容

研讨数据双向绑定的大佬们都在最先猜想这个新机制了，用原生Proxy替代Object.defineProperty

1. 为何要替代Object.defineProperty

替代不是由于不好，是由于有更好的要领运用效力更高

Object.defineProperty的瑕玷：

  1. 在Vue中，Object.defineProperty没法监控到数组下标的变化，致使直接经由过程数组的下标给数组设置值，不能及时相应。为了处置惩罚这个题目，经由vue内部处置惩罚后可以运用以下几种要领来监听数组。有关于这个申明，可以看看这个文章 vue为何不能检测数组变动

    push()
pop()
shift()
unshift()
splice()
sort()
reverse()

    现在只针对以上要领做了hack处置惩罚，所以恰数组属性是检测不到的，有局限性。

  2. Object.defineProperty只能挟制对象的属性,因而我们须要对每一个对象的每一个属性举行遍历。Vue里，是经由过程递归以及遍历data对象来完成对数据的监控的，假如属性值也是对象那末须要深度遍历,明显假如能挟制一个完全的对象，不管是对操纵性照样机能都邑有一个很大的提拔。
    而要庖代它的Proxy有以下两个长处：

    1. 可以挟制全部对象，并返回一个新对象
2. 有13种挟制操纵

2. 什么是Proxy

Proxy是 ES6 中新增的一个特征，翻译过来意义是"代办"，用在这里示意由它来“代办”某些操纵。 Proxy 让我们可以以简约易懂的体式格局掌握外部对对象的接见。其功用异常类似于设想形式中的代办形式。

Proxy 可以明白成，在目标对象之前架设一层“阻拦”，外界对该对象的接见，都必须先经由过程这层阻拦，因而供应了一种机制，可以对外界的接见举行过滤和改写。

运用 Proxy 的中心长处是可以交由它来处置惩罚一些非中心逻辑（如：读取或设置对象的某些属性前纪录日记；设置对象的某些属性值前，须要考证；某些属性的接见掌握等）。 从而可以让对象只需关注于中心逻辑，到达关注点星散，下降对象复杂度等目标。

基础用法：

let p = new Proxy(target, handler);

参数：

target: 是用Proxy包装的被代办对象（可所以任何范例的对象，包含原生数组，函数，以至另一个代办）。
handler: 是一个对象，其声清楚明了代办target 的一些操纵，其属性是当实行一个操纵时定义代办的行动的函数。

p是Proxy对象，当其他操纵对p举行变动的时刻，会实行handler对象的要领。Proxy有13种数据挟制的操纵，经常使用的handler处置惩罚要领：

get: 读取值，
set: 获取值，
has: 推断对象是不是具有该属性，
construct: 组织函数

给个例子：

let obj = {};
 let handler = {
   get(target, property) {
    console.log(`${property} 被读取`);
    return property in target ? target[property] : 3;
   },
   set(target, property, value) {
    console.log(`${property} 被设置为 ${value}`);
    target[property] = value;
   }
 }

 let p = new Proxy(obj, handler);
 p.name = 'tom' //name 被设置为 tom
 p.age; //age 被读取 3

更多的Proxy属性要领参考MDN Proxy

3. Proxy完成数据挟制

observe(data) {
  const that = this;
  let handler = {
   get(target, property) {
      return target[property];
    },
    set(target, key, value) {
      let res = Reflect.set(target, key, value);
      that.subscribe[key].map(item => {
        item.update();
      });
      return res;
    }
  }
  this.$data = new Proxy(data, handler);
}

这段代码里把代办器返回的对象代办到this.$data，即this.$data是代办后的对象，外部每次对this.$data举行操纵时，实际上实行的是这段代码里handler对象上的要领。
注：这儿用到了reflect属性，这也是ES6里面的，不晓得的去这儿看看吧。reflect属性

4. 关于怎样拼接到watcher和compile

上面说到了怎样运用Proxy做数据挟制，怎样连系定阅宣布，请连系 vue2.0数据双向绑定探讨 对照着Object.defineProperty
数据挟制的部分去替代看一下。其他的设想头脑预计跟之前的八九不离十。

    原文作者：faker
    原文地址: https://segmentfault.com/a/1190000017397797
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞