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优化,提供了更多的内置功能




































猜你喜欢

转载自www.cnblogs.com/SRH151219/p/10397485.html