vue3要点+面试题

vue3介绍以及生态简介

1.Vue3 的核心特性与相较于 Vue2 的改进

性能提升：Vue3 引入了新的虚拟 DOM (去头尾的最长递增子序列算法)算法，使得渲染效率更高，特别是在大型应用中表现尤为突出。​
Composition API：使得逻辑复用和组织更加灵活，取代了 Vue2 中的 Options API。​
TypeScript 支持：Vue3 对 TypeScript 的原生支持更加完善，提供了更好的类型推断和开发体验。​
更小的体积：Vue3 的核心库相比 Vue2 更小，同时提高了运行时性能。​
允许多个根节点和跨 DOM 节点传送组件内容。

2.Vue3 与 TypeScript 的结合优势

类型安全：TypeScript 可以保证组件和属性的类型安全，避免潜在的类型错误。​
自动推导：TypeScript 对 Vue3 的 Composition API 提供了自动类型推导，减少了手动声明类型的负担。​
更好的开发体验：TypeScript 提供的自动补全和类型检查增强了开发效率和代码可维护性。

3.Vue3 的使用场景及行业应用

单页应用（SPA）：利用 Vue3 的路由和状态管理可以很方便地构建 SPA。​
管理系统：如企业后台管理系统，可以利用 Vue3 的响应式和组件化特性。​
电商平台：Vue3 可以帮助开发快速响应的电商网站，尤其适合需要高交互性的应用。

4.Composition API 和 Script Setup

Options API：通过固定的选项（如 data、methods、computed 等）组织逻辑，适合小型项目。​
Composition API：通过函数组合组织逻辑，增强了代码的复用性和可读性，适合大型复杂项目。​

5.Script Setup 的优势与语法规则

更简洁：不需要 export default，直接在 <script setup> 中编写逻辑。​
更高效：消除了组件实例的开销，性能更优。​
语法规则： ​
直接使用 ref 和 reactive 创建状态。​
可以使用 defineProps 和 defineEmits 定义组件接口。
vue3 setup 里面没有this this = undefined

6.计算属性和侦听器

computed计算属性

用于根据其他响应式数据派生出新的数据，具备缓存特性。依赖数据变化时，自动重新计算。

• 自动缓存：依赖数据不变时，多次使用计算属性只会执行一次，比函数性能高
• 响应式：依赖的ref/reactive变化，计算属性自动更新
• 只读默认：直接修改只读计算属性会报警告，需要可写必须用get/set
• 不能异步：计算属性内部不能写异步代码（axios、定时器等）

<template> 全名：{{ fullName }} <button @click="fullName = '张三 李四'">修改全名</button> </template> <script setup> import { computed, ref } from 'vue' const firstName = ref('张') const lastName = ref('三') // 可写计算属性 const fullName = computed({ // 读取时触发（必写） get() { return firstName.value + ' ' + lastName.value }, // 修改时触发（必写） set(newVal) { // 把新值拆分，修改原始数据 const [fn, ln] = newVal.split(' ') firstName.value = fn lastName.value = ln } }) </script>

1.为什么要有缓存

计算属性通常用来做复杂逻辑、过滤、排序、求和这些操作一般开销不小页面渲染、组件更新又很频繁如果每次都重新算，页面会变卡，依赖没变就不重新计算，多次使用只算一次，提升性能。它依赖的值变了才会重新计算，Vue 把 computed 当成“带缓存的 getter 函数”，内部给它做了依赖收集和脏值标记。

2.为什么不能异步操作

因为 computed 是同步的、有返回值的，你调用它 → 它马上给你一个结果，必须立刻返回值，异步做不到，要缓存结果，异步结果不稳定、不可缓存，要追踪依赖，异步会打断依赖收集

watch 和 watchEffect 实现动态侦听

• watch：侦听指定数据，变了才执行（懒执行，默认不触发）
• watchEffect：自动收集依赖，立即执行一次，依赖变了再执行（自动侦听）

1.watch：手动指定要侦听谁

• 必须明确告诉它侦听谁能拿到新值 + 旧值默认初始不执行，数据变了才跑

<script setup> import { ref, watch } from 'vue' const count = ref(0) // 侦听 count watch(count, (newVal, oldVal) => { console.log('count变了：', newVal) }) </script>

2. 侦听多个数据源

