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
网友评论