vue.3.0 dom赋值_Vue3.0的几大新特性

今天写这篇文章主要是为了给自己重温下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返回的是一个新对象， 可以通过操作返回的新的对象达到监听的目的

注意：

当使用 defineProperty 时，我们修改原来的 obj 对象就可以触发拦截而使用 proxy，就必须修改代理对象，即 Proxy 的实例才可以触发拦截，也就是new的使用。

四、虚拟DOM重写(Virtual DOM Rewrite)

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

五、组件渲染的优化(优化插槽生成)

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

六、静态树提升(Static Tree Hoisting)

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

七、静态属性提升(Static Props Hoisting)

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