Vue.js

外观

本页内容

术语表 ​

本术语表旨在提供一些关于在讨论Vue时常见技术术语含义的指导。它旨在描述术语的常用用法，而不是对如何使用它们的规范性规定。某些术语根据周围环境可能具有略微不同的含义或细微差别。

异步组件 ​

异步组件是另一个组件的包装器，允许被包装的组件进行懒加载。这通常用作减少构建的.js文件大小的方法，将它们分割成更小的块，只有当需要时才进行加载。

Vue Router也具有类似的功能，用于路由组件的懒加载，但这并不使用Vue的异步组件功能。

更多信息请参阅

编译宏 ​

编译宏是编译器处理的特殊代码，并将其转换为其他内容。它们实际上是字符串替换的一种巧妙形式。

Vue的SFC编译器支持各种宏，例如defineProps()、defineEmits()和defineExpose()。这些宏有意设计成看起来像正常的JavaScript函数，以便可以利用围绕JavaScript/TypeScript的相同解析器和类型推断工具。然而，它们不是在浏览器中运行的真正函数。这些是编译器检测并替换为实际将在浏览器中运行的真正JavaScript代码的特殊字符串。

宏的使用有限制，这些限制不适用于正常JavaScript代码。例如，你可能认为const dp = defineProps可以让你为defineProps创建别名，但实际上会导致错误。此外，对传递给defineProps()的值也有限制，因为“参数”必须由编译器处理，而不是在运行时处理。

更多信息请参阅

组件 ​

术语组件并非Vue独有，它对许多UI框架都很常见。它描述了UI的一部分，例如按钮或复选框。组件也可以组合成更大的组件。

组件是Vue提供的主要机制，用于将UI分割成更小的部分，既为了提高可维护性，也为了允许代码复用。

Vue组件是一个对象。所有属性都是可选的，但组件要渲染，则需要一个模板或渲染函数。例如，以下对象将是一个有效的组件

js
const HelloWorldComponent = {
  render() {
    return 'Hello world!'
  }
}

在实际应用中，大多数Vue应用都是使用单文件组件（.vue文件）编写的。尽管这些组件最初可能看起来不像对象，但SFC编译器会将它们转换为对象，并作为文件的默认导出使用。从外部角度来看，一个.vue文件只是一个导出一个组件对象的ES模块。

组件对象的属性通常被称为选项。这就是选项API得名的由来。

组件的选项定义了如何创建该组件的实例。组件在概念上类似于类，尽管Vue并不使用实际的JavaScript类来定义它们。

“组件”一词也可以更宽松地用来指代组件实例。

更多信息请参阅

“组件”一词还出现在其他几个术语中

组合式​

组合式一词描述了Vue中的一种常见用法模式。它不是Vue的一个独立特性，只是使用框架的组合API的一种方式。

  • 组合式是一个函数。
  • 组合式用于封装和复用有状态的逻辑。
  • 函数名称通常以use开头，以便其他开发者知道它是一个组合式。
  • 通常期望在组件的setup()函数的同步执行期间（或者等价地，在<script setup>块执行期间）调用该函数。这使组合式的调用与当前组件上下文相关联，例如通过调用provide()、inject()或onMounted()。
  • 组合式通常返回一个普通对象，而不是响应式对象。该对象通常包含引用和函数，并期望在调用代码中解构。

与许多模式一样，人们可能会对特定的代码是否符合该标签存在一些分歧。并非所有的JavaScript实用函数都是组合式。如果一个函数没有使用组合API，那么它可能不是组合式。如果一个函数不需要在setup()的同步执行期间被调用，那么它可能不是组合式。组合式专门用于封装有状态的逻辑，它们不仅仅是函数的命名约定。

有关编写组合式的更多详细信息，请参阅指南 - 组合式。

组合API ​

组合API是一组用于在Vue中编写组件和组合式的函数。

该术语还用于描述编写组件的两种主要风格之一，另一种是选项API。使用组合API编写的组件使用<script setup>或显式的setup()函数。

有关更多信息，请参阅组合API常见问题解答。

自定义元素 ​

自定义元素是Web组件标准的一个特性，它在现代浏览器中得到实现。它指的是在HTML标记中使用自定义HTML元素来在页面中包含Web组件的能力。

