Vue 必背知识点

记住这几个点

• 状态是页面的来源，优先改状态，让渲染器更新页面。
• 模板负责声明展示关系，事件负责把用户操作转成状态变化。
• 响应式负责发现依赖变化，渲染器负责更新真实 DOM。
• v-model 是特定输入场景的绑定约定，组件 props 仍遵守单向数据流。

<script setup>
import { ref } from 'vue'
const name = ref('小林')
const editing = ref(false)
</script>

<template>
  <p>你好，{{ name }}</p>
  <input v-if="editing" v-model="name" />
  <button @click="editing = !editing">编辑</button>
</template>

常见追问：用了 Vue 后是不是完全不能操作 DOM？

可以在聚焦、测量尺寸或接入第三方库时使用模板引用操作 DOM。业务展示仍应由状态驱动，避免手动改页面内容后又被下一次渲染覆盖。

记住这几个点

• v-if 控制创建和销毁，初始条件为假时具有惰性。
• v-show 切换 display，元素和组件实例仍然存在。
• v-if 支持 template 分组与 v-else；v-show 不支持这两种写法。
• 频率只是选型线索，还要考虑内部状态、初始化资源与实际开销。

<script setup>
import { ref } from 'vue'
const showHelp = ref(false)
const showEditor = ref(false)
</script>

<template>
  <button @click="showHelp = !showHelp">帮助</button>
  <aside v-show="showHelp">常用操作说明</aside>
  <button @click="showEditor = !showEditor">编辑</button>
  <input v-if="showEditor" placeholder="重新打开会重建" />
</template>

常见追问：怎样让切换标签页时保留组件状态？

先明确是否需要持续挂载。简单区域可用 v-show；动态组件可考虑 KeepAlive，但被缓存的组件有激活与停用阶段，资源管理也要对应这些阶段。

记住这几个点

• key 表达兄弟节点中的稳定身份，业务 id 通常比数组下标合适。
• 涉及表单值、动画或子组件局部状态时，身份正确尤其重要。
• key 不能重复，不使用随机值或每次渲染重新生成的值。
• Vue 3 中同一元素的 v-if 优先于 v-for；先用 computed 筛选，或把条件移到外层。
• 性能取决于更新模式；稳定身份解决的是复用与状态正确性。

<script setup>
import { ref, computed } from 'vue'
const items = ref([
  { id: 'a', title: '响应式', done: false },
  { id: 'b', title: '组件通信', done: true }
])
const pending = computed(() => items.value.filter(x => !x.done))
</script>

<template>
  <label v-for="item in pending" :key="item.id">
    <input v-model="item.done" type="checkbox" />{{ item.title }}
  </label>
</template>

常见追问：Vue 3 的 diff 能怎样概括？

先判断节点类型与键能否复用，再更新属性和子节点。带键列表会匹配已有节点并处理增删移动，编译器也会标记动态部分，减少无需比较的内容。

记住这几个点

• JavaScript 中读写 ref 通常使用 .value。
• 模板上下文中的顶层 ref 在表达式里会自动解包。
• 普通对象的嵌套 ref 参与运算时要明确 .value，或先暴露为顶层绑定。
• 深层 reactive 对象的 ref 属性会解包，reactive 数组和 Map 的 ref 元素不会。

<script setup>
import { ref, reactive } from 'vue'
const count = ref(1)
const box = { count: ref(2) }
const list = reactive([ref(3)])
</script>

<template>
  <p>{{ count + 1 }}</p>
  <p>{{ box.count.value + 1 }}</p>
  <p>{{ list[0].value + 1 }}</p>
</template>

常见追问：v-bind 与双花括号插值有什么区别？

插值用于文本内容，动态属性要用 v-bind 或冒号简写。两者通常接收单个 JavaScript 表达式；复杂分支或有副作用的逻辑应放到计算属性或方法里。

记住这几个点

