vue2 面试题及详细答案150道（1-20 ）

《前后端面试题》专栏集合了前后端各个知识模块的面试题，包括html，javascript，css，vue，react，java，Openlayers，leaflet，cesium，mapboxGL，threejs，nodejs，mangoDB，MySQL，Linux… 。

一、本文面试题目录

1. v-if和v-show的区别

渲染机制不同：v-if是真正的渲染和销毁组件，当条件为假时，组件不会被渲染到DOM中；v-show则是通过修改元素的CSS的display属性来控制显示与隐藏，无论条件真假，元素都会被渲染。

性能表现不同：频繁切换时，使用v-show性能更好，因为它只是简单的CSS切换，无需重新渲染组件；如果不是频繁切换，使用v-if更合适，因为v-if在条件为假时不渲染组件，能节省内存和渲染开销。

2. 为何v-for中要用key

Diff算法需要：在Diff算法中，通过key和tag（标签名）来判断是否是相同节点。如果没有key，Vue无法准确跟踪每个元素的身份，只能替换整个DOM节点。

提高渲染性能：使用唯一的key可以让Vue更高效地更新虚拟DOM，减少不必要的渲染次数，提高渲染性能。并且，当v-for用于渲染组件时，若没有key，会导致组件状态消失，因为新的组件不会继承旧的组件实例状态。

3. 描述Vue组件生命周期（以及有父子组件时，两者的生命周期）

单个组件生命周期：包括创建阶段（beforeCreate、created）、挂载阶段（beforeMount、mounted）、更新阶段（beforeUpdate、updated）、销毁阶段（beforeDestroy、destroyed）。

父子组件生命周期：以index为父组件，list为子组件为例，创建阶段顺序为index beforeCreate、index beforeMount、list beforeCreate、list beforeMount、list mounted、index mounted；更新阶段，父组件或子组件数据变化都会先触发各自的beforeUpdate，再触发updated；销毁阶段顺序为index beforeDestroy、list beforeDestroy、list destroyed、index destroyed。

4. 组件间如何通讯（常见方式）

父子组件通讯：父传子通过props，在父组件调用子组件的位置绑定属性，子组件通过props接收；子传父通过$emit，子组件使用$emit触发自定义事件，父组件在调用子组件的位置监听该事件来接收数据。

兄弟组件通讯：可以通过事件总线（Event Bus），创建一个全局的Vue实例作为事件总线，兄弟组件都可以通过它来触发和监听事件；也可以通过父组件作为中间桥梁，子组件将数据传给父组件，再由父组件传给另一个子组件。

跨级组件通讯：可以使用Vuex进行状态管理，实现跨级组件数据共享；也可以使用provide和inject，在父组件中通过provide提供数据，子组件无论多深都可以通过inject注入获取数据。

5. 组件渲染和更新的过程

初次渲染：首先对data进行响应式处理，通过Object.defineProperty()方法监听属性的get和set；然后解析模板为render函数（可能在开发环境打包时完成）；接着执行render函数，生成虚拟DOM（vnode），此过程会触发data的getter，收集依赖；最后将vnode渲染到页面上，生成真实DOM。

更新过程：当“被观察的”数据发生变化时，会触发data的setter，然后重新执行render函数，生成新的虚拟DOM（newVnode），最后通过patch算法对比vnode和newVnode，只更新有差异的部分到真实DOM中。

6. 双向数据绑定v-model的实现原理

v-model本质上是语法糖。对于表单元素，如input，它会将value属性与Vue实例中的数据属性绑定，即value = this.name，同时绑定input事件，当input值发生变化时，触发事件并将新值赋值给数据属性，即this.name = $event.target.value。当数据更新时，又会触发重新渲染，从而实现视图与数据的双向同步。

7. 说一下对MVVM的理解

MVVM是Model-View-ViewModel的缩写。在Vue中，Model负责管理数据和业务逻辑；View负责用户界面的展示；ViewModel是连接Model和View的桥梁，它通过Vue的响应式系统，自动实现数据从Model到View的绑定，以及用户在View上的操作反馈到Model，开发者只需关注数据逻辑，无需手动操作DOM，使开发更高效，代码更简洁。

8. computed有何特点

具有缓存性：computed计算属性会缓存结果，只有当它依赖的响应式属性发生变化时，才会重新计算。如果依赖的属性没有变化，多次访问computed属性会直接从缓存中获取结果，而不会重复执行计算函数。

提高性能：适用于复杂的表达式计算，避免在模板中编写过多复杂的逻辑，提高代码的可读性和性能。

9. 为何组件data必须是一个函数

因为Vue组件是可复用的，当多个地方使用同一个组件时，相当于创建了多个组件实例。如果data是一个对象，那么所有实例会共享同一个数据对象，一个实例对数据的修改会影响到其他实例，导致状态混乱。而将data定义为函数，每次组件实例化时都会调用该函数，返回一个新的数据对象，这样每个实例都有自己独立的数据作用域，避免了数据相互污染，保证了组件的复用性和稳定性。

