关于Vue在2025年的个人小记文主要分析了Vue.js支持的写法（选项式、组合式、Setup语法糖、JSX/TSX）和

PS: 全文内容由 AI 生成（包含文本格式）

注意甄别信息真实性

探究Vue.js的写法与渲染模式在Web中的应用

摘要

$\qquad$ 本文主要分析了Vue.js支持的写法（选项式、组合式、Setup语法糖、JSX/TSX）和渲染模式（虚拟DOM、真实DOM和混合DOM）在Web组件中的应用。通过对这些内容的对比分析，探讨了不同写法和渲染模式在实际开发中的优缺点，为前端开发者提供了一定的参考。
$\qquad$ 关键词: 威优易¹，现代前端框架，渲染模式，Web组件。

Abstracts

$\qquad$ This paper mainly analyzes the application of Vue.js supported writing methods (optional, combined, Setup syntax sugar, JSX/TSX) and rendering modes (virtual DOM, real DOM and mixed DOM) in Web components. Through the comparative analysis of these contents, the advantages and disadvantages of different writing and rendering modes in actual development are discussed, which provides a certain reference for front-end developers.
$\qquad$ Key words: Vue.js, modern front-end framework, rendering mode, Web components.

一、引言

1.1 研究背景

$\qquad$ 随着互联网技术的飞速发展，前端开发在 Web 应用中的地位日益重要。近年来，前端框架层出不穷，其中 Vue.js 以其简洁、灵活、高效的特点受到了广大开发者的喜爱。Vue.js 是一款用于构建用户界面的渐进式 JavaScript 框架，其核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM ²的系统。它提供了丰富的特性和灵活的写法，使得开发者能够更加便捷地构建高性能的 Web 应用。

$\qquad$ 在 Vue.js 的发展过程中，不同的写法和渲染模式被提出，以满足不同场景下的开发需求。这些写法和渲染模式的选择对于 Web 应用的性能、可维护性以及开发效率具有重要影响。因此，对 Vue.js 支持的写法和渲染模式进行研究，对于前端开发者来说具有重要的实际意义。

1.2 研究目的

$\qquad$ 本文旨在深入探讨 Vue.js 支持的写法（选项式、组合式、Setup语法糖、TSX）和渲染模式（虚拟DOM、真实DOM和混合DOM），分析它们在Web组件中的应用，并对比这些写法和渲染模式的优缺点。通过本文的研究，旨在为前端开发者提供以下参考：

$\qquad$ （1）了解 Vue.js 支持的写法和渲染模式的特点及适用场景；

$\qquad$ （2）根据项目需求，选择合适的写法和渲染模式；

$\qquad$ （3）提高Web应用的开发效率，优化性能和维护性。

二、Vue.js支持的写法

2.1 选项式写法

使用选项式 API（Options API，下文简称选项式、选项式API），我们可以用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。