• Vue 2 使用 getter/setter；Vue 3 reactive 对象使用 Proxy，ref 仍使用访问器。
• Vue 3 使用 createApp 创建应用实例，插件与配置以应用为作用域。
• Vue 3 支持组件多根节点；多根组件需要明确处理属性透传。
• 组件 v-model 默认约定从 value/input 变为 modelValue/update:modelValue。
• Composition API 也内置于 Vue 2.7，不能只凭写法判断版本。

import { createApp, reactive } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.mount('#app')

const state = reactive({ title: 'Vue 3' })
state.extra = '新增属性可被追踪'
const tasks = reactive(['响应式'])
tasks[0] = '组件通信'
console.log(state.extra, tasks[0])

常见追问：Vue 3 为什么能减少一些渲染开销？

编译器会分析模板的静态和动态部分，生成静态提升、动态标记及区块结构，让运行时集中处理可能变化的内容。实际收益仍要结合页面结构和更新方式判断。

记住这几个点

• track 的前提是存在正在收集依赖的 effect；普通读取不等于一定建立订阅。
• 依赖可以概念化为 target → key → effects，实际内部结构会随版本优化。
• trigger 通知受影响的订阅；组件更新通常通过调度器批量执行。
• reactive 返回的是代理，应通过代理读写；直接修改原始对象会绕过拦截。
• ref 的 .value 使用访问器；当值为对象时，内部仍会转换为 reactive 代理。

import { reactive, watchEffect, nextTick } from 'vue'
const raw = { count: 0 }
const state = reactive(raw)
watchEffect(() => console.log('计数：', state.count))

async function demo() {
  state.count++ // 通过代理，安排副作用重新执行
  await nextTick() // 本轮日志打印 1
  raw.count++ // 绕过代理，不会安排新执行
  await nextTick() // 不会因这次写入新增日志
  console.log('实际值：', state.count) // 2
}
demo()

常见追问：条件分支变了，旧分支的依赖怎么办？

副作用重新执行时需要更新依赖关系，把本轮不再读取的依赖移除。否则旧分支的数据变化仍会产生无用通知，长期运行还可能积累多余订阅。

记住这几个点

• ref 支持任意值，对象值默认会转成深层响应式；整体更新用 .value。
• reactive 支持对象、数组、Map 等，更新时尽量保持代理引用。
• 解构基本值属性会得到快照；toRef/toRefs 让属性连接以 ref 形式保留。
• 传给 watch 或 composable 时，用 ref 或 getter 表达会变化的数据源。
• Vue 3.5 的 defineProps 解构有编译器支持，这是特定语法的例外。

import { ref, reactive, toRefs } from 'vue'

const profile = ref({ name: '小林' })
profile.value = { name: '小周' } // 容器仍在

const form = reactive({ name: '小林', age: 20 })
const { name, age } = toRefs(form)
name.value = '小周' // 同步修改 form.name
Object.assign(form, { name: '小陈', age: 21 })
console.log(name.value, age.value)

常见追问：为什么 watch(state.count, callback) 常常不对？

调用时传入的是普通数字，不是可追踪的数据源。可以改成 watch(() => state.count, callback)，或用 toRef(state, 'count') 得到属性引用。关键是保留读取属性的连接。

记住这几个点

• computed 表达派生关系，避免同时维护来源与派生结果两份状态。
• 缓存依据响应式依赖；Date.now() 本身不能触发重新计算。
• getter 保持纯计算，副作用放到事件处理或 watch 中。
• 需要双向映射时可提供 get/set，setter 修改来源状态。

import { ref, computed } from 'vue'

const items = ref([
  { title: 'ref', mastered: false },
  { title: 'computed', mastered: true }
])
const pending = computed(() => {
  return items.value.filter(item => !item.mastered)
})

console.log(pending.value.length)
items.value[0].mastered = true

常见追问：为什么 computed(() => Date.now()) 不会自动走动？

时间函数没有响应式依赖，计算结果不会因为时间过去而自行失效。如果需要时钟，应使用定时器更新一个 ref，并在组件卸载时清理定时器。

