vue3.0的变化
1.
vue最主要的特点就是响应式机制、模板、以及对象式的组件声明语法,而3.0对这三部分都做了更改。
1. 响应式(数据的双向绑定)
2.0的响应式
基于Object.defineProperty中的set和get方法实现
兼容主流浏览器和ie9以上的ie浏览器,
能够监听数据对象的变化,
但是监听不到对象属性的增删、数组元素和长度的变化,
同时会在vue初始化的时候把所有的Observer都建立好,才能观察到数据对象属性的变化。
3.0的响应式
采用了ES2015的Proxy来代替Object.defineProperty,
可以做到监听对象属性的增删和数组元素和长度的修改,
还可以监听Map、Set、WeakSet、WeakMap,
同时还实现了惰性的监听,
不会在初始化的时候创建所有的Observer,而是会在用到的时候才去监听。
但是,虽然主流的浏览器都支持Proxy,ie系列却还是不兼容,
所以针对ie11,vue3.0决定做单独的适配,暴露出来的api一样,但是底层实现还是Object.defineProperty
2.模板
模板方面没有大的变更,只改了作用域插槽,
2.x的机制导致作用域插槽变了,父组件会重新渲染,
3.0把作用域插槽改成了函数的方式,这样只会影响子组件的重新渲染,提升了渲染的性能。 同时,对于render函数的方面,vue3.0也会进行一系列更改来方便习惯直接使用api来生成vdom的开发者。
3. 对象式的组件声明方式
vue2.x中的组件是通过声明的方式传入一系列option,和TypeScript的结合需要通过一些装饰器的方式来做,虽然能实现功能,但是比较麻烦。 3.0修改了组件的声明方式,改成了类式的写法,这样使得和TypeScript的结合变得很容易。 此外,vue3.0的源码也改用了TypeScript来写。
其实当代码的功能复杂之后,必须有一个静态类型系统来做一些辅助管理,如React使用的Flow,Angular使用的TypeScript。
现在vue3.0也全面改用TypeScript来重写了,更是使得对外暴露的api更容易结合TypeScript。静态类型系统对于复杂代码的维护确实很有必要。
其他的一些东西
vue3.0的改变是全面的,上面只涉及到主要的3个方面,还有一些其他的更改: 支持自定义渲染器,从而使得weex可以通过自定义渲染器的方式来扩展,而不是直接fork源码来改的方式。
支持Fragment(多个根节点)和Protal(在dom其他部分渲染组建内容)组件,针对一些特殊的场景做了处理。
基于treeshaking优化,提供了更多的内置功能