watch([count, name], ([newCount, newName], [oldCount, oldName]) => { // 任意一个变了都执行 })

3.侦听 reactive 对象

const user = reactive({ name: 'zs', age: 18 }) // 侦听整个对象 watch(user, () => {}) // 侦听对象里的某个属性（必须用函数返回） watch(() => user.age, () => {})

4. 立即执行（重要！）

immediate(因眉垫特):true

watch(count, () => { // 页面加载就执行 }, { immediate: true })

5. 深度监听（对象内部变化）

deep(低噗):true

watch(user, () => {}, { deep: true })

1.watchEffect(已饭特)：自动侦听

不用指定侦听谁！代码里用到谁就自动侦听谁！

特点: 自动收集依赖 立即执行一次（页面加载就跑）不用写数据源，不用写immediate拿不到旧值

<script setup> import { ref, watchEffect } from 'vue' const count = ref(0) const name = ref('') // 自动侦听：count 和 name watchEffect(() => { console.log(count.value) console.log(name.value) }) </script>

动态侦听是什么？怎么实现？

动态侦听 = 依赖会变化，侦听器自动跟着变

watch 和 watchEffect 都能实现，但 watchEffect 天生支持动态侦听

1. watchEffect 实现动态侦听（最简单）

const id = ref(1) const data = ref(null) watchEffect(async () => { // 用到了 id，自动侦听 id // id 变 → 自动重新执行 const res = await fetch(`/api/${id.value}`) data.value = await res.json() })

自动动态侦听：你在回调里用到的响应式数据变了，就重新执行。

2. watch 实现动态侦听（需要手动写）

const id = ref(1) watch( () => id.value, // 侦听这个 async () => { const res = await fetch(`/api/${id.value}`) data.value = await res.json() }, { immediate: true } )

watch 必须手动指定数据源，所以是 “半自动”。

用 watch 的场景：

• 需要新值、旧值
• 只需要侦听特定一个 / 几个变量
• 不想一开始就执行

用 watchEffect 的场景：

• 侦听多个数据源，懒得一个个写
• 需要一开始就执行（比如初始化请求）
• 依赖会动态变化（动态侦听）

nextTick()

是Vue提供的一个异步方法，用于在下次 DOM更新循环结束后执行延迟回调。nextTick 确保在 DOM 更新完成后执行回调。 数据变了 → DOM 不会立刻更 → nextTick 等它更完 → 再操作 DOM

代码示例 v-if 显示后操作 DOM / 聚焦 input

<template> <input v-if="show" ref="inputRef" type="text"> <button @click="showInput">显示并聚焦</button> </template> <script setup> import { ref, nextTick } from 'vue' const show = ref(false) const inputRef = ref(null) async function showInput() { show.value = true // 直接拿会是 null，因为 DOM 还没渲染 // inputRef.value.focus() 报错 await nextTick() // DOM 渲染完成，可以操作 inputRef.value.focus() } </script>

代码示例 列表更新后滚动到底部

list.value.push(newItem) await nextTick() window.scrollTo(0, document.body.scrollHeight)

v-model 双向绑定

Vue 2 里是 :value + @input，在 Vue 3 标准化成 :modelValue + @update:modelValue，还支持 v-model:title 这种多 v-model 用法。
v-model 本质是「一个 prop + 一个 事件 的语法糖」

vue3 常用的钩子函数

1.生命周期钩子函数

• beforeCreate / created →直接写在 setup 中
• beforeMount →onBeforeMount挂载前
• mounted →onMounted挂载完成(请求接口、操作 DOM、第三方库初始化)
• beforeUpdate →onBeforeUpdate更新前
• updated →onUpdated更新完成
• beforeUnmount →onBeforeUnmount销毁前
• unmounted →onUnmounted销毁完成（清除定时器、事件解绑、防止内存泄漏

2.缓存组件（keep-alive）

onActivated

• 组件被激活时执行（进入页面）
• 只有被<keep-alive>缓存才会触发

onDeactivated

• 组件失活时执行（离开页面）

3.响应式核心钩子函数

• ref：基础类型响应式

• reactive：对象 / 数组响应式

• computed：计算属性，带缓存

• watch：手动监听，可获取新旧值

• watchEffect：自动收集依赖，立即执行

• watchPostEffect：DOM 更新后执行

• watchSyncEffect：同步执行（极少用）

• toRef / toRefs：把 reactive 转 ref，保持响应式

4.组件通信钩子函数

• defineProps：接收父组件传值
• defineEmits：子组件向父派发事件
• defineModel：快速实现 v-model（Vue 3.4+）
• defineExpose：子组件暴露方法 / 属性给父组件
• provide / inject：祖孙组件传值

vue3 插槽

插槽： 让父组件可以往子组件里塞 HTML 结构

1.默认插槽（匿名插槽）

子组件 DefaultSlot.vue

<template> <div> <h3>默认插槽组件</h3> <slot> <p>父组件没传内容，我就显示</p> </slot> </div> </template>

父组件中使用

<DefaultSlot> <p>我是父组件塞进来的内容</p> <button>按钮</button> </DefaultSlot>

2. 具名插槽

子组件 NamedSlot.vue

<template> <div> <header> <slot name="header"></slot> </header> <main> <slot></slot> </main> <footer> <slot name="footer"></slot> </footer> </div> </template>

父组件中使用

<NamedSlot> <template #header> <span>我是头部</span> </template> <template #default> <p>我是主体内容</p> </template> <template #footer> <span>我是底部版权</span> </template> </NamedSlot>

3. 作用域插槽（最常用）

子组件 ScopeSlot.vue

<template> <div> <h3>作用域插槽</h3> <div v-for="item in list" :key="item.id"> <slot name="item" :row="item"></slot> </div> </div> </template> <script setup> import { reactive } from 'vue' const list = reactive([ { id: 1, name: '张三', age: 20 }, { id: 2, name: '李四', age: 21 }, { id: 3, name: '王五', age: 22 } ]) </script>

父组件中使用

<ScopeSlot> <template #item="{ row }"> <span>姓名：{{ row.name }}，年龄：{{ row.age }}</span> <button @click="handleClick(row)">编辑</button> </template> </ScopeSlot> <script setup> const handleClick = (row) => { console.log('点击了：', row) } </script>

• 默认插槽：<slot></slot>
• 具名插槽：name="xxx"+#xxx
• 作用域插槽：:row="item"传值，#item="{ row }"接收

vue3修饰符

修饰符就是 Vue 提供的 “语法糖”，用来简化常见 DOM 操作、事件处理、表单逻辑，不用自己写原生 JS 代码

1. 事件修饰符（@click、@submit 等）

• .stop阻止冒泡
• .prevent阻止默认行为
• .once只触发一次
• .self只点自己才触发

2. 按键修饰符（键盘事件）

• .enter回车
• .esc退出
• .ctrl/.shift/.alt

3. v-model 修饰符（表单）

• .trim去空格
• .number转数字
• .lazy失焦再同步

vue3路由

路由模式

1.hash 模式（哈希模式）

createWebHashHistory()

• 路径带#，例如：/#/home
• 兼容性最好
• 不需要后端配置

原理

• 核心 API：hashchange事件
• #后面的内容变化不会向服务器发请求
• 路由监听hashchange→ 截取路径 → 匹配组件 → 渲染<router-view>
• 完全前端控制，无刷新切换页面

2.history 模式

createWebHistory()

• 路径不带#，例如：/home
• 更美观
• 刷新会 404，必须配置 nginx 重定向
• location / { try_files(饭噢) $uri $uri/ /index.html; # 找不到文件时指向 index.html

原理

• 核心 API：history.pushState / replaceState+popstate事件
• pushState可以修改 URL 但不刷新页面
• 路由监听到 URL 变化 → 匹配组件 → 渲染组件
• 浏览器前进后退触发popstate事件更新视图

路由守卫

1.全局守卫

用途：登录校验、权限控制、页面标题修改

// 进入前 router.beforeEach((to, from) => {}) // 进入后 router.afterEach((to, from) => {})

2. 路由独享守卫

用途：某个路由单独的权限判断

{ path: '/user', beforeEnter: (to, from) => {} }

3. 组件内守卫（setup 写法）

import { onBeforeRouteEnter, onBeforeRouteUpdate, onBeforeRouteLeave } from 'vue-router'

• onBeforeRouteEnter：进入组件前
• onBeforeRouteUpdate：路由更新但组件复用时（如 /user/1 → /user/2）
• onBeforeRouteLeave：离开当前页面前（防未保存退出）

路由对象

1.router路由实例对象

通过useRouter()获取，用来操作路由（跳转、前进后退、添加路由等）。

<script setup> import { useRouter } from 'vue-router' const router = useRouter() </script>

常用属性 & 方法

• router.push('/home')→ 跳转路由（新增历史记录）
• router.replace('/home')→ 替换当前路由（不留历史）
• router.go(n)→ 前进 / 后退 n 步
• router.back()→ 后退
• router.forward()→ 前进
• router.addRoute()→ 动态添加路由
• router.removeRoute()→ 删除路由
• router.currentRoute→ 当前路由（响应式对象)

2.route当前路由对象

通过useRoute()获取，用来获取当前路由信息（只读）。

<script setup> import { useRoute } from 'vue-router' const route = useRoute() </script>

route.path // 路径，如 /user/123
route.fullPath // 完整路径（包含 query）
route.name // 路由名称
route.params // 动态路由参数 /:id → { id: 123 }
route.query // 查询参数 ?a=1&b=2 → { a:1, b:2 }
route.meta // 路由元信息
route.matched // 匹配到的路由记录数组（包含父路由）
route.hash // 哈希 # 后面的内容

路由传参

一、路径拼接（最简单）

// 跳转 router.push('/user/' + id) // 接收 const route = useRoute() route.params.id

二、params传参（动态路由）

1. 路由配置 { path: '/user/:id', name: 'User', component: User } 2. 跳转 router.push({ name: 'User', // 必须用 name，不能用 path params: { id: 123 } }) 3. 接收 const route = useRoute() console.log(route.params.id) // 123

三、query传参（? 后面的参数）

跳转 js router.push({ path: '/user', query: { id: 123, name: 'zs' } }) 地址变成：/user?id=123&name=zs 接收 js route.query.id route.query.name

四、state隐式传参（刷新丢失）

跳转

router.push({ name: 'User', state: { userInfo: { name: '张三', age: 20 } } })

接收

history.state.userInfo

• 地址栏看不见
• 刷新页面数据丢失