Vue 3 对比Vue 2 差异

2023-04-01  本文已影响0人  skoll
image.png

形式上模仿到了react,但是神还没有模仿到

生命周期上面

1 .setup 替代了之前的beforeCreate,created,其他生命周期都是没有变化

使用proxy 替代defineProperty

1 .defineProperty 无法对数组对象的深层监听无法响应,因为组件的每次渲染都是将data里的数据通过defineProperty 进行相应式或者双方绑定,之前没有绑定的数据,是不会触发更新渲染
2 .defineProperty只能相应首次渲染时的属性,Proxy 需要的是整体,不需要关心里面有什么属性
3 .react 里面不会有这种响应结构

diff算法的提升

1 .旧的渲染策略,递归遍历数据前后变化的虚拟DOM树,比较每个节点上的属性。来确定实际那些DOM需要更新
2 .新的,只去diff会改变节点结构的模版指令,例如v-if,v-for那些相关的
3 .编辑器会检测模版中的静态节点,子树,甚至是数据对象,在生成代码中将他们提升到渲染函数的外面,避免每次渲染的时候重新创建这些对象
4 .根据要执行的更新类型,为每个具有动态绑定的元素生成一个优化标志,具有动态类绑定和许多静态属性的元素将收到一个标志,指示只需要进行类检查。
5 .Vue 3所占用CPU时间不到vue 2的十分之一

打包体积的变化

1 .10kb,大约是Vue2 的一半,那么相关的库应该也是会变小的
2 .所以要升级vue3
3 .Vue 3 提供了更小的包体积、更好的性能、更好的可扩展性和更好的 TypeScript/IDE 支持
4 .vue自己的api是可以tree-shake的,如果你不使用内置的transition组件,就不会被打进最后的包体里面,所以拆分框架不知道是否还有意义。
5 .如果使用了全部特性,那么最后会有24kb

上一篇下一篇

猜你喜欢

热点阅读