记住这几个点

• watch 追踪显式 source，不会因回调里读取另一个值就自动监听它。
• watchEffect 立即执行，只收集同步阶段依赖；第一个 await 是重要边界。
• onCleanup 可由回调参数取得；onWatcherCleanup 从 Vue 3.5 起支持，必须同步注册。
• 默认 flush 为 pre；post 适合读取本组件更新后的 DOM；sync 不批量去重。
• 深度监听可能有遍历成本，嵌套修改时新旧参数也可能引用同一个对象。

import { ref, watch } from 'vue'
const query = ref('')
const result = ref([])
watch(query, async (value, _, onCleanup) => {
  const controller = new AbortController()
  onCleanup(() => controller.abort())
  try {
    const response = await fetch(
      `/api/search?q=${encodeURIComponent(value)}`,
      { signal: controller.signal }
    )
    if (!response.ok) throw new Error('请求失败')
    const data = await response.json()
    if (!controller.signal.aborted) result.value = data
  } catch (error) {
    if (error.name !== 'AbortError') console.error(error)
  }
})

常见追问：监听器会自动停止吗？

在 setup 中同步创建并绑定组件的监听器会随组件卸载停止。异步回调里才创建的监听器可能没有这种绑定，应保留停止函数并主动清理。

记住这几个点

• 响应式值更新与 DOM 更新不是同一时刻，组件任务通常批量排队。
• 先改变状态，再 await nextTick，随后读取或操作更新后的 DOM。
• nextTick 与浏览器绘制、动画结束、接口返回分别属于不同等待条件。
• 连续同步修改通常合并；flush: 'sync' 的监听器是需要单独考虑的例外。

<script setup>
import { ref, nextTick } from 'vue'
const editing = ref(false)
const inputEl = ref(null)
async function startEditing() {
  editing.value = true
  await nextTick()
  inputEl.value?.focus()
}
</script>
<template>
  <button @click="startEditing">开始编辑</button>
  <input v-if="editing" ref="inputEl" />
</template>

常见追问：等待浏览器绘制或 CSS 动画结束该怎么做？

按真正需要的条件等待：下一帧调度可用 requestAnimationFrame，过渡结束使用相关事件或组件钩子。nextTick 仅负责 Vue 更新，不包含这些后续阶段。

记住这几个点

• props 向下传输入，emit 向上报告意图，状态拥有者负责真正更新。
• props 只读主要约束属性绑定；嵌套对象共享引用可能被子组件修改。
• 自定义组件事件只由直接监听该组件的使用者接收，不自动冒泡。
• Vue 3.5+ 会在同一 script setup 内转换 defineProps 的解构访问；跨函数传递仍推荐 getter。
• Vue 3.4 及更早版本，直接解构 props 的基本值没有这项编译支持。

<script setup>
import { computed } from 'vue'
const props = defineProps({ title: String, done: Boolean })
const emit = defineEmits(['toggle'])
const label = computed(() => props.done ? '已掌握' : '待复习')
</script>

<template>
  <button @click="emit('toggle')">
    {{ props.title }}：{{ label }}
  </button>
</template>

常见追问：子组件需要编辑表单，但点取消不能影响父组件怎么办？

在子组件建立明确的本地草稿，必要时对嵌套结构复制；提交时发出完整结果，取消时丢弃草稿。还要明确父输入变化时是否刷新草稿，避免静默覆盖编辑。

记住这几个点

• 默认契约是 modelValue 属性 + update:modelValue 事件。
• v-model:title 对应 title 属性 + update:title 事件，可同时绑定多个模型。
• defineModel 是 script setup 编译宏，Vue 3.4+ 推荐使用，不需要从 vue 导入。
• 修改 defineModel 返回的 ref 会通过模型契约更新父组件绑定值。
• 子端设置 default 而父端仍为 undefined，可能造成初始值不同步。

