# Vue 3 响应式系统 ## 概述 Vue 是一个渐进式的前端框架，所谓渐进式就是“可以被逐步集成”的意思，按照需求可以构建简单的静态页面，也可以构建复杂的终端应用： - 无需构建步骤，渐进式增强静态的 HTML - 在任何页面中作为 Web Components 嵌入 - 单页应用 (SPA) - 全栈 / 服务端渲染 (SSR) - Jamstack / 静态站点生成 (SSG) - 开发桌面端、移动端、WebGL，甚至是命令行终端中的界面 ### 创建项目 使用以下命令创建一个 Vue 项目 ```shell npm create vue@latest ``` 根据脚手架可以一步步生成项目： ```shell # 请输入项目名称: project-name # 请选择要包含的功能： TypeScript JSX 支持 Router (单页面应用开发) Pinia (状态管理) Vitest (单元测试) 端到端测试 ESLint (错误预防) Prettier (代码格式化) ``` ### 项目组成 项目创建时会生成 `index.html`，这便是网页的入口，在 `index.html` 中会创建一个 `id` 为 `app` 的 `div`，并通过 `/src/main.ts` 向 `div` 中添加内容。 ```html Vite App
``` 在 `main. ts` 中会创建如下内容，从 `vue.js` 中加载 `createApp` 函数，调用该函数，传入 `./App.vue` 文件，并将加载的内容挂载到 `id` 为 `app` 的 `div` 中： ```typescript import { createApp } from 'vue' import App from './App.vue' const app = createApp(App) app.mount('#app') ``` `.vue` 文件称为组件，在 Vue 3 项目中有大量这样的组件，Vue 3 使用组合式 API，单独定义每个组件中的模板、事件和样式，并将它们组合起来，形成完整的项目。 在单个 `.vue` 文件中，一般需要定义有如下三个 `html` 块，在 `template` 块中定义该组件的模板，使用 `html` 语言来书写，在 `script` 块中定义该组件的事件，可以使用 `js` 或者 `ts` 来书写，在 `style` 块中定义该组件的样式，使用 `css` 样式来书写： ```vue ``` ### 生命周期 Vue 3 的组件从创建到渲染到移除有如下的生命周期，经历 `setup`、`create`、`mount`、`update` 和 `unmount` 几个步骤： ![](https://img.papergate.top:5000/i/2026/01/695eebdd8bc7e.webp) - `setup` 是最开始的步骤，对应 `` 中的 `setup`，在这里会初始化组合式 API。 - `create` 对应 `const app = createApp(App)`，在这里会初始化选项式 API，选项式 API 多在 Vue 2 项目中使用，通过兼容选项式 API，Vue 3 项目实现了对 Vue 2 项目的支持。 - `mount` 对应 `app.mount('#app')`，实现了页面的渲染，也就是创建和插入 DOM 节点的过程。 - `update` 在数据变化时触发，重新渲染页面。在 `setup` 和 `create` 步骤中初始化的 API，对数据进行包装并加入钩子函数，实现数据变化的监听。 - `unmount` 用于在取消挂载后移除页面的渲染。 ## 响应式系统 ### `setup` 函数 在 Vue 3 中，最重要的就是其相应式系统，它实现了数据的双向绑定，在上面的 `.vue` 文件中，定义了 ``，这里的写法是一种“语法糖”，完整的写法如下： ```vue ``` `setup` 函数通过 `export` 导出，便可以通过 `import App from './App.vue'` 获取，Vue 3 框架调用方法便可以获取返回值 `count`，并在渲染模板时将 `{{ count }}` 替换为 `count` 变量的值。 通过语法糖，上面的代码可以简写为： ```vue ``` ### `ref` 函数 上面的代码中用到了 `ref` 函数，`ref` 函数对其包裹的变量进行包装，函数会创建一个名为 `RefImpl` 的对象，对象的 `value` 就是包裹的变量。 ![](https://img.papergate.top:5000/i/2026/01/695f095d8f16b.webp) Vue 3 通过 `RefImpl` 的 ` getter ` 和 ` setter ` 函数，实现数据的双向绑定，监听到数据变化时，重新渲染页面的 DOM 节点；DOM 节点变化时，调用 `setter` 函数修改 `RefImpl` 的值。 ```vue ``` 在 `templtae` 中使用 `RefImpl` 对象时，不需要输入 `.value`，Vue 3 会对 `RefImpl` 对象自动解包，而在 `script` 中，获取 `RefImpl` 的值需要 `.value`，不会自动解包。 ### `reactive` 函数 对对象类型数据进行双向绑定时，除了可以使用 `ref` 函数外还可以使用 `reactive` 函数： ```vue ``` `reactive` 函数会创建 `Proxy` 对象，通过 `Proxy` 对象实现数据的双向绑定。在 `script` 中获取 `Proxy` 的值不需要 `.value`。 ![](https://img.papergate.top:5000/i/2026/01/695f0ff53f30d.webp) `ref` 函数也可以用于对象类型数据，这种情况下 `RefImpl` 的 `value` 就是 `Proxy` 对象，使用 `ref` 函数创建对象类型数据的包装类时，在 `script` 中获取 `RefImpl` 的值仍然是需要 `.value` 的。 ![](https://img.papergate.top:5000/i/2026/01/695f117a25614.webp) ### `toRefs` 与 `toRef` 函数 有时候我们需要对 `RefImpl` 或者 `Proxy` 进行解包，取出其中的每一个元素，并进行修改，如果我们这样写： ```typescript const person = reactive({ name: '张三', ability: { strength: 80, intelligence: 90, }, equipments: ['拳套', '轻甲', '帽子'], }) let { name, ability } = person console.log(name) console.log(ability) name = '李四' ability.intelligence = 70 console.log(person.name) console.log(person.ability.intelligence) ``` 就会发现基本类型数据解包后失去了与原 `Proxy` 的关联，而对象类型数据还保留了关联。 ![](https://img.papergate.top:5000/i/2026/01/695f15612f5e0.webp) `toRefs` 函数就是用来解决这一问题的： ```typescript const {name, ability} = toRefs(person) console.log(name) console.log(ability) ``` 可以看到，不管是基本类型数据还是对象类型数据，都被转成了 `ObjectRefImpl` 对象，和原 `Proxy` 保留了关联。 ![](https://img.papergate.top:5000/i/2026/01/695f179dce3e6.webp) 如果 `person` 是 `RefImpl` 类型，需要这样写： ```typescript const { name, ability } = toRefs(person.value) console.log(name) console.log(ability) ``` 返回值同样是 `ObjectRefImpl` 对象。 > [!info] 信息 > 这里需要注意的是，如果使用 `ref` 函数包裹深层对象，那么使用 `toRefs` 进行解包后每一层的对象依然是 `RefImpl` 类型，在语法上具有一致性，对象不会中途变成 `Proxy` 类型。那么如果总是使用 `ref` 函数，那么 `Proxy` 类型就不会出现。所以不使用 `reactive` 函数，而是全部用 `ref` 来替代，就是一种常见的偷懒手段。 `toRef` 函数使用方式类似，可以解包某一特定的元素： ```typescript const name = toRef(person.value, 'name') console.log(name) ``` ### 计算属性 如果一个属性不是从页面或者后端获取到，而是通过其他属性的值计算出来的，就可以使用计算属性来定义一个全新的属性： ```vue ``` `computed` 有 `getter` 和 `setter` 方法，上面代码中直接用箭头函数定义计算方法，属于是重写了 `getter` 方法，`computed` 函数相比于普通函数的优势在于，其能监听它自身 `getter` 方法内部其他的 `getter` 方法的调用（比如 `firstName. value`），当 `firstName` 和 `lastName` 没有变化时，即便调用多次 `{{ fullName }}`，`computed` 的 `getter` 方法只会返回上一次的结果，而不会重新计算。也就是，上面的 `console.log(1)` 只会输出一次。 `getter` 方法中可以获取上一次的值，方法是在箭头函数中增加对应的参数名： ```typescript const fullName = computed((previous) => {}) ``` `computed` 还可以设置 `setter` 方法，当 `setter` 方法调用时，可以修改其他属性的值。 ```typescript const fullName = computed({ get() { return `${firstName.value} ${lastName.value}` }, set(newValue: string) { const [first = '', last = ''] = newValue.split(' ') firstName.value = first lastName.value = last }, }) ``` ### 属性绑定 `template` 中 DOM 节点的属性可以绑定 `script` 中的变量 #### ID 绑定 使用 `v-bind:id` 来进行 `id` 的绑定，这样 `div` 的 `id` 就设置成了 `container`： ```vue ``` 因为 `v-bind` 非常常用，Vue 3 对 `v-bind` 提供了简写语法： ```vue ``` 这里非常特殊，属性名称和 `script` 中的变量名相同，Vue 3 提供了进一步的简化语法： ```vue ``` #### class 绑定 `:class` 和 `class` 可以同时存在，Vue 3 会自动将它们合并，大多数的布局、外观的定义可以放到 `class` 中，少数状态可以放到 `:class` 中。语法上 `:class` 可以传入的数据非常灵活，可以是字符串、对象、数组，也可以是它们的组合： ```vue ``` #### style 绑定 `:style` 和 `style` 也可以同时存在，也会自动合并，语法上，`:style` 可以传入的数据同样非常灵活： ```vue ``` > [!info] 信息 > 其他的 HTML 标签的属性，都可以通过前面加 `:` 的方式转变为 Vue 3 中可绑定的属性，两者的区别在于，不加 `:` 的属性是 HTML 标签的属性，会当成普通字符串进行解析，而加了 `:` 的属性会作为变量或者表达式进行解析，Vue 3 会获取其值并渲染到 DOM 元素中。 #### 绑定多个属性 使用 `v-bind` 可以一次绑定多个属性： ```vue ``` ### 条件渲染 `v-if`、`v-else-if`、`v-else` 指令用于条件渲染，只有当对应的表达式为真时，对应的 DOM 节点才会渲染，否则不会出现在页面中。 ```vue ``` `v-show` 功能类似，区别在于 `v-if`、`v-else-if`、`v-else` 在条件为 ` false ` 的时候不会渲染，只有当条件为 ` true ` 时才会渲染，而 ` v-show ` 无论条件是否为 ` true ` 都会渲染，但是条件为 ` false ` 时，` display: none `。 ### 列表渲染 对于可遍历的对象，可以使用 `v-for` 方法获取其每一个元素： ```vue ``` ### 事件处理 可以使用 `v-on` 指令来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。 ```vue ``` `v-on` 指令可以简写为 `@`： ```vue ``` #### 事件修饰符 一般 DOM 事件会经历 3 个阶段： - 捕获阶段：`window / document -> ... -> target.parent` - 目标阶段：`event.target` - 冒泡阶段：`parent -> ... -> document / window` 为了简化处理 DOM 事件的细节，Vue 3 提供了事件修饰符： | 修饰符 | 作用 | 常见用法 | | ---------- | ------ | ------------------------------------------ | | `.stop` | 阻止冒泡 | 内部按钮，不想触发父级点击 | | `.prevent` | 阻止默认行为 | 阻止表单刷新，阻止 `` 跳转 | | `.self` | 只响应自身 | 避免子元素误触 | | `.capture` | 捕获阶段 | 全局拦截 | | `.once` | 只触发一次 | 一次性操作，防止重复提交 | | `.passive` | 性能优化 | 不会调用 `preventDefault()`，不能和 `.prevent` 一起用 | 事件修饰符的使用方法如下： ![](https://img.papergate.top:5000/i/2026/01/6960942d29ea8.webp) ```vue ``` #### 按键修饰符 按键修饰符包括鼠标按键和键盘按键： - 鼠标按键修饰符有 `.left` 、`.right` 和 `middle` - 键盘按键修饰符比较多，比如有修饰键 `.ctrl`、`.alt`、`.shift` 和 `.meta`，以及一些没有实体字符的按键 `.esc` 、`.tab` 、`.space`、`delete` (捕获 `Delete` 和 `Backspace` 两个按键)、`.up`、`.down`、`.left`、`.right` 比如可以有如下用法： ```vue