Vue3.0响应式原理

最近几个月一直在搞脚手架工具，学习时间少了不少，感觉理论学习落下了很多，vue3就要发布了自己还没看过源码，所以决定研究一波。

第一步当然是要把他的源码下载下来，https://github.com/vuejs/vue-next。我们可以将项目跑起来，可以看到生成了dist目录，在html文件中引入，我们就可以使用vue3啦，可以体验一波compositionApi。

可以看到package文件夹下的reactivity，很明显这就是我们要找的东西了，响应式实现的源码就在这里。

• 基于Proxy和Reflect，可以原生监听数组，可以监听对象属性的添加和删除。
• 不需要一次性遍历data的属性，可以显著提高性能。
• 因为Proxy是ES6新增的属性，有些浏览器还不支持,只能兼容到IE11 。

• Vue3.0基于Proxy来做数据的劫持代理，可以原生支持到数组的响应式，不需要重写数组的原型，还可以直接支持新增和删除属性， 比Vue2.x的Object.defineProperty更加的清晰明了。

核心代码(非常少)

  let data = {
    name: "zhangsan",
    age: 20
  };

  const handler = {
    get: function (target, key, receive) {
      // 只处理本身(非原型)的属性
      const ownKeys = Reflect.ownKeys(target)
      if (ownKeys.includes(key)) {
        console.log('get', key) // 监听
      }
      const result = Reflect.get(target, key, receive)
      return result
    },
    set: function (target, key, val, reveive) {
      // 重复的数据，不处理
      const oldVal = target[key]
      if (val == oldVal) {
        return true
      }
      const result = Reflect.set(target, key, val, reveive)
      console.log(result)
      return result
    },
    // 删除属性
    deleteProperty: function (target, key) {
      const result = Reflect.deleteProperty(target, key)
      return result
    }
  };

  data = new Proxy(data, handler);

  data.name = 'lisi'
  console.log(data.name)

可以复制下来在控制台体验一下。