<script>
export default {
  // data() 返回的属性将会成为响应式的状态
  // 并且暴露在 `this` 上
  data() {
    return {
      count: 0
    }
  },

  // methods 是一些用来更改状态与触发更新的函数
  // 它们可以在模板中作为事件处理器绑定
  methods: {
    increment() {
      this.count++
    }
  },

  // 生命周期钩子会在组件生命周期的各个不同阶段被调用
  // 例如这个函数就会在组件挂载完成后被调用
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

2.1.1 选项式写法的特点

$\qquad$ 在现代前端框架的下，Vue.js的选项式写法体现了一种分治策略的编程范式，其特点包含如下6个方面：

Vue.js的选项式写法通过模块化抽象的手段，实现了组件逻辑的分离与封装。
选项式写法采纳了声明式语义，使得开发者能够以声明的方式描述用户界面的状态管理。在此范式中，数据的变化与视图的更新之间的同步是隐式进行的，从而减少了开发者对底层渲染逻辑的直接干预，符合声明式编程的核心理念。
Vue.js的选项式写法在组件内部维护了较高的内聚性。各选项之间的关联性被限定在组件的范畴内，减少了组件间的耦合度，符合软件设计中的内聚原则。这种设计有助于提高代码的可重用性和可测试性。
在类型系统的层面上，选项式写法与静态类型检查机制具有良好的兼容性。通过类型注解，Vue.js组件的选项可以在编译时进行类型验证，增强了程序的静态类型安全性，减少了运行时错误。
Vue.js的选项式写法在设计上考虑了开发者的认知负荷。通过提供一套约定俗成的配置选项，它简化了开发者的学习曲线，使得框架的入门门槛相对较低，有利于新晋开发者的快速上手。

综上，Vue.js的选项式写法在遵循软件工程原则的同时，实现了组件逻辑的清晰划分与高效管理，为前端开发提供了一种结构化和可维护的编程范式。

2.1.2 选项式写法的应用场景

$\qquad$ 选项式写法在Vue.js中的应用场景通常涉及那些结构简单、逻辑直接的组件，它为开发者提供了一个固定的框架，使得代码的组织和维护变得更加容易。对于初学者来说，这种写法降低了入门门槛，使得他们能够快速上手并理解Vue组件的工作原理。此外，选项式写法在处理遵循固定模式的组件时表现出色，因为它提供了一致性和可预测性。

$\qquad$ 许多用户喜欢选项式 API 的原因是它在默认情况下就能够让人写出有组织的代码：大部分代码都自然地被放进了对应的选项里。

2.2 组合式写法

通过组合式 API（Composition API,下文简称组合式、组合式API），我们可以使用导入的 API 函数来描述组件逻辑。

同时组合式 API 也并不限制调用顺序，还可以有条件地进行调用。使得代码更符合日常 JavaScript 的直觉，不需要担心闭包变量²的问题。

Vue 的响应性系统（Reactivity）运行时会自动收集计算属性（computed properties）和侦听器（watchers）的依赖，因此无需手动声明依赖。无需手动缓存回调函数来避免不必要的组件更新。

<script>
import { defineComponent, onMounted, ref } from 'vue';

export default defineComponent({

  setup(props, context) {

    // 响应式状态
    const count = ref(0)

    // 用来修改状态、触发更新的函数
    function increment() {
      count.value++
    }


    // 生命周期钩子
    onMounted(() => {
      console.log(`The initial count is ${count.value}.`)
    })

    // 返回template中用到的变量
    return {
      count,increment
    }
  }
})

</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

2.2.1 组合式写法的特点

$\qquad$ 组合式 API 的核心思想是直接在函数作用域内定义响应式状态变量，并将从多个函数中得到的状态组合起来处理复杂问题。这种形式更加自由，也需要你对 Vue 的响应式系统有更深的理解才能高效使用。相应的，它的灵活性也使得组织和重用逻辑的模式变得更加强大。 Vue 细粒度的响应性系统能够确保在绝大部分情况下组件仅执行必要的更新。对 Vue 开发者来说几乎不怎么需要对子组件更新进行手动优化。

2.2.2 组合式写法的应用场景

$\qquad$ 组合式写法适合于处理复杂的组件逻辑，它允许软件开发人员将相关的逻辑抽取到可复用的函数中，从而提高代码的模块化和复用性。在需要与TypeScript等静态类型检查工具配合使用时，组合式写法的优势尤为明显，因为它提供了更好的类型支持。此外，对于需要优化性能的组件，组合式写法能够提供更细粒度的控制，使得开发者能够更有效地管理响应式依赖和副作用。对于那些追求代码灵活性和扩展性的项目，组合式写法也更为合适。

2.3 Setup语法糖

在单文件组件³（Single-File Components，缩写为 SFC）中，组合式 API 通常会与<script setup>⁴搭配使用。

这个 setup XML attribute 是一个标识，告诉 Vue 需要在编译时进行一些处理，让我们可以更简洁地使用组合式 API。比如，<script setup> 中的导入和顶层变量/函数都能够在模板中直接使用。

<script setup>
import { ref, onMounted } from 'vue'

// 响应式状态
const count = ref(0)

// 用来修改状态、触发更新的函数
function increment() {
  count.value++
}

// 生命周期钩子
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

2.3.1 Setup语法糖的优势

$\qquad$ 当软件开发人员同时使用单文件组件与组合式 API 时该语法是默认推荐。相比于普通的 <script> 语法，它具有更多优势：

更少的样板内容，更简洁的代码。
能够使用纯 TypeScript 声明 props 和自定义事件。
更好的运行时性能 (其模板会被编译成同一作用域内的渲染函数，避免了渲染上下文代理对象)。
更好的 IDE 类型推导性能 (减少了语言服务器从代码中抽取类型的工作)。

2.3.2 Setup语法糖的应用场景

$\qquad$ <script setup>语法糖在单文件组件中的应用场景主要体现在其简化代码和提高开发效率的能力上。它特别适合于那些追求快速原型设计和迭代的场景，使得软件开发人员可以更专注于业务逻辑的实现。在TypeScript项目中，<script setup>能够提供更优质的类型支持，使得类型声明更加直观，这对于大型项目的维护尤其重要。此外，对于追求高性能的应用，<script setup>通过优化渲染上下文，减少了性能开销，适合用于构建高性能要求的复杂组件。在构建模块化代码库时，<script setup>有助于逻辑的清晰组织和复用，提升了代码的可维护性。同时，与现代前端工具链的配合使用，能够进一步提升开发效率和代码质量。

2.4 Tsx写法

import type { FunctionalComponent } from "vue";
import { onMounted, ref } from "vue";

interface IProps {

}

const VueFC: FunctionalComponent<IProps> = (props, context) => {

    // 响应式状态
    const count = ref(0)

    // 用来修改状态、触发更新的函数
    const increment = () => {
        count.value++
    }

    // 生命周期钩子
    onMounted(() => {
        console.log(`The initial count is ${count.value}.`)
    })


    return (
        <button onClick={increment} class="count"> Count is: {{ count }}</button>
    )
}

2.4.1 Tsx写法的优势

$\qquad$ 在 Vue 中使用 TSX 写法，能够享受到 TypeScript 的类型安全特性，这意味着在编写代码时，类型错误可以在编译阶段就被捕获，而不是在运行时才发现。此外， TSX 的写法使得组件的逻辑更加集中，不再需要在模板和脚本之间来回切换，提高了代码的可读性和维护性。同时，由于 TypeScript 对 IDE 的良好支持，开发者能够获得更准确的代码提示和自动完成功能，这有助于提升开发效率。 TSX 的灵活性允许开发者以更加原生的方式编写 JavaScript 代码，使得复杂逻辑的处理变得更加直接。此外，逻辑复用变得更加简单，因为可以将逻辑抽象成函数或组件，并在不同的地方重复使用。在性能方面， TypeScript 的编译时类型检查有助于减少运行时的开销，从而可能带来性能上的优势。最后， TSX 的写法对于跨框架的开发者来说，这是一大便利。

2.4.2 Tsx写法的应用场景

$\qquad$ 在组件逻辑非常复杂，需要将逻辑、状态和渲染紧密耦合的情况下， TSX 可以让开发者以更加灵活的方式组织代码，类似于编写常规的 TypeScript 类或函数。对于需要将组件逻辑抽象成可复用函数的情况， TSX 的函数式编程特性使得这一点变得容易实现。

$\qquad$ 对于习惯于其他使用 JSX/TSX 的开发者来说，TSX 写法可以降低学习成本，使得这些开发者能够快速上手 Vue 项目。

三、Vue.js支持的渲染模式

3.1 虚拟DOM

虚拟 DOM (Virtual DOM，简称 VDOM) 是一种编程概念，意为将目标所需的 UI 通过数据结构“虚拟”地表示出来，保存在内存中，然后将真实的 DOM 与之保持同步。这个概念是由 React 率先开拓，随后被许多不同的框架采用，当然也包括 Vue。

$\qquad$ VDOM是一种编程概念，VDOM本质是一个轻量级的 JavaScript 对象，描述了应该出现在屏幕上的UI结构。每当组件的状态发生变化时，一个新的VDOM树会被创建并计算差异，然后将必要的更新应用到真实的 DOM 上。

3.1.1 虚拟DOM的原理

$\qquad$ VDOM的工作原理可以分为以下几个步骤：

创建：当组件首次渲染时，会根据组件的状态生成一个VDOM树结构。
更新：当组件的状态发生变化时，会生成一个新的VDOM树结构。
比较：框架会比较新旧两个VDOM树节点，计算出它们之间的差异。
补丁：框架将这些差异应用到真实的 DOM 上，确保更新只发生在变化的树节点。

图片引用自Vue官网

3.1.2 虚拟DOM的优势

VDOM 带来的主要收益是它让开发者能够灵活、声明式地创建、检查和组合所需 UI 的结构，同时只需把具体的 DOM 操作留给渲染器去处理。

性能：由于VDOM在内存中进行比较，减少了直接操作真实 DOM 的次数，从而提高了性能。真实 DOM 操作是昂贵的，而VDOM通过批量更新和最小化必要的 DOM 操作来减少性能开销。
简化开发：开发者可以专注于状态管理，而不必关心 DOM 操作的细节。VDOM框架会自动处理 DOM 的更新。
跨平台：VDOM不依赖于特定的平台或浏览器⁵，因此可以用于构建跨平台的应用程序。
声明式编程：VDOM鼓励声明式编程。

3.2 真实DOM

$\qquad$ 真实DOM（Document Object Model）是 HTML 和 XML 文档的编程接口。它将网页内容表示为树形结构，每个节点都是文档中的一个对象。在浏览器中，真实DOM是页面与 JavaScript 交互的基础。开发者可以通过 JavaScript 操作 DOM 来动态修改页面内容、结构和样式。

$\qquad$ 在前端框架出现之前，直接操作 DOM 是前端开发的主要方式。开发者需要手动编写大量的 DOM 操作代码，以实现页面的交互和动态更新。然而，频繁的 DOM 操作会导致性能问题，因为每次操作都会引起浏览器的重绘（repaint）或回流（reflow）。

$\qquad$ 随着现代浏览器的不断进化，DOM 操作的算法得到了显著优化，使得将 DOM 操作的控制权“归还”给浏览器成为可能。在此背景下，Vue Vapor 提案应运而生，它提出了一种新的思路，即将 Vue 框架的响应式系统与浏览器的原生 DOM 操作能力相结合。Vue Vapor的核心思想是利用浏览器的最新特性，来实现高效的 DOM 更新策略。在 Vue.js 不断进步中，Vue Vapor 成为 Vue.js 渲染的革命性方法，Vue 承诺提供相同的 Vue 功能，但不提供VDOM。这种创新的呈现机制旨在提供增强的性能、减少内存开销和简化体系结构。

该模式下 Vue 提供更快的渲染速度、更少的内存消耗和更直接的渲染管道

3.2.1 真实DOM的原理

$\qquad$ Vue 的响应式系统与浏览器的真实DOM操作紧密耦合。在此提案中，数据状态的变更所触发的副作用（Side Effects）不再通过VDOM的中介进行传递，而是直接映射至真实DOM节点。这种直接映射机制有效地缩短了状态更新与视图渲染之间的路径，从而提升了状态同步至视图的效率。

图片引用自Vue官网

3.2.2 真实DOM的优势

$\qquad$ 在当前的 Web 开发实践中，直接操作真实DOM的优势在于其能够实现细粒度的元素选择和即时属性修改，从而在特定场景下提供更为直接且高效的交互体验。这种直接性在即时效果呈现和底层调试过程中尤为显著，它绕过了VDOM的差异化对比（diffing）和补丁更新（patching）机制所在的抽象层。避免了额外的计算开销。在处理大规模 DOM 操作或并行处理需求时，真实DOM相较于VDOM展现出更高的性能表现，

3.3 混合DOM

$\qquad$ 在Vue框架的环境下，SFC 的便捷性被进一步拓展，通过暴露Vaper变量，实现了组件级编译策略的灵活配置。Vaper变量的引入，实质上是一种混合编译模式，它允许开发者在组件级别上精细调控真实DOM与VDOM的使用场景，从而兼取两者之长。通过 SFC 的编译时元编程能力，Vaper 变量能够根据组件的具体需求和环境特征，动态地选择编译路径，进而优化渲染流程。这种策略不仅保留了VDOM在跨平台渲染和状态管理上的优势，同时也发挥了真实DOM在直接操作和性能优化上的潜力，实现了在保持开发效率的同时，对最终用户界面性能的精细调优。

3.3.1 混合DOM的原理

$\qquad$ 在Vue框架中，混合DOM的原理基于对组件渲染机制的深度解耦与再封装。Vaper 变量作为编译时配置的桥梁，实现了对真实DOM与VDOM的按需融合。具体而言，该机制在 SFC 的编译阶段，通过抽象语法树的分析，识别出组件中对 DOM 操作的特定模式，并根据 Vaper 变量的设定，决定是采用VDOM的差异化更新策略，还是直接操作真实DOM以减少渲染开销。这种混合DOM的实现，完全依赖于Vue的响应式系统与依赖追踪机制，确保了在两种 DOM 模型间切换时的状态一致性，从而在源头上保障了渲染流程的连贯性与高效性。

3.3.2 混合DOM的优势

$\qquad$ 混合DOM的优势体现在其对渲染性能与开发体验的双重优化。在性能层面，混合DOM 策略能够根据组件的实际交互复杂度，智能选择最合适的渲染路径。对于交互频繁且状态变化复杂的组件，采用VDOM可以减少不必要的 DOM 操作，提升渲染效率；而对于那些交互简单、静态内容较多的组件，直接操作真实DOM则可以减少VDOM的构建与比对开销，从而直接提升初次渲染速度和后续更新的性能。其次，在开发体验上，混合DOM策略为开发者提供了一种更为细粒度的性能调优手段，使得开发者可以在不过度牺牲开发效率的前提下，针对关键组件进行性能优化，实现了开发效率与运行性能的平衡。这种灵活性与控制力的提升，为 Vue 应用的开发与维护提供了更为广阔的空间。

四、Web组件的应用

Vue官方⁶认为 Vue 和 Web Components 是互补的技术。在 Vue 应用中使用自定义元素基本上与使用原生 HTML 元素的效果相同，Vue 为使用和创建自定义元素提供了出色的支持。无论你是将自定义元素集成到现有的 Vue 应用中，还是使用 Vue 来构建和分发自定义元素都很方便。

4.1. Web组件的优势

自定义元素的主要好处是，它们可以在使用任何框架，甚至是在不使用框架的场景下使用。当你面向的最终用户可能使用了不同的前端技术栈，或是当你希望将最终的应用与它使用的组件实现细节解耦时，它们会是理想的选择。

五、对比分析

$\qquad$ 在深入分析 Vue 框架的编程范式之前，我们必须首先理解选项式API与组合式API的设计哲学及其在代码组织和逻辑复用上的根本差异。以下将详细对比这两种范式在实践中的应用及其对开发体验的影响。

5.1 写法对比

这个代码片段展示了命名为 FolderExplorer.vue 组件中的主要函数及其功能。

openFolder(path): 该函数用于打开指定路径的文件夹。通过 GraphQL 进行 FOLDER_OPEN 变更操作，并更新 folderCurrent 的状态。

openParentFolder(folder): 该函数用于打开父文件夹。通过 GraphQL 进行 FOLDER_OPEN_PARENT 变更操作，并更新 folderCurrent 的状态。

toggleFavorite(): 该函数用于切换当前文件夹的收藏状态。通过 GraphQL 进行 FOLDER_SET_FAVORITE 变更操作，并更新 folderCurrent 和 foldersFavorite 的状态。

cwdChangedUpdate(previousResult, { subscriptionData }): 该函数用于更新当前工作目录（CWD）的变更订阅数据。

openPathEdit(): 该函数用于打开路径编辑模式，并使路径输入框获得焦点。

submitPathEdit(): 该函数用于提交路径编辑并打开新的路径。

refreshFolder(): 该函数用于刷新当前文件夹。

resetProjectCwd(): 该函数用于重置项目的当前工作目录（CWD）。通过 GraphQL 进行 PROJECT_CWD_RESET 变更操作。

slicePath(path): 该函数用于将路径切分成路径部分，并返回包含路径部分的数组。

createFolder(): 该函数用于创建新文件夹。通过 GraphQL 进行 FOLDER_CREATE 变更操作，并打开新创建的文件夹。

5.1.1 选项式与组合式写法对比

$\qquad$ 选项式写法中处理相同逻辑关注点的代码被强制拆分在了不同的选项中，位于文件的不同部分。在一个几百行的大组件中，要读懂代码中的一个逻辑关注点，需要在文件中反复上下滚动，这并不理想。另外，如果我们想要将一个逻辑关注点抽取重构到一个可复用的工具函数中，需要从文件的多个不同部分找到所需的正确片段。

$\qquad$ 然而采用组合式我们无需再为了一个逻辑关注点在不同的选项块间来回滚动切换。此外，我们现在可以很轻松地将这一组代码移动到一个外部文件中，不再需要为了抽象而重新组织代码，大大降低了重构成本，这在长期维护的大型项目中非常关键。

5.1.2 Setup语法糖与Tsx写法对比

jcode jcode

六、结论

$\qquad$ 通过不断的研究和实践，Vue有望在未来进一步推动前端开发的发展，为构建更加高效、可维护和用户友好的应用程序提供强有力的支持。

关于Vue在2025年的个人小记