<!-- 子组件 TitleInput.vue，Vue 3.4+ -->
<script setup>
const title = defineModel('title', {
  type: String,
  required: true
})
</script>

<template>
  <input v-model="title" />
</template>
<!-- 父组件使用：<TitleInput v-model:title="title" /> -->

常见追问：Vue 3.4 之前怎么实现同样的组件？

显式声明对应 prop 和 update 事件：输入框的 value 读取 prop，input 回调 emit 新值。父组件的 v-model 会把这两部分连接起来，无需在子组件修改 prop。

记住这几个点

• 默认插槽用于未命名内容；具名插槽用 #name 或 v-slot:name 选择出口。
• 插槽内容使用父作用域，不能直接读取子组件未传出的内部变量。
• 作用域插槽通过 slot props 把子端数据提供给父端渲染。
• 无插槽内容时，出口可使用后备内容；数据行为与展示可因此分离。

<!-- 子组件 QuestionList.vue -->
<script setup>
defineProps({ items: { type: Array, default: () => [] } })
</script>
<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <slot name="row" :item="item">{{ item.title }}</slot>
    </li>
  </ul>
</template>
<!-- 父端使用 #row="{ item }" 自定义每行内容 -->

常见追问：什么时候会用无渲染组件？

当多个界面共享一套状态和行为，但展示结构差异很大时，可通过作用域插槽暴露状态与操作。若无需组件边界和插槽结构，composable 往往也能复用同样逻辑。

记住这几个点

• 后代按注入键读取最近祖先的提供值，减少层层透传。
• 传递 ref/reactive 才能保留对应响应式能力，注入的 ref 不自动解包。
• 状态修改集中在 provider，暴露操作函数，必要时用 readonly 约束消费方。
• 导出共享 Symbol 作为键，避免同名字符串碰撞；缺少 provider 时应明确默认值或报错。

// theme-context.js；两个函数分别由祖先和后代 setup 调用
import { ref, readonly, provide, inject } from 'vue'
export const themeKey = Symbol('theme')
export function provideTheme() {
  const theme = ref('light')
  function toggle() {
    theme.value = theme.value === 'light' ? 'dark' : 'light'
  }
  provide(themeKey, { theme: readonly(theme), toggle })
}
export function useTheme() {
  const context = inject(themeKey)
  if (!context) throw new Error('缺少主题提供方')
  return context
}

常见追问：provide/inject 和全局状态库怎么选？

前者适合组件子树内的上下文与依赖，范围随提供者确定；跨页面共享业务状态、需要统一调试和状态组织时可以用 Pinia。先按状态所有者与共享范围选择。

记住这几个点

• 按业务关注点组织逻辑，复用时明确输入、返回值和副作用。
• 通常返回普通对象包裹 refs，方便解构且不丢失引用连接。
• 函数内部创建的状态通常按调用独立；模块顶层状态由所有调用者共享。
• 监听、定时器和事件需对应清理；依赖组件上下文的 API 按上下文要求调用。
• Options API 仍可用；组合式写法不是函数式编程，也不是 React Hooks 的重渲染模型。

import { ref, computed } from 'vue'
export function useReviewCounter(initial = 0) {
  const completed = ref(initial)
  const hasProgress = computed(() => completed.value > 0)
  function increment() { completed.value++ }
  function reset() { completed.value = initial }
  return { completed, hasProgress, increment, reset }
}

// 在组件 setup 中调用；两次调用各自持有状态
const { completed, increment } = useReviewCounter()
increment()

常见追问：组合函数接收会变化的 prop，怎样避免只拿到快照？

传入 ref 或 getter，让函数在 computed/watchEffect 等追踪作用域里读取。可以使用 toValue 规范化输入，但要在副作用内部调用，才能收集 getter 中读取的依赖。

记住这几个点

• hash 片段不参与 HTTP 请求路径
• history 子路由需要服务器回退
• 静态资源与 API 保留各自处理规则
• 前端 404 页面与 HTTP 404 状态是两件事

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    { path: '/', component: () => import('./Home.vue') },
    { path: '/:pathMatch(.*)*',
      component: () => import('./NotFound.vue') },
  ],
})
// 服务器另行配置应用路由回退。

