从Proxy到Vue3数据绑定

导言： 本菜鸡在Vue2没多久，结果就Vue3发布了。赶紧学习和体验了一番Vue3，发现和Vue2有较大不同。其中最让我印象深刻的是他们有一个叫ref和reactive的用来绑定和更新数据。然后再略微调查原理之后发现Vue3是用的Proxy来实现数据绑定。我之前对JS语法的Proxy基本完全不懂，正好趁这个机会，深入理解一下Proxy和Vue3的数据绑定。希望对于同样是初学者的你，看完我的文章，能对这两部分知识有更深入的认识。

数据绑定

我们进行网页设计，除了需要设计各个页面组件之外，另外最重要的部分应该就属于数据交互了。经常我们要面对的需求是获取用户的数据或者将一些处理过的数据发送给用户。比如我们用原生代码展示一下上将数据发送给用户：

<p></p>

const data = {
    value: 'hello' }
document.querySelector('p').innerText = data.value;

等到我们使用Vue之后，Vue引入了一种设计模式称为MVVM，我们不再和DOM直接进行交互。

MVVM是Model-View-ViewModel缩写，也就是把MVC中的Controller演变成ViewModel。Model层代表数据模型，View代表UI组件，ViewModel是View和Model层的桥梁，数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知viewModel层更新数据。

上图是一个经验的MVVM的示意图，我们在使用Vue的时候，只设计UI以及数据处理的Model。如何将数据渲染在页面上，我们不再关心了。交给Vue来处理。

可以再看一下，我们最开始举得简单代码的例子。之前我们是View和Model直接进行通信的，现在多了一个ViewModel层。就像假设你之前出入小区可以随便出入。现在因为疫情，门口多了一个站岗的保安。你能不能出入不再是由你决定了，而是由保安决定。这样的保安或者ViewModel，可以称之为一种代理。

类似于交易不是双方直接达成，而是要经过中间商才能达成交易。类似于你们之前是直接现金交易，现在都需要用支付宝转到对方账户才行。支付宝就是这样的中间商或者称为代理。有了代理就可以设置一些处理规则，或者拦截等。比如支付宝可以定义一种代理规则：只要是通过我转账到对方账户，我就要收取1%的手续费。

Proxy

我们理解了代理这个概念之间，下面就可以开始讲Proxy。首先看一下MDN关于Proxy的定义：

Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）

总之，Proxy就是干代理的事。就是前文讲的那个保安或者支付宝。

关于Proxy最简单的讲解，我就不去贴MDN的内容了，如果对Proxy具体语法完全不了解请移步Proxy，Proxy的handler对象方法虽然很多，但最最常用的还是get和set。如果完全不了解Proxy的，别的对象方法可以暂时不看，一定要把这两个方法看一下。

下面我举一些Proxy的通俗例子，并逐渐过渡到Vue3的Proxy中。

首先举一个简单的例子：

let o = {
   
  name: 'xiaoming',
  age: 20
}

let handler = {
   
  get(obj, key) {
   
      return key in obj ? obj[key] : ''
  }
}

let p = new Proxy(o, handler)

console.log(p.from)

这个代码是想表达如果 o 对象有这个 key-value 则直接返回，如果没有一律返回空。这里的p的结果就相当于是一个代理过后的结果了，o的数据不是直接传给p，而是经过经过handler代理逻辑之后才传过去的。对于对象o而言，如果直接访问o.from会报错。对于p而言，因为中间有一个代理程序帮我们处理了一下，所以不会报错，而是返回空。

通过上面的例子，我们初步了解了Proxy的代理特性，下面我们来看一下更复杂一点的例子。

let user = {
   
    name: 'xiaoming',
    age: 20,
    _password: