前端知识库进阶篇 - vueVue相关笔试/面试题目全集一、核心原理与基础概念二、指令相关三、组件开发四、状态管

一、核心原理与基础概念

Vue的响应式原理
Vue通过依赖收集和异步更新队列实现响应式。
- Object.defineProperty（Vue 2）：劫持对象属性的getter/setter，当数据变化时触发视图更新。
- Proxy（Vue 3）：更灵活地拦截对象操作，支持深层监听。
- 过程：组件渲染时递归依赖数据，形成依赖关系图；数据变动时通知所有依赖者（Watcher）触发更新。

生命周期钩子函数

钩子名	时机	用途
`beforeCreate`	实例初始化前	初始化数据、事件等
`created`	实例创建完成后	数据就绪，可访问`this`
`beforeMount`	模板编译前	组件尚未挂载到DOM
`mounted`	模板渲染后	执行DOM操作
`beforeUpdate`	数据更新前	获取旧状态
`updated`	数据更新后	更新完成，可执行后续逻辑
`beforeDestroy`	销毁前	清理事件、定时器等
`destroyed`	销毁后	所有资源已释放

v-if vs v-show
- v-if：条件为假时不渲染元素（不在DOM中），适合频繁切换的场景（如切换页面）。
- v-show：条件为假时隐藏元素（通过CSS控制），适合频繁切换且元素体积大的场景。
- 性能：v-if切换开销大，v-show切换开销小。
Vue实例挂载过程
1. 初始化：解析配置项（data、methods等），创建组件实例。
2. 编译模板：将模板转换为渲染函数（Render Function）。
3. 生成虚拟DOM：调用render()得到初始虚拟节点树。
4. 挂载阶段：调用vm.$mount()，将虚拟DOM渲染为真实DOM，并插入目标容器。
5. 触发生命周期钩子：依次执行mounted及后续钩子。
Vue.js的特点
- 声明式编程：通过模板描述UI与数据的关联。
- 组件化：可复用的独立单元，提升开发效率。
- 响应式数据绑定：数据与视图自动同步。
- 虚拟DOM：优化频繁的DOM操作。
- 生态丰富：集成路由（Vue Router）、状态管理（Vuex）等工具。
MVVM模式
- Model：数据模型（如数据库或API返回的数据）。
- View：用户界面（HTML/CSS/JS）。
- ViewModel：双向绑定桥梁，监听Model变化并更新View，响应View操作修改Model。
- Vue实现：
  - Vue实例作为ViewModel，管理data（Model）和逻辑。
  - 双向绑定通过v-model指令实现（如表单输入与数据的实时同步）。
data必须是函数的原因
- 避免引用共享：若data是对象，多个组件实例会共享同一数据副本，导致互相污染。
- 独立实例：函数每次调用返回新对象，确保每个组件拥有独立的数据空间。
- 例外：根实例可直接用对象，因其唯一且无父子组件共享数据的需求。
异步更新队列机制
- 目的：批量处理数据变更，减少DOM操作次数。
- 流程：
  1. 数据变化时，将更新操作推入队列（非立即执行）。
  2. 在下一个事件循环周期（如setTimeout、事件回调）统一处理队列中的更新。
- 场景：高频触发的事件（如窗口滚动）中，多次数据修改仅需一次DOM更新。
虚拟DOM与Diff算法
- 虚拟DOM：轻量级对象树，描述真实DOM结构。
- Diff算法：对比新旧虚拟DOM树的差异（同层节点优先比对），生成补丁（Patch）。
- 优势：避免直接操作真实DOM，大幅提高渲染性能。
- 关键点：只更新变化的节点及其子树，而非整个树。
key的作用
- 唯一标识元素：在列表渲染中，key帮助Vue识别每个节点的身份。
- 优化更新逻辑：
  - 当顺序不变时，相同key的节点会被复用，保留原有状态（如输入框内容）。
  - 当顺序变化时，根据key重新排序并匹配新旧节点，避免错误复用。
- 示例：
```
<ul>
  
  <li v-for="item in items">{{ item.text }}</li>
</ul>


<ul>
  <li v-for="item in items" :key="item.id">{{ item.text }}</li>
</ul>
```

二、指令相关

11. v-model指令的原理及表单元素使用

原理：v-model 是 v-bind（双向数据绑定）和 v-on（事件监听）的语法糖，实现输入值与数据的实时同步。
- 对于输入元素（如 <input>、<textarea>），通过监听 input 事件更新数据。
- 对于复选框/单选按钮，绑定 checked 属性并监听 change 事件。

不同表单元素的使用：

<!-- 文本框 -->
<input v-model="message" type="text">

<!-- 复选框 -->
<input v-model="isChecked" type="checkbox">

<!-- 下拉选择框（需绑定value属性） -->
<select v-model="selected">
  <option value="A">Option A</option>
</select>

<!-- 多选框（数组绑定） -->
<select v-model="selectedMultiple" multiple>
  <option value="A">Option A</option>
</select>

12. Vue常用内置指令

指令	作用	示例
`v-bind`	动态绑定属性（简写为 `:`）	`<div :class="activeClass"></div>`
`v-on`	监听事件（简写为 `@`）	`<button @click="handleClick"></button>`
`v-for`	列表渲染	`<li v-for="item in items">{{ item}}</li>`
`v-if`	条件渲染（不渲染DOM）	`<div v-if="show">Content</div>`
`v-show`	条件显示（通过CSS控制显示）	`<div v-show="show">Content</div>`
`v-text`	替换内容	`<div v-text="text"></div>`
`v-html`	插入HTML内容	`<div v-html="htmlContent"></div>`
`v-pre`	跳过编译，保留原始内容	`<div v-pre>{{ raw }}</div>`
`v-cloak`	隐藏未编译的模板（需CSS配合）	`<div v-cloak>...</div>`
`v-once`	单次渲染，后续更新不重新渲染	`<div v-once>{{ staticText }}</div>`

13. 自定义指令的钩子函数

自定义指令通过 Vue.directive() 注册，包含以下钩子函数：

bind：指令第一次绑定到元素时调用（初始化逻辑）。
inserted：元素插入父节点后调用（DOM已就位）。
update：指令所在组件的VNode更新时调用（可能多次触发）。
componentUpdated：指令所在组件的子VNode全部更新后调用。
unbind：指令与元素解绑时调用（清理逻辑）。

示例：

Vue.directive('focus', {
  bind(el) {
    el.focus(); // 绑定时聚焦元素
  },
  unbind(el) {
    console.log('指令解绑');
  }
});

14. 事件修饰符与按键修饰符

事件修饰符（控制事件行为）：
- .stop：阻止事件冒泡（如点击子元素不触发父事件）。
```
<div @click.stop="handleOuter">
  <button @click="handleInner">Click me</button>
</div>
```
- .prevent：阻止默认行为（如表单提交跳转）。
```
<form @submit.prevent="submitForm">
```
- .capture：使用捕获模式触发事件（优先触发子事件）。
- .once：仅触发一次事件。
按键修饰符（绑定键盘事件）：
- .enter：回车键触发。
```
<input @keyup.enter="submitForm">
```
- .tab：Tab键触发。
- .shift：配合其他键（如.shift+left左移选中文本）。

15. v-for为何绑定key？最佳实践

原因：
1. 唯一标识：帮助Vue快速识别节点身份，避免重复渲染或状态错乱。
2. 优化更新：当列表顺序变化时，通过key重新匹配新旧节点，减少不必要的DOM操作。

最佳实践：

使用唯一且稳定的值作为key（如数据库ID），而非index（尤其列表可能变动时）。

<!-- 推荐 -->
<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

<!-- 不推荐（索引不稳定）-->
<ul>
  <li v-for="(item, index) in items" :key="index">{{ item.name }}</li>
</ul>

16. v-pre、v-cloak、v-once的作用

v-pre：跳过当前节点及其子节点的编译，直接输出原始内容（提升渲染速度）。
```

<div v-pre>{{ message }}</div>
```

v-cloak：隐藏未编译的模板（避免页面闪烁），需配合CSS display: none。

<style>
  [v-cloak] { display: none; }
</style>
<div v-cloak>{{ message }}</div>

v-once：标记元素只渲染一次，后续数据变化不再更新（适用于静态内容）。
```
<div v-once>{{ staticContent }}</div>
```

三、组件开发

17. 如何创建Vue组件（全局/局部/单文件组件）？

全局组件（Vue 3）：

const MyComponent = { /* ... */ };
app.component('MyComponent', MyComponent);

局部组件（在父组件内定义）：

export default {
  components: {
    LocalComponent: { /* ... */ }
  }
};

单文件组件（.vue）：

<!-- MyComponent.vue -->
<template>
  <div>Hello World</div>
</template>

<script>
export default {
  name: 'MyComponent'
};
</script>

18. 组件间通信的常用方式

方式	适用场景	示例
Props/Events	父子组件通信（单向数据流）	父组件通过`props`传递数据，子组件通过`$emit`触发事件。
$refs	直接访问子组件实例（需保证子组件已渲染）	`this.$refs.child.method()`
Vuex/Pinia	复杂应用的全局状态管理	通过`store`集中管理共享数据。
Provide/Inject	跨层级组件通信（无需逐层传递）	祖先组件`provide`数据，后代组件`inject`使用。
Event Bus	简单跨组件事件广播（非推荐主流方案）	创建一个全局事件总线 `$bus`，通过`$bus.$emit`触发事件。

19. props的验证机制和默认值设置

验证机制（Vue 3）：

export default {
  props: {
    // 类型检查 + 必填性
    name: { 
      type: String, 
      required: true 
    },
    // 自定义验证函数
    age: {
      type: Number,
      validator: (value) => value >= 18
    }
  }
};

默认值：

props: {
  message: {
    type: String,
    default: 'Hello' // 函数需返回默认值
  },
  count: {
    type: Number,
    default: () => 0
  }
}

20. $parent/$ children与$refs的使用场景

$parent：访问父组件实例（需谨慎使用，避免紧耦合）。
```
// 子组件中调用父方法
this.$parent.handleParentMethod();
```
$children：获取子组件列表（不推荐直接操作，建议通过事件或插槽通信）。
```
// 父组件中遍历子组件
this.$children.forEach(child => console.log(child));
```

$refs：获取DOM元素或组件实例（需在mounted后使用）。

<child-component ref="myChild"></child-component>
<script>
  mounted() {
    this.$refs.myChild.doSomething();
  }
</script>

21. provide/inject的实现原理和使用场景

原理：基于依赖注入，祖先组件通过provide暴露数据，后代组件通过inject注入使用。
使用场景：
- 跨多层组件共享工具类（如TooltipService）。
- 全局主题配置（如颜色、字体）。

示例：

// 祖先组件
export default {
  provide() {
    return { themeColor: 'blue' };
  }
};

// 后代组件
export default {
  inject: ['themeColor'],
  mounted() {
    console.log(this.themeColor); // 'blue'
  }
};

22. 如何实现递归组件？

关键点：组件模板中调用自身，需通过终止条件避免死循环。

示例：

<template>
  <div>
    {{ content }}
    <recursive-component v-if="hasChildren" :content="childContent" />
  </div>
</template>

<script>
export default {
  name: 'RecursiveComponent',
  props: ['content', 'hasChildren', 'childContent']
};
</script>

23. 动态组件的实现方式及注意事项

实现方式：

<!-- 使用component标签 + is属性 -->
<component :is="currentComponent" :props="dynamicProps"></component>

// 定义动态组件
const components = {
  ComponentA,
  ComponentB
};

注意事项：
1. 组件名称大小写敏感：需与注册时的名称完全一致。
2. 预加载组件：可通过async setup或loading状态处理加载过程。
3. 错误处理：使用errorCaptured捕获组件渲染错误。

24. keep-alive组件的作用及生命周期变化

作用：缓存组件状态，避免重复渲染（如切换标签页时保留组件数据）。

生命周期钩子：

钩子名	触发时机	用途
`activated`	缓存组件激活时（第一次进入或切换回来）	恢复组件状态或触发数据加载
`deactivated`	缓存组件停用时（切换离开）	清理定时器或取消网络请求

示例：

<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>

25. 异步组件的实现方式有哪些？

方式1：返回Promise的工厂函数（Vue 2/3通用）。

const AsyncComponent = () => import('./AsyncComponent.vue');

方式2：使用defineAsyncComponent（Vue 3推荐）。

import { defineAsyncComponent } from 'vue';
const AsyncComponent = defineAsyncComponent({
  loader: () => import('./AsyncComponent.vue'),
  loadingComponent: LoadingSpinner // 加载中组件
});

注意事项：
1. 提供加载中和错误状态的占位组件。
2. 结合路由懒加载优化首屏性能。

26. 如何实现具名插槽和作用域插槽？

具名插槽：

<!-- 父组件 -->
<base-layout>
  <template #header>
    <h1>Header Content</h1>
  </template>
  <template #footer>
    <p>Footer Content</p>
  </template>
</base-layout>

<!-- 子组件（BaseLayout.vue）**
<template>
  <div>
    <slot name="header"></slot>
    <slot name="footer"></slot>
  </div>
</template>

作用域插槽：

<!-- 父组件 -->
<child-component>
  <template #default="{ user }">
    <p>User Name: {{ user.name }}</p>
  </template>
</child-component>

<!-- 子组件（ChildComponent.vue）**
<template>
  <div>
    <slot :user="currentUser"></slot>
  </div>
</template>

组合使用：

<child-component>
  <template v-slot:header="{ title }">
    <h1>{{ title }}</h1>
  </template>
</child-component>

四、状态管理

27. Vuex的核心概念及其作用

核心概念	作用	示例
State	组件共享的全局状态存储（单一源码原则）。	`store.state.user.name`
Mutations	同步修改状态的唯一方法（必须通过`commit`触发）。	`mutations.updateName(state, name)`
Actions	处理异步逻辑（调用`mutations`间接修改状态）。	`actions.fetchUser({ commit })`
Getters	从`state`中派生计算属性（类似组件的`computed`）。	`getters.getUserName(state)`

28. 在组件中使用Vuex

方式1：通过 mapState/mapMutations/mapActions/mapGetters 辅助函数（Vue 2语法）。

import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['user']),
    fullName() {
      return `${this.user.firstName} ${this.user.lastName}`;
    }
  },
  methods: {
    ...mapActions(['updateUser']),
    submitForm() {
      this.updateUser(this.formData);
    }
  }
};

方式2：在 setup() 中直接访问 store（Vue 3推荐）。

import { useStore } from 'vuex';

export default {
  setup() {
    const store = useStore();
    const userName = computed(() => store.state.user.name);
    const updateUser = () => store.commit('updateUser', newName);
    
    return { userName, updateUser };
  }
};

29. Vuex模块化（Modules）的实现方式

步骤：

创建模块文件（如 user.js）：

const userModule = {
  state: { name: 'Alice' },
  mutations: { updateName(state, name) { state.name = name; } },
  actions: { fetchUser() { /* API请求 */ } }
};

注册模块到主store：

const store = createStore({
  modules: {
    user: userModule, // 模块名默认为 `user`
    settings: { /* 另一个模块 */ }
  }
});

访问模块状态：

// 全局命名空间
store.state.user.name;

// 嵌套命名空间（启用 `namespaced: true`）
store.state.settings.theme;

30. Vuex与全局事件总线的区别

特性	Vuex	全局事件总线
数据集中管理	所有状态统一存储，结构清晰	数据分散在组件间，难以追踪
调试支持	支持时间旅行调试（DevTools）	无状态历史记录
数据流向	明确单向数据流（State → Components）	事件广播可能导致混乱
适用场景	中大型复杂应用	简单组件通信

31. Vuex严格模式

作用：禁止直接修改state（仅允许通过mutations修改），强制遵循单向数据流。

启用方式：

const store = createStore({
  strict: true, // 开发环境下有效
  // ...
});

报错示例：

// 直接修改state会触发错误
store.state.user.name = 'Bob'; // ❌

32. Pinia相比Vuex的优势

更轻量：移除了mutations和actions的概念，代码更简洁。
灵活性：直接使用普通JavaScript对象存储状态，无需强制通过函数修改。
组合式API支持：无缝集成setup()语法。
类型友好：天然支持TypeScript，无需额外配置。
更好的开发者体验：
- 状态自动持久化（无需插件）。
- 更简单的模块化结构。

示例对比（计数器功能）：

// Vuex
const store = createStore({
  state() { return { count: 0 }; },
  mutations: { increment(state) { state.count++; } }
});

// Pinia
const useCounter = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: { increment() { this.count++; } }
});

总结

Vuex：适合需要复杂状态管理的传统项目，提供严格的数据流控制和调试工具。
Pinia：面向现代前端开发（尤其Vue 3），代码更简洁，学习成本低，推荐新项目优先使用。
选择依据：团队熟悉度、项目复杂度以及对TypeScript的支持需求。

五、路由管理

33. Vue Router的基本使用步骤

安装依赖：npm install vue-router@next（Vue 3）。

创建路由实例：

import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
  history: createWebHistory(), // 使用HTML5 History模式
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
});

主应用挂载路由：

const app = Vue.createApp(App);
app.use(router);
app.mount('#app');

模板中使用路由链接：

<router-link to="/about">Go to About</router-link>

34. hash模式 vs history模式

特性	Hash模式 (`#`)	History模式 (`/`)
URL表现	带`#`符号（如 `http://example.com/#/about`）	无`#`符号（如 `http://example.com/about`）
服务器要求	无需特殊配置（兼容所有服务器）	需服务端支持（如配置重定向）
SEO优化	不友好（搜索引擎可能忽略`#`后的内容）	更友好
刷新页面	参数不会丢失	需服务端返回正确响应（如`index.html`）

35. 路由守卫的类型及执行顺序

守卫类型	执行位置	作用	执行顺序
全局前置守卫	路由触发前	检查权限、重定向等	`beforeEach` 最先执行
全局解析守卫	路由被解析后（如加载组件）	数据预取	`beforeResolve`
全局后置钩子	导航完成（组件已渲染）	日志记录等收尾操作	`afterEach`
路由独享守卫	某个路由单独配置	路由专属逻辑	与全局守卫执行顺序相同
组件内守卫	组件内部	组件生命周期内的路由控制	`beforeRouteEnter`等

示例：

// 全局前置守卫
router.beforeEach((to, from, next) => {
  if (!isAuthenticated) next('/login');
});

// 组件内守卫
export default {
  beforeRouteEnter(to, from, next) {
    next(vm => vm.fetchData());
  }
};

36. 路由懒加载的实现方式

方式1：使用动态 import() 语法（推荐）：