10. ajax请求应该放在哪个生命周期

通常放在mounted生命周期中。在beforeMount之前，DOM还未挂载，此时即使获取到数据也无法操作DOM进行渲染，可能会导致逻辑混乱。而在mounted阶段，真实的DOM已挂载完毕，数据完成双向绑定，可以安全地获取数据并更新DOM，展示请求结果。

11. 如何将父组件的所有props传递给子组件

可以使用v-bind=“$props"。例如，父组件中有多个props，在调用子组件时，通过<Userv-bind="$props” />，即可将父组件的所有props传递给子组件，子组件无需逐个声明接收这些props。

12. 如何自己实现一个v-model

v-model本质是语法糖，由value绑定和input事件组成。以input组件为例，代码如下：

<template>
  <div>
    <input :value="inputValue" @input="handleInput" />
  </div>
</template>

<script>
export default {
  props: ['value'],
  data() {
    return {
      inputValue: this.value
    };
  },
  methods: {
    handleInput(e) {
      this.inputValue = e.target.value;
      this.$emit('input', this.inputValue);
    }
  }
};
</script>

在上述代码中，子组件通过props接收value，将其绑定到input的value属性，并监听input事件，在事件回调中更新数据并通过$emit触发input事件，将新值传递给父组件，从而实现类似v-model的双向绑定效果。

13. 多组件有相同的逻辑，如何抽离

可以使用mixin（混入）。将相同的逻辑代码写在一个mixin对象中，然后在需要使用该逻辑的组件中通过mixins选项引入。例如：

// mixin.js
export const commonMixin = {
  data() {
    return {
      commonData: '一些公共数据'
    };
  },
  methods: {
    commonMethod() {
      // 公共方法逻辑
    }
  }
};

// component.vue
import { commonMixin } from './mixin.js';
export default {
  mixins: [commonMixin],
  // 组件其他代码
};

但mixin也存在一些问题，如多个mixin可能会产生命名冲突，逻辑来源不清晰等，在Vue3中，更推荐使用Composition API来抽离公共逻辑。

14. 何时需要使用异步组件

加载大组件：当组件体积较大时，将其设置为异步组件，可以避免首次加载时一次性加载过多代码，导致页面加载缓慢。异步组件会在需要使用时才加载，提高首屏加载速度。

路由异步加载：在Vue Router中，配合路由使用异步组件，可以实现路由的懒加载，只有当用户访问到相应路由时，才加载对应的组件，优化应用的性能和资源占用。

15. 何时需要使用keep-alive

当有多个组件需要频繁切换，且不希望每次切换都重新渲染组件时，需要使用keep-alive。例如，多个静态的tab页切换，每个tab页对应一个组件，使用keep-alive可以将不活动的组件实例保存在内存中，避免重复渲染，提高性能。它有两个重要的钩子函数activated和deactivated，分别在组件激活和失活时调用。

16. 何时需要使用beforeDestroy

在组件销毁之前，需要进行一些善后工作时，需要使用beforeDestroy钩子函数。例如，解绑自定义事件（通过$off）、清除定时器（如clearTimeout、clearInterval）、解绑自定义的DOM事件（如window.scroll事件）等，以防止内存泄漏和避免一些不必要的副作用。

17. 什么是作用域插槽？为何需要它

作用域插槽是一种特殊的插槽，它允许子组件将数据传递给父组件，父组件可以根据接收到的数据来决定插槽内容的渲染方式。普通插槽是父组件向子组件插入内容，而作用域插槽则是子组件给父组件提供数据，让父组件基于这些数据来定制插槽的显示。它的存在使得组件的复用性更强，父组件可以在不修改子组件代码的情况下，根据不同的数据展示不同的内容和样式。

18. vuex的action和mutation有何区别

是否支持异步：action可以包含异步操作，如发送AJAX请求等，而mutation必须是同步操作，它主要用于直接修改Vuex中的状态。

功能不同：mutation用于执行原子操作，即单个的状态修改；action可以整合多个mutation，通常用于处理复杂的业务逻辑，然后通过commit调用mutation来修改状态。

19. vue-router路由模式有几种

主要有两种路由模式，分别是hash模式和history模式。

hash模式：URL中会包含“#”符号，如http://example.com/#/home，hash部分的变化不会触发页面刷新，且兼容性较好。

history模式：URL看起来更简洁，如http://example.com/home，但它需要服务端的支持，否则在刷新页面或直接访问深层路由时可能会出现404错误，因为服务端需要根据路由规则返回相应的页面。

20. 如何配置vue-router异步加载

可以使用箭头函数结合import()语法来实现路由异步加载。例如：

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
  {
    path: '/home',
    name: 'Home',
    // 异步加载组件
    component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue')
  }
];

const router = new VueRouter({
  mode: 'history',
  routes
});

export default router;

上述代码中，通过箭头函数和import()动态导入组件，Webpack会将异步加载的组件打包成单独的chunk，实现路由的异步加载，提高应用性能。

二、150道面试题目录列表