常见追问：history 模式部署到 /app/ 子目录要注意什么？

构建资源基础路径、createWebHistory 的 base 和服务器回退路径要一致。还要验证直接访问子路由、刷新、静态资源与后退操作。

记住这几个点

• 守卫可同步或异步返回结果
• 用路由 meta 声明页面访问要求
• 避免重复调用 next 或循环重定向
• 服务端逐次验证接口与资源权限

router.beforeEach(async (to) => {
  if (!to.meta.requiresAuth) return
  const allowed = await session.checkLogin()
  if (!allowed && to.name !== 'login') {
    return { name: 'login' }
  }
})
// session 为项目的会话服务。
// 后端接口仍需独立检查权限。

常见追问：beforeEach 与 beforeResolve 有什么区别？

beforeEach 更早执行；beforeResolve 在组件内守卫和异步路由组件解析后、导航确认前执行，适合只在确定能进入页面后做必要的数据准备。

记住这几个点

• useRoute 读取位置，useRouter 执行导航
• 参数变化可能复用现有组件
• 监听具体字段，避免监听整个 route
• watch 的 immediate 可处理首次数据加载

import { watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
watch(() => route.params.id, (id) => {
  console.log('当前用户 ID：', id)
}, { immediate: true })

function openUser(id) {
  return router.push({ name: 'user', params: { id } })
}

常见追问：什么时候使用路由 props？

当页面组件只需要某些参数时，把参数映射为 props 可以减少组件对路由器的直接依赖，让组件更容易复用和独立测试。

记住这几个点

• state 是数据，getter 是派生值，action 是业务操作
• storeToRefs 提取响应式状态和 getter
• action 可以直接解构调用
• Pinia 允许直接修改状态，也支持 $patch

import { defineStore, storeToRefs } from 'pinia'

const useCounter = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: { double: state => state.count * 2 },
  actions: { increment() { this.count++ } },
})

const store = useCounter()
const { count, double } = storeToRefs(store)
const { increment } = store
increment()

常见追问：Setup Store 需要注意什么？

返回的 ref 对应 state、computed 对应 getter、函数对应 action。所有状态应返回供 Pinia 识别，隐藏状态可能破坏 SSR、开发工具和插件工作。

记住这几个点

• 默认内存状态不等于持久化
• 按字段白名单保存，加入版本号
• 恢复前做 JSON 解析与数据结构校验
• SSR 中只在客户端访问浏览器存储

常见追问：$subscribe 与普通 watch 有什么差别？

Pinia 的订阅带有变更类型等信息，并能在一次函数式 $patch 后集中通知。在组件 setup 中注册的订阅默认随组件卸载解除；组件外或 detached 订阅应明确释放位置。

记住这几个点

• 生命周期钩子在 setup 调用链中同步注册
• mounted 不等于所有异步内容都已完成
• 等待本轮 DOM 更新用 nextTick
• 获取外部资源时就设计对应释放逻辑

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
const width = ref(0)
const measure = () => { width.value = window.innerWidth }
onMounted(() => {
  measure()
  window.addEventListener('resize', measure)
})
onUnmounted(() => {
  window.removeEventListener('resize', measure)
})
</script>
<template><p>宽度：{{ width }}</p></template>

常见追问：父子组件的 mounted 和 updated 顺序怎么理解？

父组件 mounted 等同步子组件挂载后执行；父组件 updated 在子组件 updated 后执行。异步组件和 Suspense 下的组件不纳入同样的同步挂载保证。

记住这几个点

• 区分发起顺序与完成顺序
• AbortController 可取消支持 signal 的请求
• 请求序号控制结果、错误与 loading 提交
• 组件离开或参数变化时处理旧请求

