Vue3.x数据响应式的核心原理前情提要之前有写过关于Vue2.x数据响应式的核心原理，而现如今Vue3.x的稳定版本

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第30天，点击查看活动详情

前情提要

之前有写过关于Vue2.x数据响应式的核心原理，而现如今Vue3.x的稳定版本已经发布，所以咱们今天就来看下Vue3.x的数据响应式核心原理。

简述Proxy

ES6新增的属性。
不支持IE浏览器。不过令人可喜可贺的是IE已经不再更新，该浏览器的生命已经走到重点，这是多少前端工程师曾经的伤痛。
与Object.defineProperty不同的是它监听的是整个对象，而不是对象中的单个属性。
其性能由浏览器来进行优化，性能优于Object.defineProperty
可以监听之前的方式监听不了的数组的变化。这与之前的方法有着天大的提升，简直是福音。
由多达13中拦截方法：其他的具体可以去查阅相关资料呦。
- get：获取属性值的时候触发。接受两个参数：
  - target：目标对象
  - key：属性名
- set：设置属性值的时候触发。接受三个参数：
  - target：目标对象
  - key：属性名
  - newValue：要设置的值
- apply：为对象重新指向this的时候触发
- ...

模拟实现基于proxy的数据响应式

<html>
... // 无关代码就不展示了。
<body>
  <p id="pp"></p>
</body>
<script>
  // data属性
  const data = {
    msg: ''
  }
  // 模拟vue实例
  const vm = new Proxy(data, {
      get(target, key) {
          console.log(`get ${ key }:${ target[key] }`);
          return target[key];
      },
      set(target, key, newValue) {
          console.log(`set ${ key }:${ newValue }`);
          if (newValue === target[key]) return; // 如果前后值都一样就抛弃，避免重复渲染，浪费性能。
          target[key] = newValue;
          document.getElementById('pp').innerText = newValue;
      }
  })
  vm.msg = 'Hello World!'; // 触发set
  console.log(vm.msg); // 触发get
</script>
</html>

浏览器运行结果：

总结

与使用Object.defineProperty相比较使用proxy在代码的整洁度上有了很大的提升
除了整洁度之外，还有性能方面以及数据劫持的能力方面都有了非常大的提升。
如果你负责的项目不需要支持IE浏览器，那么放心大胆的使用Vue3吧，它会让你的网站性能翻倍...