Vue经典面试题

1. Vue的生命周期钩子有哪些？

Vue组件的生命周期钩子包括：

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyed
• activated（用于keep-alive组件）
• deactivated（用于keep-alive组件）
• errorCaptured（捕获子组件的错误）

2. v-show 和 v-if 有什么区别？

• v-show：通过CSS的display属性来控制元素的显示和隐藏，元素始终存在于DOM中。
• v-if：通过添加或移除DOM元素来控制元素的显示和隐藏，条件为false时，元素不会存在于DOM中。

3. 如何理解Vue的响应式系统？

Vue的响应式系统通过Object.defineProperty（Vue 2.x）或Proxy（Vue 3.x）来实现数据的监听和变化追踪。当数据发生变化时，Vue会自动更新视图。

4. 什么是Vuex？它的主要组成部分有哪些？

Vuex是Vue.js的状态管理模式和库。它的主要组成部分包括：

• State：存储应用的状态数据。
• Getters：从state中派生出一些状态，类似于计算属性。
• Mutations：同步修改state的方法。
• Actions：可以包含任意异步操作，用于提交mutation。
• Modules：将store分割成模块，每个模块拥有自己的state、mutation、action、getter。

5. 如何在Vue中实现组件通信？

• Props/Events：父组件通过props传递数据给子组件，子组件通过$emit触发事件通知父组件。
• Provide/Inject：父组件通过provide提供数据，子组件通过inject注入数据。
• Event Bus：创建一个空的Vue实例作为事件总线，用于非父子组件之间的通信。
• Vuex：使用Vuex进行全局状态管理。

6. 什么是Vue Router？它的主要功能有哪些？

Vue Router是Vue.js的官方路由管理器。它的主要功能包括：

• 嵌套路由
• 路由参数
• 编程式导航
• 路由守卫（导航守卫）
• 路由懒加载

7. 如何实现Vue组件的懒加载？

可以使用动态导入（Dynamic Imports）和Webpack的代码分割功能来实现组件的懒加载。例如：

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

8. Vue中的key属性有什么作用？

key属性主要用于Vue的虚拟DOM算法，帮助Vue识别哪些节点发生了变化，从而更高效地更新DOM。特别是在列表渲染时，使用唯一的key可以避免渲染错误。

9. 如何在Vue中使用自定义指令？

可以通过Vue.directive方法注册全局自定义指令，或者在组件中使用directives选项注册局部自定义指令。例如：

Vue.directive('focus', {
  inserted: function (el) {
    el.focus();
  }
});

10. 什么是Vue的单文件组件（SFC）？

Vue的单文件组件（Single File Component，SFC）是一种文件格式，将组件的模板、逻辑和样式封装在一个.vue文件中，便于管理和维护。

11. 如何在Vue中处理表单输入？

可以使用v-model指令实现表单输入的双向绑定。例如：

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

12. Vue中的computed和watch有什么区别？

• computed：用于计算属性，依赖的数据变化时会自动重新计算，适用于依赖多个属性的复杂逻辑。
• watch：用于观察特定数据的变化，并在数据变化时执行回调函数，适用于执行异步操作或开销较大的操作。

13. 如何在Vue中实现路由守卫？

可以通过beforeEach、beforeResolve、afterEach等方法实现全局路由守卫，或者在路由配置中使用beforeEnter实现单个路由的守卫。例如：

router.beforeEach((to, from, next) => {
  // 路由守卫逻辑
  next();
});

14. 如何在Vue中使用插槽（Slots）？

插槽用于在组件中定义可替换的内容。可以通过<slot>标签定义插槽，并在父组件中使用<template v-slot:name>或简写#name来填充插槽内容。例如：

<!-- 子组件 -->
<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
  </div>
</template>

<!-- 父组件 -->
<ChildComponent>
  <template #header>
    <h1>Header Content</h1>
  </template>
  <p>Default Slot Content</p>
</ChildComponent>

15. 如何在Vue中实现Mixin？

Mixin是一种将组件选项混合到其他组件中的方式。可以通过mixins选项将Mixin应用到组件中。例如：

const myMixin = {
  data() {
    return {
      message: 'Hello'
    };
  },
  methods: {
    greet() {
      console.log(this.message);
    }
  }
};

export default {
  mixins: [myMixin]
};