vue 技巧与易错

文章目录

解构
响应式
- - [为什么需要响应式 API？](#为什么需要响应式 API？)
  - [核心响应式 API 及作用](#核心响应式 API 及作用)
  - 响应式的核心原理
  - 总结
文本插值语法

解构

JavaScript 的 对象解构赋值 语法，作用是从对象中快速提取指定属性，并赋值给同名变量。

javascript 复制代码

const user = { name: '张三', age: 20 }

// 解构赋值：从 user 中提取 name 属性，赋值给变量 name
const { name } = user 

// 等价于：
const name = user.name 

// 区别于下面，下面的name就变为和user一样的对象了
const name = user

响应式

在 Vue 中，响应式 API 是指一系列能够将数据转换为"响应式数据"的工具（如 reactive、ref、computed 等）。它们的核心作用是建立数据与视图之间的自动关联：当数据发生变化时，依赖该数据的视图会自动更新，无需手动操作 DOM。

为什么需要响应式 API？

在传统开发中，修改数据后需要手动更新 DOM（比如 document.getElementById('xxx').innerText = newData），既繁琐又容易出错。而 Vue 的响应式 API 让开发者可以专注于数据逻辑，视图更新由框架自动完成。

核心响应式 API 及作用

Vue3 中常用的响应式 API 包括：

reactive

将对象/数组 转为响应式代理对象，使其属性的读写、新增、删除都能被追踪，修改时触发视图更新。

示例：
javascript 复制代码
```
import { reactive } from 'vue'
const user = reactive({ name: '张三' })
user.name = '李四' // 视图自动更新
```
ref

将基本类型数据 （字符串、数字、布尔等）或对象转为响应式数据。对于基本类型，ref 会包装成一个带 .value 属性的对象；对于对象，内部会自动用 reactive 处理。

示例：
javascript 复制代码
```
import { ref } from 'vue'
const count = ref(0)
count.value++ // 修改时需通过 .value，视图自动更新
```
computed

创建基于现有响应式数据的"计算属性"，其值会根据依赖自动更新，且具有缓存特性（依赖不变时不会重复计算）。

示例：
javascript 复制代码
```
import { ref, computed } from 'vue'
const count = ref(1)
const doubleCount = computed(() => count.value * 2) // 依赖 count
count.value = 2 // doubleCount 自动变为 4
```
watch 与 watchEffect

监听响应式数据的变化，执行自定义逻辑（如数据变化后发送请求、更新其他数据等）。
- watch：需明确指定监听的数据源，更灵活。
- watchEffect：自动追踪依赖的数据源，简化写法。
  示例：
javascript 复制代码
```
import { ref, watch } from 'vue'
const count = ref(0)
watch(count, (newVal) => {
  console.log('count 变了：', newVal) // count 变化时执行
})
```

响应式的核心原理

Vue3 的响应式基于 ES6 Proxy 代理 实现：

当使用 reactive 或 ref 包装数据时，Vue 会创建一个"代理对象"，拦截数据的读写、修改等操作。
当数据被读取时（如在模板中使用），Vue 会记录"谁在使用这个数据"（依赖收集）。
当数据被修改时，Vue 会通知所有依赖该数据的地方（如组件、计算属性）重新执行或渲染（触发更新）。

总结

响应式 API 是 Vue 框架的核心能力之一，它通过自动追踪数据变化并更新视图，大幅简化了前端开发流程。开发者只需关注数据逻辑，无需手动操作 DOM，从而提高开发效率和代码可维护性。常用的 reactive、ref、computed、watch 等 API 共同构成了 Vue 的响应式系统。

文本插值语法

在 Vue 模板中，{``{ count }} 是文本插值语法 ，作用是将响应式数据 count 的值渲染到页面上，并且会随着 count 的变化自动更新。

具体理解：

{``{ }} 是 Vue 的文本插值语法

它的作用是告诉 Vue："这里需要插入一个 JavaScript 表达式的值，并显示在页面上"。

模板在解析时，会把 {``{ }} 内部的内容当作 JavaScript 表达式执行，然后将结果转换为字符串，插入到对应的 DOM 位置。
count 是响应式数据

在前面的示例中，count 是通过 ref 定义的响应式数据（const count = ref(1)）。
- 初始时，count.value 的值是 1，所以 {``{ count }} 会渲染为 1。
- 当 count.value 被修改（比如 count.value = 2）时，Vue 会自动检测到这个变化，并重新计算 {``{ count }} 的值，将页面上的内容更新为 2。
与非响应式数据的区别

如果 count 是普通变量（非 ref/reactive 定义），比如 const count = 1，那么 {``{ count }} 只会在初始渲染时显示 1，后续即使修改 count 的值（count = 2），页面也不会更新------因为普通变量不具备响应性，Vue 无法追踪其变化。