import { ref } from 'vue'
const result = ref(null)
const error = ref('')
let version = 0
async function search(keyword) {
  const current = ++version
  try {
    const response = await fetch('/api/search?q=' + encodeURIComponent(keyword))
    if (!response.ok) throw new Error('请求失败')
    const data = await response.json()
    if (current === version) result.value = data
  } catch (e) {
    if (current === version) error.value = e.message
  }
}

常见追问：既然可以取消，为什么还考虑结果有效性判断？

部分异步任务不可取消，取消也可能发生在响应到达以后。有效性判断明确限制谁可以提交状态，能覆盖请求取消之外的异步工作。

记住这几个点

• 清理上一轮资源，防止重复工作或过期写入
• onWatcherCleanup 要求 Vue 3.5+
• onWatcherCleanup 不能在 await 后注册
• 异步创建 watcher 时保存并调用停止函数

import { ref, watch, onWatcherCleanup } from 'vue'
const id = ref(1)
const user = ref(null)
watch(id, async (value) => {
  const controller = new AbortController()
  onWatcherCleanup(() => controller.abort())
  try {
    const response = await fetch('/api/users/' + value, { signal: controller.signal })
    if (!response.ok) throw new Error('加载失败')
    const data = await response.json()
    if (!controller.signal.aborted) user.value = data
  } catch (e) {
    if (e.name !== 'AbortError') console.error(e)
  }
}, { immediate: true })

常见追问：回调参数 onCleanup 也有同样的同步限制吗？

参数 onCleanup 绑定于当前侦听器实例，没有 onWatcherCleanup 的同样同步限制。不过请求发出前及时注册清理，仍能避免等待期间遗漏资源释放。

记住这几个点

• 停用不等于卸载，实例状态仍在
• activated 首次挂载也会执行
• deactivated 停用和卸载时均可能执行
• 限制缓存数量，避免长期保留大量页面

import { onActivated, onDeactivated } from 'vue'
let timer
function stop() {
  clearInterval(timer)
  timer = undefined
}
onActivated(() => {
  stop()
  timer = setInterval(() => console.log('轮询'), 5000)
})
onDeactivated(stop)

常见追问：include / exclude 根据路由 path 还是组件名称匹配？

根据组件 name 匹配。使用 script setup 的单文件组件在 Vue 3.2.34 起可从文件名推断名称；需要精确控制时应明确检查最终组件名称。

记住这几个点

• 异步组件负责组件代码加载
• Suspense 管理特定的异步依赖
• 普通 onMounted 请求不自动成为依赖
• 错误可由父组件 onErrorCaptured 等机制处理

常见追问：Suspense 包裹异步组件时，组件自己的 loading 配置还生效吗？

默认受 Suspense 管理的异步组件由边界控制加载状态，自己的 loading、error、delay、timeout 选项会被忽略；可设 suspensible: false 退出该控制。

记住这几个点

• 模板编译产生 render 函数
• 首次渲染创建 DOM 并收集依赖
• 状态更新经过调度与 patch
• 静态缓存和 patch flags 减少运行时工作

常见追问：为什么 Vue 模板容易做编译优化？

模板结构相对确定，编译器能分析哪些节点和属性会变化，并给运行时提供提示。手写任意 render 函数时，很多静态信息难以提前判断。

记住这几个点

• 先判断更新原因，再决定优化方式
• 把共享 activeId 转成每项 active 状态
• 避免无意义的新对象或数组 props
• 组件内部响应式状态变化仍可触发更新

<script setup>
import { ref } from 'vue'
import ListItem from './ListItem.vue'
const activeId = ref(1)
const items = ref([{ id: 1 }, { id: 2 }])
</script>
<template>
  <ListItem v-for="item in items" :key="item.id"
    :id="item.id" :active="item.id === activeId" />
</template>

常见追问：什么时候考虑 v-once 或 v-memo？

v-once 适合挂载后完全不再变化的内容；v-memo 适合已测出瓶颈且能完整声明变化依赖的区域。先稳定数据与 props，再使用这些局部优化。

