今天写这篇文章主要是为了给自己重温下Vue3.0的新特性，也为了给各位前端朋友做个简单的介绍。目前vue3的开发已经在Alpha阶段，之后应该会有Beta版本，源码地址在：https://github.com/vuejs/vue-next。预计正式上线要在2020年的第二季度。

说起Vue3的新特性，简单来说就是：更快、更小 、更容易维护 、更加友好 、更容易使用。具体的主要表现在以下几个方面。

一、、兼容性的变化

目前打包后的代码是 ES2015+，不支持 IE 11。当然，在后期的正式版本中也可能做进一步浏览器的兼容。

二、编写语言的不同

目前的代码 98% 以上使用 TypeScript 编写。

如果你还没有学习 TypeScript，请尽快学习，否则可能看不懂源码。

另外有件事情说出来可能会让你非常惊讶，Vue 3 的源代码完全没有使用 class 关键字！（只在测试代码和示例代码里用到了 class 关键字）

三、响应系统的变动

Vue3由原来的Object.defineProperty 的getter 和 setter，改变成为了ES2015 Proxy 作为其观察机制。

defineProperty缺点：

1.无法监听数组变化

2.只能劫持对象的属性,属性值也是对象那么需要深度遍历

proxy的优点：

1、可以监听数据和对象的变化，不用深度遍历

2、proxy有多达13种的拦截方法

3、proxy返回的是一个新对象， 可以通过操作返回的新的对象达到监听的目的

注意：

四、虚拟DOM重写（Virtual DOM Rewrite）

Vue3重写了虚拟 DOM ，我们可以通过更多的编译时提示来减少运行时开销。重写将包括更有效的代码来创建虚拟节点。

五、组件渲染的优化（优化插槽生成）

Vue2当中在父组件渲染同时，子组件也会渲染。 Vue3就可以单独渲染父组件、子组件。

六、静态树提升（Static Tree Hoisting）

使用静态树提升，这意味着 Vue 3 的编译器将能够检测到什么是静态组件，然后将其提升，从而降低了渲染成本。它将能够跳过未整个树结构打补丁的过程。

七、静态属性提升（Static Props Hoisting）

此外，我们可以期待静态属性提升，其中 Vue 3 将跳过不会改变节点的打补丁过程。

閱讀更多 滬漂程序員的生活史 的文章

關鍵字: 浏览器 TypeScript 对象