Vue3响应式避坑与组件通信

一、不要滥用响应式对象

1. 核心定义

只将需要驱动视图（DOM）更新或引发跨组件副作用的数据转化为响应式（ref/reactive）。避免劫持复杂的第三方实例、海量静态数据以及内部临时变量。

2. 滥用后果

• 性能衰减：深层响应式（Deep Reactivity）递归遍历嵌套属性，导致内存飙升、CPU 高频依赖收集引起掉帧卡顿。
• 破坏第三方库：强行将 ECharts、地图 SDK、Canvas 实例转为 Proxy 代理，会丢失原型链、方法出错或破坏其内部逻辑。
• 逻辑陷阱：易在 watch 或 computed 中引发无限循环渲染或数据引用错乱（Proxy === 原始对象 返回 false）。

3. 正确避坑指南

API	用途
shallowRef()	浅层响应式 —— 只对 .value 的变更做响应，不递归劫持内部属性
shallowReactive()	浅层响应式 —— 只对对象根属性做响应式代理
markRaw(obj)	标记对象永不被转为响应式代理 —— 适合挂载在 reactive 内部的第三方实例
toRaw(proxy)	从 Proxy 中取出原始对象 —— 调试或传给第三方库时使用
Object.freeze()	冻结数据 —— 配合 shallowRef 让 Vue 完全跳过劫持

• 长列表/只读死数据：使用 shallowRef() 进行浅层响应式，或用 Object.freeze() 冻结数据。
• 第三方类实例：用 shallowRef() 存储并用 markRaw() 包裹实例，或直接在组件中用普通的 let 声明变量。
• 临时变量（定时器 ID、计数器等）：直接用普通变量记录，不需要被 Vue 跟踪。

markRaw 典型场景

import { reactive, markRaw } from 'vue'

const state = reactive({
  chartInstance: null
})

// 初始化 ECharts / 地图实例
state.chartInstance = markRaw(echarts.init(dom))
// 不加 markRaw，第三方实例被 Proxy 代理后，内部 this 绑定全乱

海量只读列表：v-memo 配合优化

<div v-for="item in hugeList" :key="item.id" v-memo="[item.id, item.updatedAt]">
  <ExpensiveRow :data="item" />
</div>

v-memo 缓存子树，仅当依赖项变化时才重新渲染，大幅减少 VNode Diff 开销。

---

二、Vue 3 绑定多个 v-model

1. 默认 v-model 的本质

<!-- 这两个完全等价 -->
<Child v-model="val" />
<Child :modelValue="val" @update:modelValue="val = $event" />

明确这个关系后，带参数的 v-model:xxx 就是自然扩展。

2. 核心语法

通过 v-model:参数名 实现。

• 父组件：v-model:first-name="firstName"
• 子组件接收：props: ['firstName']
• 子组件更新：emit('update:firstName', newValue)

3. 标准代码实现

<!-- 父组件 Parent.vue -->
<template>
  <UserName v-model:first-name="firstName" v-model:last-name="lastName" />
</template>

<script setup>
import { ref } from 'vue'
import UserName from './UserName.vue'
const firstName = ref('张')
const lastName = ref('三')
</script>

<!-- 子组件 UserName.vue -->
<template>
  <input :value="firstName" @input="emit('update:firstName', ($event.target as HTMLInputElement).value)" />
  <input :value="lastName" @input="emit('update:lastName', ($event.target as HTMLInputElement).value)" />
</template>

<script setup>
defineProps({ firstName: String, lastName: String })
defineEmits(['update:firstName', 'update:lastName'])
</script>

4. 自定义修饰符（Modifiers）

<!-- 父组件 -->
<UserName v-model:first-name.capitalize="firstName" />

<!-- 子组件 -->
<script setup>
const props = defineProps({
  firstName: String,
  firstNameModifiers: { default: () => ({}) }  // 约定命名：prop名 + "Modifiers"
})

const emit = defineEmits(['update:firstName'])

function emitValue(val) {
  if (props.firstNameModifiers.capitalize) {
    val = val.charAt(0).toUpperCase() + val.slice(1)
  }
  emit('update:firstName', val)
}
</script>

---

三、组件显式暴露：defineExpose

1. 核心定义

Vue 3 <script setup> 中的组件默认是关闭的。父组件通过 ref 拿不到子组件内部的任何变量或方法。必须使用 defineExpose 显式暴露。

2. 常见场景

控制弹窗（open/close）、表单校验（validate()）、触发子组件动画。

3. 代码示例

<!-- 子组件 Child.vue -->
<script setup>
import { ref } from 'vue'
const visible = ref(false)
const open = () => { visible.value = true }

// 显式暴露给外部，外部使用时 visible 会自动解包（无需加 .value）
defineExpose({ open, visible })
</script>

