刨析Vue3.0系列(一)

在早些时间，尤雨溪发布了新的VUE3.0版本的源码，节制到目前为止，源码暂时还是best状态，虽然不是正式版，但这并不妨碍我们借此拜读一下，了解一下新的特性，以及将为我们带来的改变。本文的目的在于紧跟官方，白话解读新特性以及一些新的编程方式实现方案，抛转引玉，个人解读，如有错误，尽请指出，感谢

首先，我们先引用一下目前所暴露出来的vue3.0的目标：

1. 更快

2. 更小

3. 更便于维护

4. 更多的支持

5. 更易于开发使用

我们将会从几个角度，分别剖析一下如何实现这个目标

首先是更快，为了使vue的运行时速度更加的快速、流畅，vue团队重写了虚拟DOM部分，优化了插槽的生成，静态树、静态属性的提升以及基于Proxy的新观察者机制。我们今天主要谈一下新老两种观察者机制的不同以及升级后的优势

先说一下vue2.0的观察者机制:Object.defineProperty

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。

这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在属性被访问和修改时通知变更。这里需要注意的是不同浏览器在控制台打印数据对象时对 getter/setter 的格式化并不同，所以建议安装 vue-devtools 来获取对检查数据更加友好的用户界面。

每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据属性记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

缺点主要是以下两项：

1.由于 Vue 会在初始化实例时对属性执行 getter/setter 转化，所以属性必须在 data 对象上存在才能让 Vue 将它转换为响应式的，所以Vue 无法检测到对象属性的添加或删除

2.对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性

其先天性的局限性导致Object.defineProperty只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历。Vue 2.x里，是通过 递归 + 遍历 data 对象来实现对数据的监控的，如果属性值也是对象那么需要深度遍历,显然如果能劫持一个完整的对象是才是更好的选择。

为了解决这些问题，vue3.0中，采用了Proxy机制，同样是ES6中的机制，对这个机制没有了解的同学可以去详细了解一下，http://es6.ruanyifeng.com/#docs/proxy

采用Proxy机制可以解决以上存在的一些问题：

可以劫持整个对象，返回一个新的对象，这样当我们需要在项目中可以直接监听到对象属性的添加和删除

新增了劫持操作，Object.defineProperty其实并不能监控到数组下标的变化，所以其实我们通过直接Array[0]下标是不能实时响应的，经vue内部处理后，可以响应到数组的常用8种方法。而使用Proxy监听之后，由于Proxy劫持的是整个对象，所以可以监听到对象的所有改变，会消除以前存在的警告，节省了一半的内存开销。之前没有使用这个属性的原因是因为这个属性无法用polyfill兼容，但显然，vue团队已经找到了兼容的方式，我们可以在之后的源码中探索这种方案。

在本章中主要探索了一下新的数据响应式方案，接下来的时间中，我会继续分享关于3.0的其他部分的优化方案以及新的编码方式，以上浅见，敬请指正

参考文档：

https://www.jianshu.com/p/fa99c7184315

https://www.jianshu.com/p/860418f0785c