const routes = [
  {
    path: '/lazy',
    component: () => import('./LazyComponent.vue')
  }
];

方式2：结合 defineAsyncComponent（Vue 3）：

import { defineAsyncComponent } from 'vue-router';
const LazyComponent = defineAsyncComponent(() => 
  import('./LazyComponent.vue'));

效果：组件仅在首次访问时加载，减少首屏体积。

37. 动态路由匹配与参数获取

动态路径参数：

// 路由配置
{ path: '/user/:id', component: UserDetail }

// 组件中获取参数
export default {
  mounted() {
    console.log(this.$route.params.id); // 通过params获取
  }
};

查询参数（Query）：

// 路径示例：/user?name=John
console.log(this.$route.query.name); // 输出 "John"

通配符匹配：

{ path: '/wildcard/*', component: WildcardPage } // 匹配 /wildcard/any/path

38. 嵌套路由的实现方式

父组件模板：

<template>
  <div>
    <h1>Parent Component</h1>
    <router-view></router-view> <!-- 子路由渲染位置 -->
  </div>
</template>

路由配置：

const routes = [
  {
    path: '/parent',
    component: ParentComponent,
    children: [
      { path: 'child', component: ChildComponent }
    ]
  }
];

访问路径：/parent/child

39. 编程式导航的常用方法

跳转到新路由：

// 带参数
this.$router.push({ path: '/user', query: { id: 123 } });

// 带命名路由（需提前定义name）
this.$router.push({ name: 'UserProfile', params: { id: 456 } });

// 替换当前路由（不添加历史记录）
this.$router.replace('/login');

导航到外部链接：

this.$router.resolve({ url: 'https://google.com' }).href;

结合nextTick：

this.$nextTick(() => {
  this.$router.push('/new-page');
});

40. 路由元信息（meta）的使用场景

定义元信息：

const routes = [
  {
    path: '/admin',
    component: AdminPage,
    meta: { requiresAuth: true }
  }
];

访问元信息：

// 在全局守卫中
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login');
  }
});

// 在组件中
export default {
  mounted() {
    console.log(this.$route.meta.title); // 输出元数据中的标题
  }
};

常见用途：权限控制、页面标题设置、缓存标识等。

总结

路由模式：根据需求选择hash（兼容性好）或history（SEO优化）。
性能优化：通过懒加载减少初始加载时间。
嵌套路由：适用于多级页面结构（如侧边栏导航）。
安全实践：利用路由守卫和元信息实现权限校验。

六、性能优化

41. Vue项目常见性能优化手段

代码分割：通过Webpack动态导入（import()）或路由懒加载，分割代码包。
组件懒加载：按需加载非关键组件（如详情页、侧边栏）。
虚拟滚动：处理长列表渲染（如vue-virtual-scroller库）。
避免重复渲染：合理使用v-if替代v-show、v-memo缓存子树。
计算属性优化：缓存复杂计算结果，减少重复计算。
静态资源压缩：启用Gzip/Lossless压缩图片、字体等资源。
Tree Shaking：删除未使用的代码（依赖Webpack/Rollup）。
预加载关键资源：通过<link rel="preload">提前加载字体、首屏组件。

42. 首屏加载优化方案

关键路径优化：
- 减少主包体积（分离第三方库如vue-router、vuex到按需加载）。
- 使用webpack-bundle-analyzer分析依赖体积。

预加载资源：

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

服务端渲染（SSR）：使用Nuxt.js或VitePress生成首屏HTML，减少客户端渲染时间。
CDN加速：将静态资源部署到CDN节点，降低延迟。

43. 长列表性能优化方案

虚拟滚动：只渲染可见区域的元素（推荐库：vue-virtual-scroller）。

<virtual-scroller :items="longList" item-height="40">
  <template v-slot="{ item }">
    <div>{{ item.text }}</div>
  </template>
</virtual-scroller>

分页/无限滚动：

<!-- 分页 -->
<div v-for="page in pages" :key="page">
  <item-list :data="pagedData(page)"></item-list>
</div>

<!-- 无限滚动 -->
<infinite-scroll @load="fetchMore">
  <item-list :data="items"></item-list>
</infinite-scroll>

避免渲染空列表：提前判断数据是否为空，避免渲染无意义的DOM。

44. 组件懒加载的实现方式

路由懒加载（动态导入）：

const LazyComponent = () => import('./LazyComponent.vue');
// 或结合Suspense（Vue 3）
<Suspense>
  <template #default><LazyComponent/></template>
  <template #fallback><LoadingSpinner/></template>
</Suspense>

父组件内按需加载子组件：

export default {
  components: {
    ChildComponent: () => import('./ChildComponent.vue')
  }
};

45. 如何避免不必要的重新渲染？

