今天写这篇文章主要是为了给自己重温下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 将跳过不会改变节点的打补丁过程。