Vue内置了对自定义元素的支持，并允许它们在Vue组件模板中直接使用。

不要将自定义元素与在另一个Vue组件的模板中将Vue组件作为标签包含的能力混淆。自定义元素用于创建Web组件，而不是Vue组件。

更多信息请参阅

指令 ​

指令一词指的是以v-前缀开始的模板属性，或它们的等效简写。

内置指令包括v-if、v-for、v-bind、v-on和v-slot。

Vue还支持创建自定义指令，尽管它们通常仅用作直接操作DOM节点的“逃生门”。自定义指令通常不能用于重新创建内置指令的功能。

更多信息请参阅

动态组件 ​

术语“动态组件”用于描述需要动态选择要渲染的子组件的情况。通常，这是通过使用<component :is="type">来实现的。

动态组件不是一种特殊的组件类型。任何组件都可以用作动态组件。是组件的选择是动态的，而不是组件本身。

更多信息请参阅

效果 ​

请参阅响应式效果和副作用。

事件 ​

使用事件在程序的不同部分之间进行通信是编程的许多不同领域的常见做法。在Vue中，该术语通常应用于原生HTML元素事件和Vue组件事件。在模板中，使用v-on指令来监听这两种类型的事件。

更多信息请参阅

片段 ​

术语“片段”指的是一种特殊的VNode，它用作其他VNode的父节点，但本身不渲染任何元素。

该名称来自原生DOM API中类似的概念DocumentFragment。

片段用于支持具有多个根节点的组件。尽管这些组件可能看起来有多个根，但实际上它们在幕后使用一个片段节点作为单个根，作为“根”节点的父节点。

片段还由模板编译器用作包装多个动态节点的方式，例如通过v-for或v-if创建的节点。这允许向VDOM补丁算法传递额外提示。这其中的大部分是内部处理的，但您可能直接遇到这种情况是在使用带有v-for的<template>标签上的key时。在这种情况下，key被添加为片段VNode的prop。

片段节点目前被渲染为DOM中的空文本节点，尽管这是一个实现细节。如果您使用$el或尝试使用内置浏览器API遍历DOM，您可能会遇到这些文本节点。

函数组件 ​

组件定义通常是一个包含选项的对象。如果您正在使用<script setup>，它可能看起来不是这样，但从.vue文件导出的组件仍然是一个对象。

一个函数组件是使用函数声明的组件的另一种形式。该函数充当组件的渲染函数。

功能组件不能拥有自己的状态。它也不经过常规的组件生命周期，因此不能使用生命周期钩子。这使得它们比普通的有状态组件要轻量一些。

更多信息请参阅

提升 ​

术语“提升”用来描述在到达之前，在其它代码之前运行某段代码。执行被“拉到”更早的点。

JavaScript使用提升来处理一些结构，例如var、import和函数声明。

在Vue环境中，模板编译器应用静态提升来提高性能。当将模板转换为渲染函数时，对应于静态内容的VNodes可以创建一次并重复使用。这些静态VNodes被称为提升，因为它们是在渲染函数运行之前创建的。类似的提升形式也应用于由模板编译器生成的静态对象或数组。

更多信息请参阅

DOM内模板 ​

指定组件模板的方法有很多种。在大多数情况下，模板以字符串的形式提供。

术语DOM内模板指的是模板以DOM节点形式提供，而不是字符串。Vue随后使用innerHTML将这些DOM节点转换为模板字符串。

通常，DOM内模板最初是直接写在页面HTML中的HTML标记。然后浏览器将其解析为DOM节点，Vue随后使用这些节点读取innerHTML。

更多信息请参阅

注入 ​

见提供/注入。

生命周期钩子 ​

Vue组件实例会经历一个生命周期。例如，它被创建、挂载、更新和卸载。

生命周期钩子是监听这些生命周期事件的一种方式。

使用Options API，每个钩子都作为单独的选项提供，例如mounted。Composition API使用函数，如onMounted()。

更多信息请参阅

宏 ​

见编译器宏。

具名插槽 ​

组件可以有多个插槽，通过名称区分。除了默认插槽之外的插槽被称为具名插槽。

更多信息请参阅

Options API ​

Vue组件使用对象定义。这些组件对象的属性被称为选项。

组件可以以两种风格编写。一种风格结合使用Composition API和setup（通过setup()选项或<script setup>）。另一种风格几乎不直接使用Composition API，而是使用各种组件选项来达到类似的效果。以这种方式使用的组件选项被称为Options API。

Options API包括如data()、computed、methods和created()等选项。

一些选项，如props、emits和inheritAttrs，可以在使用任一API编写组件时使用。由于它们是组件选项，可以认为它们是Options API的一部分。然而，由于这些选项还可以与setup()一起使用，通常认为它们是两种组件风格的共享部分。

setup()函数本身是组件选项，因此可以描述为Options API的一部分。然而，这并不是“Options API”这个术语通常的用法。相反，setup()函数被认为是Composition API的一部分。

插件​

虽然“插件”一词可以在许多不同的上下文中使用，但Vue将插件视为向应用程序添加功能的一种方式。

通过调用app.use(plugin)将插件添加到应用程序中。插件本身是一个函数或具有install函数的对象。该函数将传入应用程序实例，然后可以执行所需的所有操作。

更多信息请参阅

prop ​

在Vue中，“prop”一词有三个常见的用法

  • 组件props
  • VNode props
  • 插槽props

组件props是大多数人认为的props。这些是通过defineProps()或props选项显式定义的。

VNode props一词指的是传递给h()的第二个参数的对象的属性。这些可以包括组件props，但也可以包括组件事件、DOM事件、DOM属性和DOM属性。你通常只会在使用渲染函数直接操作VNodes时遇到VNode props。

插槽props是指传递给作用域插槽的属性。

在所有情况下，props是从其他地方传入的属性。

虽然“props”一词来源于“properties”，但在Vue的上下文中，“props”一词有更具体的含义。你应该避免将其用作“properties”的缩写。

更多信息请参阅

provide / inject ​

provide和inject是一种组件间通信的形式。

当组件提供一个值时，该组件的所有后代都可以选择使用inject来获取该值。与props不同，提供值的组件不知道确切是哪个组件接收了该值。

provide和inject有时用于避免prop drilling。它们还可以用作组件与其槽内容通信的隐式方式。

provide还可以在应用程序级别使用，使一个值对应用程序中的所有组件都可用。

更多信息请参阅

reactive effect ​

reactive effect是Vue反应性系统的一部分。它指的是跟踪函数的依赖关系并在这些依赖关系的值发生变化时重新运行该函数的过程。

watchEffect()是创建效果的最直接方式。Vue的许多其他部分都使用效果内部。例如，组件渲染更新、computed()和watch()。

Vue只能在反应性效果中跟踪反应性依赖项。如果一个属性的值在反应性效果之外被读取，它将“失去”反应性，也就是说，Vue将不知道在属性随后更改时该怎么做。

该术语源自“副作用”。当属性值改变时，调用效果函数是改变属性值的副作用。

更多信息请参阅

响应性 ​

一般来说，响应性指的是根据数据变化自动执行操作的能力。例如，当数据值改变时，更新DOM或发起网络请求。

在Vue的上下文中，响应性用来描述一系列功能。这些功能组合形成一个响应性系统，通过响应性API进行暴露。

响应性系统可能有多种不同的实现方式。例如，可以通过对代码进行静态分析来确定其依赖关系。然而，Vue并没有采用这种响应性系统。

相反，Vue的响应性系统在运行时跟踪属性访问。它通过属性的两个包装器以及getter/setter函数来实现。

更多信息请参阅

响应性API ​

响应性API 是与响应性相关的Vue核心函数集合。这些函数可以独立于组件使用。它包括 ref()、reactive()、computed()、watch() 和 watchEffect() 等函数。

响应性API是组合API的子集。

更多信息请参阅

ref ​

本条目介绍了如何使用 ref 实现响应性。有关模板中使用的 ref 属性，请参阅模板ref。

ref 是Vue响应性系统的一部分。它是一个包含单个响应性属性的对象，称为 value。

存在各种不同类型的ref。例如，可以使用 ref()、shallowRef()、computed() 和 customRef() 创建refs。函数 isRef() 可以用来检查一个对象是否是ref，而 isReadonly() 可以用来检查ref是否允许直接赋值。

更多信息请参阅

渲染函数 ​

渲染函数 是组件生成渲染期间使用的VNodes的部分。模板被编译成渲染函数。