记住这几个点

• 先建立可重复的慢操作场景
• 区分下载、执行、更新与布局成本
• 虚拟列表减少实际 DOM，不减少原始数据
• 记录优化前后耗时与内存证据

常见追问：虚拟列表有什么实现难点？

需要维护内容总高度、可视索引和占位偏移，动态行高还需要测量与校正。还要验证键盘导航、焦点保留、滚动定位和可访问性。

记住这几个点

• 代码分割不等于删除代码
• tree shaking 依赖可分析的模块结构
• 页面组件可以使用路由动态 import
• 验证首屏请求和生产包体积

const routes = [
  {
    path: '/reports',
    name: 'reports',
    component: () => import('./views/Reports.vue'),
  },
]
// Vue Router 直接接收动态 import 加载函数。
// 无需为路由组件再套 defineAsyncComponent。

常见追问：所有小组件都拆成异步组件合适吗？

拆分过细会增加调度和加载复杂度，弱网下也可能增加等待。优先拆分重页面和不常使用的大功能，依据实际加载链和使用频率确定边界。

记住这几个点

• 服务端输出 HTML，客户端恢复交互
• 首次渲染数据与结构必须协调
• window 和 DOM API 不在服务端直接访问
• 按请求创建应用和用户状态

常见追问：SSR 中 onMounted 会执行吗？

onMounted 等 DOM 相关生命周期不会在服务端执行。依赖浏览器的操作放在客户端钩子；不要在服务端 setup 中启动依赖卸载钩子清理的长期定时器。

记住这几个点

• Vue 2 对象新增删除需要特殊处理
• Vue 2 数组索引和长度修改有限制
• Vue 3 不再需要 Vue.set / Vue.delete
• 迁移按功能回归并核对第三方插件

常见追问：Vue 2 项目可以一次性改成 Composition API 吗？

迁移不要求重写所有组件，Vue 3 仍支持 Options API。可以先解决不兼容 API 和生态依赖，再根据维护价值逐步拆分复用逻辑。

记住这几个点

• 外部资源必须有对应清理动作
• 注册和移除监听使用同一函数引用
• 缓存停用与真正卸载分别处理
• 稳定重复场景后比较堆快照

常见追问：为什么异步创建 watcher 要特别小心？

它未必自动绑定到组件的同步 setup 生命周期。需要保存 watch 返回的 stop，在拥有者销毁时调用；优先同步创建并用条件控制执行内容。

记住这几个点

• 插值转义不覆盖所有注入场景
• 不可信内容不作为模板执行
• 富文本经过适当清洗后才能渲染
• 服务端验证身份、操作和资源归属

<script setup>
import { ref } from 'vue'
const comment = ref('<img src=x onerror=alert(1)>')
</script>
<template>
  <!-- 插值作为文本显示，不执行其中的 HTML -->
  <p>{{ comment }}</p>
</template>

常见追问：过滤脚本标签就能安全渲染富文本吗？

不够，事件属性、危险 URL 和复杂 HTML 解析场景仍可形成风险。应使用适合场景且持续维护的清洗方案，并保留服务端验证与防护。

记住这几个点

• 按输入、操作和可观察输出组织用例
• 验证 props、事件、插槽及条件界面
• 异步测试等待实际完成条件
• 避免只有快照或只断言内部实现

常见追问：组件测试与端到端测试如何分工？

组件测试快速验证一个组件及其交互；端到端测试在真实浏览器走完整流程，覆盖路由、状态管理、资源和请求集成。按失败影响选择关键流程。

记住这几个点

• 场景：用户在哪一步受到什么影响
• 证据：怎么复现并定位瓶颈
• 方案：为什么选择及放弃什么做法
• 结果：验证效果、边界与回归情况

常见追问：被追问优化没有收益时怎么回答？

说明原假设、测量结果和排除原因，再给出调整方向。能诚实解释无效尝试和证据，比把每种技术都描述为显著提升更可信。