✏️ 知识整理以及学习 - Vue 篇

vue3.2 不断更新记录整理知识点

Vue3 的生命周期

生命周期图示生命周期钩子 API

基本上就是在 Vue2 生命周期钩子函数名基础上加了 on;beforeDestory 和 destoryed 更名为 onBeforeUnmount 和 onUnmounted;然后用setup代替了两个钩子函数 beforeCreate 和 created;新增了两个开发环境用于调试的钩子

Vue3 组件通信

Vue3.2 多种组件通信方式

Vue3 Diff算法和 Vue2 的区别

我们知道在数据变更触发页面重新渲染,会生成虚拟 DOM 并进行 patch 过程,这一过程在 Vue3 中的优化有如下

编译阶段的优化:

  • 事件缓存:将事件缓存(如: @click),可以理解为变成静态的了
  • 静态提升:第一次创建静态节点时保存,后续直接复用
  • 添加静态标记:给节点添加静态标记,以优化 Diff 过程

由于编译阶段的优化,除了能更快的生成虚拟 DOM 以外,还使得 Diff 时可以跳过"永远不会变化的节点",Diff 优化如下

  • Vue2 是全量 Diff,Vue3 是静态标记 + 非全量 Diff
  • 使用最长递增子序列优化了对比流程

根据尤大公布的数据就是 Vue3 update 性能提升了 1.3~2 倍

源码剖析参考文章: 深入浅出虚拟 DOM 和 Diff 算法,及 Vue2 与 Vue3 中的区别

Vue3 reactive、ref、toRef、toRefs用法和区别

参考:juejin.cn/post/703403…

参考文章

分类:
前端
标签: