在 Vue3 的世界里，语法是我们构建用户界面的基石。今天， 我们继续 上一节 的内容: Vue3 模板语法详解(一) 详细了解 Vue3 的语法，我将用通俗易懂的语言和实用的例子，带你掌握这项必备技能。

1、 指令

指令是带有 前缀的特殊 attribute。Vue 提供了许多内置指令，包括前面我们所介绍的 和 。

指令 attribute 的期望值为一个 JavaScript 表达式 (除了少数几个例外，即之后要讨论到的 、 和 )。

(1)、v-if 、v-for、v-on指令

演示案例：

运行效果：

点击切换可见性按钮后的效果：

(2) 、参数 Arguments

某些指令需要一个“参数”，在指令名后通过一个冒号隔开做标识。

例如用 指令来响应式地更新一个 HTML attribute：

这里 就是一个参数，它告诉 指令将表达式 的值绑定到元素的 attribute 上。

在简写中，参数前的一切 (例如 ) 都会被缩略为一个 字符。

另一个例子是 指令，它将监听 DOM 事件：

这里的参数是要监听的事件名称：。

有一个相应的缩写，即 字符。

(3)、动态参数

同样在指令参数上也可以使用一个 JavaScript 表达式，需要包含在一对方括号内：

这里的 会作为一个 JavaScript 表达式被动态执行，计算得到的值会被用作最终的参数。

如果有一个数据属性 ，其值为 ，那么这个绑定就等价于 。

相似地，还可以将一个函数绑定到动态的事件名称上：

在此示例中，当 的值是 时， 就等价于 。

注意事项：

• 动态参数中表达式的值应当是一个字符串，或者是 。特殊值 意为显式移除该绑定。其他非字符串的值会触发警告。
• 动态参数表达式因为某些字符的缘故有一些语法限制，比如空格和引号，在 HTML attribute 名称中都是不合法的。
  例如下面的示例：

• 当使用 DOM 内嵌模板 (直接写在 HTML 文件里的模板) 时，需要避免在名称中使用大写字母，浏览器会强制将其转换为小写：

上面的例子将会在 DOM 内嵌模板中被转换为 。如果组件拥有 “someAttr” 属性而非 “someattr”，这段代码将不会工作。单文件组件内的模板不受此限制。

2、响应式函数

（1）、函数

• 在组合式 API 中，推荐使用 []函数来声明响应式状态。

接收参数，并将其包裹在一个带有 属性的 ref 对象中返回：

• 要在组件模板中访问 ref，请从组件的 函数中声明并返回它们：

• 在模板中使用 ref 时，我们不需要附加 ，在模板中使用时，ref 会自动解包：

• 对于更复杂的逻辑，我们可以在同一作用域内声明更改 ref 的函数，并将它们作为方法与状态一起公开。

• 暴露的方法可以被用作事件监听器:

• 如果将一个新的 ref 赋值给一个关联了已有 ref 的属性，那么它会替换掉旧的 ref：

• 当 ref 作为响应式数组或原生集合类型 (如 ) 中的元素被访问时，它不会被解包：

• 在模板渲染上下文中，只有顶级的 ref 属性才会被解包

• 如果 ref 是文本插值的最终计算值 (即 标签)，那么它将被解包，因此以下内容将渲染为 ：

该特性仅仅是文本插值的一个便利特性，等价于

也许很多人会好奇，为什么需要使用带有 .value 的 ref，而不是普通的变量？

这是因为在 Vue 3 中，使用 创建的响应式引用与普通的变量相比，具有几个关键的区别和优势，这就是为什么在构建响应式应用程序时推荐使用 而不是普通变量。

• 响应式系统
  创建的变量是响应式的，这意味着当它们的值发生变化时，Vue 的响应式系统可以检测到这些变化，并自动更新依赖于这些变量的 DOM。这是 Vue 核心功能之一，它允许开发者以声明式的方式编写用户界面。
• 普通变量
  普通变量不是响应式的如果你在组件的方法或计算属性中直接使用普通变量，那么当变量的值发生变化时，Vue 将无法检测到这些变化，因此不会触发视图的更新。
• 访问原始值
  使用 创建的响应式变量通常通过 属性访问其原始值。这是因为 实际上是一个包含响应式值的容器。通过 访问值可以确保 Vue 能够追踪值的读取操作，这是实现响应式依赖跟踪的关键部分。

• 模板中的使用
  在 Vue 模板中，可以直接使用 变量，而不需要 ，因为 Vue 的模板编译器会自动处理 访问。这意味着在模板中，你可以像使用普通变量一样使用 变量。

• JavaScript 中的一致性
  在 JavaScript 中，使用 确保了无论在模板还是 JavaScript 代码中，访问 的方式都是一致的。这种一致性简化了代码的理解和维护。
• 避免意外修改
  直接使用 变量而不是普通变量，可以避免意外修改原始数据结构，因为 变量的修改需要显式地通过 进行，这有助于防止意外的副作用。

（2）、 函数

reactive() 与将内部值包装在特殊对象中的 ref 不同， 将使对象本身具有响应性。

将深层地转换对象：当访问嵌套对象时，它们也会被 包装。当 ref 的值是一个对象时， 也会在内部调用它。与浅层 ref 类似，这里也有一个 API 可以选择退出深层响应性。

• 在模板中使用

• 返回的是一个原始对象的Proxy，它和原始对象是不相等的：

• 只有代理对象是响应式的，更改原始对象不会触发更新。因此，使用 Vue 的响应式系统的最佳实践是仅使用你声明对象的代理版本。
• 对同一个原始对象调用 会总是返回同样的代理对象，而对一个已存在的代理对象调用 会返回其本身：

注意事项

• reactive() 有限的值类型
  它只能用于对象类型 (对象、数组和如 、 这样的集合类型。它不能持有如 、 或 这样的原始类型。
• 不能替换整个对象
  由于 Vue 的响应式跟踪是通过属性访问实现的，因此我们必须始终保持对响应式对象的相同引用。这意味着不能轻易地“替换”响应式对象，因为这样的话与第一个引用的响应性连接将丢失：

• 对解构操作不友好
  当我们将响应式对象的原始类型属性解构为本地变量时，或者将该属性传递给函数时，将丢失响应性连接：

• ref 作为 reactive 对象的属性
  一个 ref 会在作为响应式对象的属性被访问或修改时自动解包。换句话说，它的行为就像一个普通的属性：

由于这些限制，建议使用 作为声明响应式状态的主要 API。

(2)、setup() 函数

• 在 函数中手动暴露大量的状态和方法非常繁琐。

• 我们可以使用 来大幅度地简化代码：

对比

• 语法简洁性： 更加简洁，因为它省去了 函数的显式定义和返回值。它使得组件的逻辑更加集中和易于理解。
• 代码组织：在 中，所有的响应式数据和方法都直接定义在 标签内部，而在 中，你需要显式返回这些数据和方法。
• 兼容性： 函数在 Vue 3 的所有版本中都可用，而 需要 Vue 3.2 或更高版本。
• 工具支持：由于 是较新的语法糖，一些旧的工具或编辑器可能不支持或需要额外配置才能正确识别它。
• TypeScript 支持：在 中使用 TypeScript 时，你可能需要额外的类型声明或调整，因为 会将所有内容视为同一个作用域。

3 、VUE3 DOM 更新时机

在 Vue 3 中，DOM 的更新时机与 Vue 的响应式系统和渲染机制紧密相关。以下是 Vue 3 中 DOM 更新的几个关键时机：

• 初始化渲染： 当 Vue 应用启动并且根组件被挂载到 DOM 上时，Vue 会进行第一次渲染，这个过程称为初始化渲染。在这个阶段，Vue 会根据组件的模板和响应式状态生成初始的 DOM。
• 响应式数据变化： 当响应式数据发生变化时，Vue 的响应式系统会跟踪这些变化，并触发相应的更新。Vue 3 使用了 Proxy 来实现响应式系统，它可以精确地追踪到每个响应式状态的读取和修改。
• 和 ： 当你使用 或 函数来观察响应式数据时，当被观察的数据发生变化，Vue 会执行相应的回调函数。在这些回调函数中，可以执行副作用操作，如 DOM 更新。
• 生命周期钩子： 组件的生命周期钩子，如 ，会在 DOM 更新完成后被调用。这允许你在 DOM 更新后执行特定的操作。
• ： Vue 提供了 函数，允许你延迟执行回调直到下次 DOM 更新循环之后。这在手动更改了 DOM 后等待 Vue 更新 DOM 时非常有用。
• 异步组件： 当使用异步组件时，DOM 更新将等待异步组件被解析并渲染。异步组件通常在 函数中定义。
• 和 ： 使用 或 指令时，Vue 会根据表达式的值来决定是否渲染元素或切换元素的显示状态。这些变化会导致 DOM 的更新。
• 数组变化检测： 当响应式数组发生变化时（如通过索引直接设置元素、修改数组长度等），Vue 会检测到这些变化并更新 DOM。
• 方法： 组件实例的 方法可以强制重新渲染组件，这将触发 DOM 的更新。
• 变化： 在使用 渲染列表时，如果列表中元素的 发生变化，Vue 会重新渲染整个列表，导致 DOM 更新。

Vue 3 的虚拟 DOM 机制和响应式系统确保了只有当必要的数据发生变化时，才会触发相应的 DOM 更新，这样可以提高性能并减少不必要的操作。