条件渲染优化：
- 使用v-if替代v-show（当元素完全不可见时）。
- 对静态内容使用v-once。

依赖追踪：

计算属性仅依赖响应式数据，避免引入非响应式变量。

computed: {
  fullName() {
    // 错误：`timer`是非响应式的，会导致每次计算都触发更新
    return this.firstName + ' ' + this.lastName + ' ' + timer;
  }
}

避免深层嵌套监听：
- 使用shallowRef或shallowReactive（Vue 3）减少响应式开销。

46. 使用v-memo优化组件渲染

原理：当组件的props或slots未变化时，跳过子树渲染。

示例：

<template>
  <div>
    <!-- 仅当`user`或`isFetching`变化时重新渲染子组件 -->
    <user-profile v-memo="[user, isFetching]" :user="user" />
  </div>
</template>

适用场景：
- 高频更新的父组件包裹稳定子组件（如侧边栏导航栏）。

47. 如何正确使用计算属性和侦听器？

计算属性：

用于派生数据（如fullName），自动缓存结果。

computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName;
  }
}

侦听器：

用于响应数据变化后的副作用（如API请求、DOM操作）。

watch: {
  count(newVal, oldVal) {
    console.log(`Count changed from ${oldVal} to ${newVal}`);
  }
}

优先选择计算属性：如果仅需要读取数据，优先用计算属性（更高效）。

48. 如何实现组件销毁时的资源清理？

在beforeDestroy/destroyed钩子中清理资源：

export default {
  mounted() {
    this.timer = setInterval(() => console.log('Tick'), 1000);
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    clearInterval(this.timer);
    window.removeEventListener('resize', this.handleResize);
  }
};

清理第三方库资源：
- 如ECharts实例调用chartInstance.dispose()。
- WebSocket连接调用socket.close()。
避免内存泄漏：确保组件销毁后，所有事件监听、定时器、引用都被清除。

七、工程实践

49. 如何实现样式隔离（scoped/CSS Modules）？

Scoped CSS（Vue内置）：
- 通过 <style scoped> 标签限制样式仅作用于当前组件。
- 实现原理：为组件内标签添加随机类名（如 data-v-f3f2g5），并通过深度选择器（如 >>> 或 /deep/）穿透作用域。
```
<template>
  <div class="parent">
    <child-component></child-component>
  </div>
</template>

<style scoped>
  .parent >>> .child {
    color: red;
  }
</style>
```
CSS Modules（第三方库如 vue-loader 支持）：
- 将类名编译为唯一哈希值（如 className_1a2b3c），避免全局冲突。
- 使用方式：
```
<template>
  <div :class="$style.parent">Content</div>
</template>

<style module>
.parent {
  background-color: blue;
}
</style>
```

50. 如何封装可复用组件？

核心原则：
1. 单一职责：组件只解决特定功能（如按钮、表单输入）。
2. 清晰的接口：通过 props 传入数据，通过 events 触发回调。
3. 插槽机制：允许内容自定义（如表单头插槽）。

示例：封装一个带校验的输入组件：

<template>
  <input
    v-model="localValue"
    :placeholder="placeholder"
    @input="validate"
  />
</template>

<script>
export default {
  props: ['value', 'placeholder', 'required'],
  emits: ['update:value', 'error'],
  data() {
    return { localValue: this.value };
  },
  methods: {
    validate() {
      if (this.required && !this.localValue) {
        this.$emit('error', '必填项不能为空');
      }
    }
  },
  watch: {
    localValue(newVal) {
      this.$emit('update:value', newVal);
    }
  }
};
</script>

51. 如何处理全局异常？

Vue 3 全局错误处理器：

const app = Vue.createApp(App);
app.config.errorHandler = (err, vm, info) => {
  console.error('Global Error:', err, info);
  // 发送错误日志到后端
  axios.post('/api/log-error', { error: err, stack: err.stack });
};

第三方工具集成：
- Sentry：实时监控崩溃和性能问题。
- LogRocket：录制用户操作并捕获错误堆栈。

52. 如何实现权限控制系统？

基于角色的路由守卫：

router.beforeEach((to, from, next) => {
  const userRole = store.state.user.role;
  if (to.meta.roles && !to.meta.roles.includes(userRole)) {
    next('/403');
  } else {
    next();
  }
});

动态权限加载：
- 用户登录后，根据权限动态加载可访问的路由。
前端+后端鉴权：
- 前端存储 JWT 令牌，后端接口验证权限，前端拦截无权限请求。

53. 如何实现国际化(i18n)？

使用 vue-i18n：

安装库：npm install vue-i18n@next。

配置语言文件：

const messages = {
  en: { welcome: 'Welcome!' },
  zh: { welcome: '欢迎！' }
};

在组件中使用：

