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
5.生命周期钩子函数

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

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算法的性能。

相关推荐

  1. Vue3哪些改进升级

    2024-02-05 02:04:03       40 阅读
  2. 入门SAM

    2024-02-05 02:04:03       14 阅读
  3. Rust async,

    2024-02-05 02:04:03       14 阅读
  4. TypeScript

    2024-02-05 02:04:03       12 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-02-05 02:04:03       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-02-05 02:04:03       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-02-05 02:04:03       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-02-05 02:04:03       18 阅读

热门阅读

  1. 【从浅到深的算法技巧】堆排序,应用

    2024-02-05 02:04:03       25 阅读
  2. 阿里云入门

    2024-02-05 02:04:03       32 阅读
  3. K8s之configMap

    2024-02-05 02:04:03       27 阅读
  4. 常见code review问题

    2024-02-05 02:04:03       31 阅读
  5. MySQL中SQL查询语句优化

    2024-02-05 02:04:03       35 阅读
  6. 开源协议介绍

    2024-02-05 02:04:03       36 阅读
  7. 【华为机试】2023年真题C卷(python)-字符串拼接

    2024-02-05 02:04:03       38 阅读
  8. Docker 大纲

    2024-02-05 02:04:03       29 阅读
  9. 【递归】 92. 反转链表 II

    2024-02-05 02:04:03       33 阅读