静态提升是 Vue3 引入的一种编译优化技术，旨在提高组件的渲染性能。

在 Vue2 中，模板中的每个插值表达式（如）和指令（如 v-if、v-for）都会在每次组件重新渲染时被动态解析和计算。这意味着即使模板中的一部分在组件生命周期内保持不变，Vue2 也会重复计算这些表达式，导致性能下降。

而在 Vue3 中，编译器会在编译阶段静态分析模板，并将其转换为一种基于函数的中间表示（SSR）。在这个过程中，Vue3 会检测哪些部分的模板是静态的（不会变化），并通过静态提升技术将其提升到编译阶段，使得这些部分在每次组件渲染时都不会被重新计算，从而提高了渲染性能。

其本质就是：将代码中不变的变量在编译阶段提升为常量。

静态提升的作用是什么？

静态提升的主要作用是优化 Vue 组件的渲染性能，减少不必要的计算和重新渲染。通过静态提升，Vue3 能够在编译阶段识别出静态的模板部分，并在组件初始化时一次性计算和渲染这些静态内容，之后即使这些静态部分所依赖的数据发生变化，也不会触发额外的计算和渲染过程，从而提高了整体性能。

为了更好地理解 Vue3 的静态提升，让我们通过一个简单的示例来演示其作用。

<template>
  <div>
    <h1>{{ greeting }}</h1>
    <p>{{ message }}</p>
    <p>{{ "here are some words" }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      greeting: "Hello",
      message: "Welcome to my blog!",
    };
  },
};
</script>

在这个示例中，我们有一个简单的 Vue 组件，其中包含一个<h1>标签和一个<p>标签，分别显示问候语和消息。

在 Vue2 中，每次组件重新渲染时，{ { greeting } } 和 { { message } } 都会被重新计算。

但是在 Vue3 中，由于静态提升的存在，{ { greeting } } 和 { { message } } 会被提升到编译阶段，只会在组件初始化时被计算一次，之后即使数据发生变化也不会再次计算，从而提升了性能。

总的来说，Vue3 的静态提升通过将静态模板部分提升到编译阶段，避免了不必要的计算和重新渲染，从而提高了组件的渲染性能，让应用更加高效和流畅。

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24