<template>
  <p>{{ $t('welcome') }}</p>
</template>

动态切换语言：
```
this.$i18n.locale = 'zh-CN';
```

54. 如何集成TypeScript？

步骤：

创建 tsconfig.json 文件（配置类型检查）。

使用 .vue.d.ts 声明组件类型：

import { DefineComponent } from 'vue';
interface User {
  name: string;
  age: number;
}
export default DefineComponent({
  props: {
    user: { type: Object as () => User, required: true }
  }
});

类型安全的 computed 和 watch：

computed: {
  fullName(): string {
    return `${this.user.name} ${this.user.lastName}`;
  }
}

55. 如何实现服务端渲染(SSR)？

推荐方案：
- Nuxt.js：基于 Vue 的 SSR 框架，提供自动代码分割、静态站点生成等功能。
- VitePress：适用于文档站点的 SSR 支持。
基本流程：
1. 创建服务器入口文件（如 server.js），使用 renderToString 渲染组件。
2. 处理路由和数据预取（如获取用户信息）。
3. 返回 HTML 字符串给客户端。
优势：
- 更优的首屏加载性能（无需等待客户端渲染）。
- 支持 SEO（搜索引擎直接抓取完整 HTML）。

56. 如何编写单元测试？

测试框架：Jest 或 Mocha。

测试用例示例（Jest + Vue Test Utils）：

import { mount } from '@vue/test-utils';
import MyComponent from './MyComponent.vue';

describe('MyComponent', () => {
  it('renders correctly', () => {
    const wrapper = mount(MyComponent);
    expect(wrapper.text()).toContain('Hello World');
  });

  it('emits an event on click', async () => {
    const wrapper = mount(MyComponent);
    await wrapper.trigger('click');
    expect(wrapper.emitted()).toHaveEmitted('my-event');
  });
});

测试覆盖率：使用 Istanbul 自动生成覆盖率报告。

八、Vue3新特性

57. Vue3相比Vue2的主要改进

性能提升：
- 响应式系统重构（基于 Proxy 替代 Object.defineProperty），性能更好。
- 更小的体积（核心包体积减少约 40%）。
组合式 API：
- 用 setup() 函数替代 Options API，代码更灵活。
更好的 TypeScript 支持：
- 类型推断更强大，开发体验更友好。
新生命周期钩子：
- 移除了 beforeDestroy/destroyed，新增 beforeUnmount/unmounted。
Teleport & Suspense：
- 解决组件层级穿透和异步加载问题。

58. Composition API vs Options API

特性	Composition API	Options API
代码组织	函数式编程，按逻辑组合功能块	基于对象的配置式编程
变量作用域	需手动通过 `return` 暴露变量/方法	自动通过 `this` 访问
复用逻辑	更容易提取公共函数（如 `useFetch`）	需通过 Mixins 或 mixin 函数
调试	支持 `setup()` 中的错误追踪	依赖组件实例的生命周期钩子

示例对比：

// Composition API
import { ref } from 'vue';
export default {
  setup() {
    const count = ref(0);
    function increment() { count.value++; }
    return { count, increment };
  }
};

// Options API
export default {
  data() { return { count: 0 }; },
  methods: { increment() { this.count++; } }
};

59. ref vs reactive

ref<T>：

用于基本类型（String/Number/Boolean）或包装对象。
访问值需通过 .value，修改直接赋值。

const name = ref('Alice'); // 初始化为 String
name.value = 'Bob'; // 修改
console.log(name); // RefImpl { value: 'Bob' }

reactive<T>：

将对象或数组转为响应式（递归监听属性）。
直接访问和修改属性，无需 .value。

const state = reactive({ count: 0 });
state.count++; // 直接修改
console.log(state); // ReactiveObject { count: 1 }

何时使用：
- ref：单个变量或简单对象。
- reactive：复杂对象或数组（需深度监听）。

60. setup函数的执行时机和注意事项

执行时机：
1. 在组件创建前调用（早于 beforeCreate 钩子）。
2. 仅执行一次（组件复用时不重复执行）。

注意事项：

无法访问 this（组件实例未创建）。
需通过 return 暴露变量/方法给模板。
生命周期钩子需显式调用（如 onMounted）。

export default {
  setup() {
    // 无法访问 this
    onMounted(() => console.log('Mounted'));
    return { message: 'Hello' };
  }
};

61. script setup语法糖的作用

简化写法：自动将 setup() 函数内的变量/方法暴露到模板中。
省去冗余代码：无需手动 import { defineComponent } 和 return。

示例：

<script setup>
  import { ref } from 'vue';
  const count = ref(0);
</script>

<template>
  <div>{{ count }}</div>
</template>

62. Teleport组件的使用场景

场景1：模态框、弹窗等需要脱离父组件层级渲染的内容。