<!-- 父组件 Parent.vue -->
<template>
  <Child ref="childRef" />
  <button @click="childRef?.open()">打开弹窗</button>
</template>

<script setup>
import { ref } from 'vue'
import Child from './Child.vue'
const childRef = ref(null) // 变量名必须与标签上的 ref 属性同名（模板中写 kebab-case，JS 中写 camelCase）
</script>

4. ref 命名对应关系

<Child ref="childRef" />          <!-- 模板中使用 kebab-case -->

const childRef = ref(null)         // JS 中必须 camelCase，且与 ref 属性对应

5. TypeScript 类型安全写法

<!-- 子组件 -->
<script setup lang="ts">
const open = () => { /* ... */ }
const visible = ref(false)

defineExpose({ open, visible })
</script>

<!-- 父组件 -->
<script setup lang="ts">
import Child from './Child.vue'

// 方式一：自动推导子组件暴露类型
const childRef = ref<InstanceType<typeof Child>>(null)

// 方式二：手动定义接口
const childRef = ref<{ open: () => void; visible: boolean }>(null)
</script>

设计原则： defineExpose 是"紧急逃生门"，不是主入口。如大量使用，说明组件拆分或状态管理设计可能需要重新审视。

---

四、妙用 computed 拦截 v-model

1. 核心定义

利用可读写计算属性的 get 和 set 配置，将 v-model 的"双向绑定"假象在内部拆解为规范的"单向数据流"（Props Down, Events Up）。

2. 工作原理（两头瞒骗）

• get()：当输入框需要展示内容时，读取并返回 props.modelValue。
• set(val)：当用户输入企图修改值时，拦截修改动作，不直接改 props，而是通过 emit('update:modelValue', val) 汇报给父组件。

3. 最佳实践代码

<!-- 子组件 Child.vue -->
<template>
  <!-- 对 input 而言，它觉得自己是在和普通变量 localValue 玩双向绑定 -->
  <input v-model="localValue" />
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

// 核心拦截器
const localValue = computed({
  get: () => props.modelValue,                 // 读：向 props 要值
  set: (val) => emit('update:modelValue', val)  // 写：不篡改，只通过 emit 向上汇报
})
</script>

4. 核心优势（对比 watch 方案）

1. 代码精简：不需要定义额外的临时 ref，也不需要写两套 watch 监听。
2. 免除死循环：computed 是同步声明式的，天生免疫"父改子、子改父"带来的异步死循环问题。
3. 完美契合三方库：这也是绑定 Pinia 全局状态、处理前后端数据格式不一致时的最优雅解法。

5. 进阶实战场景

场景 1：多个 v-model 同样适用

<script setup>
const props = defineProps(['firstName', 'lastName'])
const emit = defineEmits(['update:firstName', 'update:lastName'])

const localFirst = computed({
  get: () => props.firstName,
  set: (val) => emit('update:firstName', val)
})
const localLast = computed({
  get: () => props.lastName,
  set: (val) => emit('update:lastName', val)
})
</script>

场景 2：格式转换（数组 ↔ 逗号字符串）

// 父组件传数组，input 展示逗号分隔的字符串
const tagsString = computed({
  get: () => props.tags.join(', '),                              // 数组 → 字符串
  set: (val) => emit('update:tags', val.split(',').map(s => s.trim()))  // 字符串 → 数组
})

场景 3：绑定 Pinia 状态（双向绑定 store）

import { useUserStore } from '@/stores/user'

const userStore = useUserStore()

// 通过 computed 桥接到 v-model，通过 action 修改保持单向数据流
const localName = computed({
  get: () => userStore.name,
  set: (val) => userStore.setName(val)
})

6. 注意事项：getter 必须无副作用

// ❌ 错误：在 getter 里修改别的 ref 或发请求
get: () => {
  counter.value++           // 副作用！
  fetchSomething()          // 副作用！
  return props.modelValue
}

// ✅ getter 只做纯计算/读取
get: () => props.modelValue

---

五、快速对照表

API / 模式	适用场景	误区 / 注意事项
ref()	基本类型、需要整体替换的值	.value 在模板中自动解包，JS 中需手动
reactive()	对象/数组，多个关联属性	不能整体替换，解构会丢失响应式
shallowRef()	第三方实例、海量只读数据	仅 .value 变更触发更新
markRaw()	挂载在 reactive 内的第三方对象	标记后永不代理，不可逆
toRaw()	调试、传原始对象给第三方库	仅脱去 Proxy，不改变对象本身
computed({ get, set })	拦截 v-model、格式转换、Pinia 绑定	getter 禁止副作用
defineExpose()	父调子方法、访问子状态	应急手段，勿滥用
v-model:arg	多值双向绑定	modifiers 命名约定：arg + Modifiers
v-memo	大列表中跳过不变行的 Diff	依赖数组越精确越好