Vue3都做了哪些改进升级，看这一篇就够了

我们分成语法层面和非语法层面讲一下（持续更新中）

---

一、语法层面的改进升级

1. 开发方式

Vue2使用Options API （选项式API）进行模板开发，props、data、watch、computer、method等都是分块固定位置放；Vue3则使用Composition API（组合式API）进行开发

2.指令

v-if和v-for指令，在Vue2中v-for比v-if的优先级高，Vue3中v-if比v-for的优先级高

3.setup

setup相当于是vue2中的beforeCreate、created生命周期

4.引入了新的API

• ref()
• computed()
• reactive()
• readonly()
• watchEffect()
• watchPostEffect()
• watchSyncEffect()
• watch()

5.生命周期钩子函数

• onMounted()
• onUpdated()
• onUnmounted()
• onBeforeMount()
• onBeforeUpdate()
• onBeforeUnmount()
• onErrorCaptured()
• onRenderTracked()
• onRenderTriggered()
• onActivated()
• onDeactivated()
• onServerPrefetch()

二、非语法层面的改进升级

1.Patch flag

Vue 3引入了Patch flag的概念，用于标记组件在更新过程中的一些特殊情况，例如组件的props发生变化或只需要强制更新等。这样可以在1.Diff算法 【2.Diff算法】中更快速地定位需要更新的组件，减少了比较的工作量，提高了更新性能。

2.最长递增子序列算法

Vue2 和 Vue3 的 diff 算法虽然都采用了双端比较的方式，但是它们的最大差异在于 Vue3 引入了基于动态规划的优化方案，从而在性能方面有了很大的提升。
Vue 3.0 的 diff 算法采用了最长递增子序列算法，能够减少不必要的 DOM 操作，提升性能。

3.静态标记和提升

Vue 3.0 中，编译器会对静态节点进行标记，在更新时可以直接跳过这些静态节点，对于这部分静态内容，Vue 3将其提升为常量，避免了每次渲染都进行比较的开销，减少 DOM 操作，进一步提高了渲染性能。

4.缓存数组

Vue 3.0 中，编译器会对静态节点进行标记，在更新时可以直接跳过这些静态节点，减少 DOM 操作，提升性能。

5.动态删除操作

Vue 3.0 中，对于动态删除操作，采用了异步队列的方式进行，能够将多个删除操作合并为一个，减少 DOM 操作，提升性能。

6.Fragments优化

在Vue 2中，Fragments（片段）会引入额外的虚拟DOM层级，导致Diff算法需要进行更多的比较操作。而在Vue 3中，对Fragments进行了优化，可以直接将其内部的内容合并到父级中，减少了虚拟DOM层级，提高了Diff算法的效率。

7.动态属性的快速路径

Vue 3通过快速路径（Fast Path）优化了动态属性的处理。对于动态属性，Vue 3会使用更快速的路径进行处理，减少了比较的开销，提高了Diff算法的性能。