<teleport to="body">
  <div class="modal">这是一个浮层</div>
</teleport>

场景2：固定位置的导航栏或工具栏（避免被父组件滚动影响）。
原理：将内容插入到 DOM 中的指定位置（通过 portal-target 属性）。

63. Suspense组件的实现原理

作用：包裹异步组件，显示加载状态。
原理：
1. 检测子组件是否为异步（通过 isAsync 标记）。
2. 渲染过程中显示 fallback 内容。
3. 子组件加载完成后替换为实际内容。

示例：

<suspense>
  <template #default><async-component/></template>
  <template #fallback><loading-spinner/></template>
</suspense>

64. 新的生命周期钩子变化

Vue2 钩子	Vue3 钩子	说明
`beforeDestroy`	`beforeUnmount`	组件销毁前清理资源
`destroyed`	`unmounted`	组件销毁后触发
新增钩子
`renderTracked`	-	跟踪渲染过程（调试用）
`renderTriggered`	-	记录触发渲染的依赖

65. 响应式API（shallowRef/markRaw等）的使用

shallowRef：浅层响应式，仅监听顶层属性。

const shallowState = shallowRef({ a: 1, b: { c: 2 } });
shallowState.b.c = 3; // 不会触发更新

markRaw：标记对象为“原始”，使其不再被响应式系统追踪。

const rawObject = markRaw({ count: 0 });
const state = reactive({ data: rawObject });
state.data.count = 1; // 不会触发视图更新

66. 自定义渲染器的实现原理

核心思想：
1. 实现 render() 函数，返回虚拟DOM节点。
2. 通过 createRenderer() 创建自定义渲染器。

示例：

import { createApp, createRenderer } from 'vue';
const renderer = createRenderer({
  createElement(tag) {
    return document.createElement(tag);
  }
});
const app = createApp({});
app.render(renderer, '#app');

用途：
- 集成到非浏览器环境（如 Node.js）。
- 实现自定义虚拟DOM diff算法。

九、综合应用

67. 描述一个Vue项目开发中遇到的技术难点及解决方案

难点：在复杂业务场景下，多个嵌套组件间需要共享状态（如用户权限、全局配置），传统props/$emit会导致代码臃肿且难以维护。
解决方案：

使用provide/inject：在根组件提供全局状态（如用户信息），所有后代组件直接注入使用。

// App.vue
export default {
  provide() {
    return { user: this.user };
  },
};
// ChildComponent.vue
export default {
  inject: ['user'],
  mounted() {
    console.log(this.user.name); // 直接访问全局用户数据
  }
};

结合Vuex：对于复杂状态（如多模块数据），集中管理至store，通过命名空间避免冲突。

68. 如何设计一个高可复用的表单组件？

核心设计原则：

灵活配置：通过props接收字段类型、验证规则、占位符等。
插槽机制：允许自定义表单头部、底部或操作按钮。
双向绑定：集成v-model，自动同步数据。
校验扩展：支持内联校验或集成第三方库（如VeeValidate）。
示例代码：

<template>
  <div class="form-field">
    <label>{{ label }}</label>
    <input
      v-model="localValue"
      :type="type"
      :placeholder="placeholder"
      @input="validateField"
    />
    <span v-if="error" class="error">{{ error }}</span>
  </div>
</template>

<script>
export default {
  props: ['label', 'type', 'placeholder', 'value', 'rules'],
  emits: ['update:value', 'validate'],
  data() {
    return { localValue: this.value, error: '' };
  },
  methods: {
    validateField() {
      const isValid = this.rules.find(rule => rule(this.localValue));
      this.error = isValid ? '' : isValid.message;
      this.$emit('validate', isValid);
    }
  },
  watch: {
    localValue(newVal) {
      this.$emit('update:value', newVal);
    }
  }
};
</script>

69. 如何实现动态路由权限控制？

步骤：

路由配置标记权限：

const routes = [
  {
    path: '/admin',
    component: AdminPage,
    meta: { requiresRole: 'admin' }
  }
];

全局前置守卫校验：

router.beforeEach((to, from, next) => {
  const userRole = store.state.user.role;
  if (to.meta.requiresRole && userRole !== to.meta.requiresRole) {
    next('/403');
  } else {
    next();
  }
});

动态加载路由：

// 根据用户权限生成可访问的路由列表
const accessibleRoutes = generateRoutesByPermission(userRole);
router.addRoutes(accessibleRoutes);

70. 如何优化大型数据表格的渲染性能？

优化手段：

虚拟滚动：使用vue-virtual-scroller仅渲染可见区域。

<virtual-scroller :items="tableData" item-height="50">
  <template v-slot="{ item }">
    <tr>{{ item.name }} {{ item.value }}</tr>
  </template>
</virtual-scroller>