更多信息请参阅

调度器 ​

调度器 是Vue内部控制响应性效果运行时间的一部分。

当响应性状态改变时，Vue不会立即触发渲染更新。相反，它会将它们一起分组使用队列。这确保了组件只重新渲染一次，即使对底层数据进行多次更改。

观察者 也使用调度器队列进行分组。具有 flush: 'pre'（默认）的观察者在组件渲染之前运行，而具有 flush: 'post' 的观察者将在组件渲染之后运行。

调度器队列中的作业还用于执行各种其他内部任务，例如触发一些 生命周期钩子 和更新 模板ref。

作用域插槽 ​

术语 作用域插槽 用来指代接收 属性 的 插槽。

从历史上看，Vue在作用域插槽和非作用域插槽之间做出了很大的区分。在某种程度上，可以将它们视为两个不同的功能，在共同的模板语法下统一起来。

在Vue 3中，插槽API被简化，使得所有插槽都表现得像作用域插槽。然而，作用域插槽和非作用域插槽的使用场景通常不同，因此这个术语仍然作为指代带有props的插槽的有用方式。

传递给插槽的props只能在父模板的特定区域内使用，该区域负责定义插槽的内容。这个模板区域作为props的变量作用域，因此得名“作用域插槽”。

更多信息请参阅

SFC ​

参见 单文件组件。

副作用 ​

术语“副作用”并不特指Vue。它用于描述超出其局部作用域的操作或函数。

例如，在设置属性如user.name = null的上下文中，预期这将改变user.name的值。如果它还做了其他事情，比如触发Vue的反应性系统，那么这将被描述为副作用。这是Vue中反应性副作用术语的起源。

当一个函数被描述为具有副作用时，意味着该函数执行了一些可以在函数外部观察到的动作，而不仅仅是返回一个值。这可能意味着它更新了状态中的值，或者触发了网络请求。

这个术语通常用于描述渲染或计算属性。渲染被认为没有副作用是最佳实践。同样，计算属性的getter函数也不应有副作用。

单文件组件 ​

术语“单文件组件”或SFC，指的是Vue组件常用的.vue文件格式。

参见

插槽 ​

插槽用于将内容传递给子组件。props用于传递数据值，而插槽用于传递更丰富的内容，包括HTML元素和其他Vue组件。

更多信息请参阅

模板引用 ​

术语“模板引用”指的是在模板内的标签上使用ref属性。组件渲染后，此属性用于将相应的属性填充为模板中标签对应的HTML元素或组件实例。

如果你使用的是Options API，那么refs通过$refs对象的属性暴露。

使用Composition API时，模板引用使用同名的响应式ref填充。

模板引用不应与Vue反应性系统中的响应式引用混淆。

更多信息请参阅

VDOM ​

参见 虚拟DOM。

虚拟DOM ​

术语“虚拟DOM”（VDOM）并不特指Vue。它是多个Web框架用于管理UI更新的常用方法。

浏览器使用节点树来表示页面当前状态。这个树和与之交互的JavaScript API被称为文档对象模型或DOM。

操作DOM是性能瓶颈之一。虚拟DOM提供了管理这一点的策略之一。

Vue组件不是直接创建DOM节点，而是生成它们希望创建的DOM节点描述。这些描述是普通的JavaScript对象，称为VNode（虚拟DOM节点）。创建VNode相对便宜。

每次组件重新渲染时，新的VNode树与之前的VNode树进行比较，然后将任何差异应用到实际的DOM上。如果没有变化，则不需要触摸DOM。

Vue采用了一种我们称之为编译器信息虚拟DOM的混合方法。Vue的模板编译器能够根据模板的静态分析应用性能优化。Vue不需要在运行时对组件的旧VNode树和新VNode树进行完整比较，而是可以使用编译器提取的信息，仅将比较减少到实际可以变化的树的部分。

更多信息请参阅

VNode ​

VNode是虚拟DOM节点。它们可以使用h()函数创建。

更多信息请见虚拟DOM。

Web Component ​

Web Components标准是一组在现代浏览器中实现的功能集合。

Vue组件不是Web Components，但可以使用defineCustomElement()从Vue组件创建一个自定义元素。Vue还支持在Vue组件中使用自定义元素。

更多信息请参阅

在GitHub上编辑此页