vue2 面试题及详细答案150道（81 - 90）

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

前后端面试题-专栏总目录

一、本文面试题目录

81. Vue2中如何实现组件的动态加载？

• 答案：可以使用异步组件来实现组件的动态加载。通过import()函数动态导入组件，例如：

<template><div><component :is="asyncComponent"></component></div>
</template><script>
export default {data() {return {asyncComponent: null};},mounted() {this.asyncComponent = () => import('./AsyncComponent.vue');}
};
</script>

也可以使用Vue.component()配合import()来注册异步组件，如下：

Vue.component('async - component', function (resolve) {import('./AsyncComponent.vue').then(component => {resolve(component);});
});

在模板中直接使用<async - component></async - component>即可，Vue会在需要渲染该组件时才去加载对应的组件代码。

82. 简述Vue2的虚拟DOM Diff算法原理。

• 答案：Vue2的Diff算法是基于虚拟DOM进行的，主要原理如下：
  • 同级比较：只对同级的虚拟DOM节点进行比较，不会跨层级比较，这样可以大大减少比较的复杂度。
  • key的作用：通过给每个节点设置唯一的key，Vue可以快速识别出哪些节点是新增的，哪些节点是已有的，哪些节点需要移动位置。如果节点有相同的key，且节点内容未变，则直接使用之前的真实DOM；若内容改变，则生成新的真实DOM替换之前的。
  • 差异更新：Diff算法会找出新旧虚拟DOM之间的差异，然后只对有差异的部分进行实际的DOM操作，尽量减少对真实DOM的更新范围，从而提高更新效率。

83. Vue2中为什么不建议在v-for中使用index作为key？

• 答案：如果不存在对数据的逆序操作，仅用于渲染列表展示，可选择index作为key，但这并不是最佳实践。当数据发生变化时，比如在列表开头插入新元素，以index为key，Vue会认为所有后续元素都发生了变化，因为它们的index都改变了，从而导致所有DOM元素都会重新渲染，即使实际上只有新增的元素是真正需要更新的，这会影响性能。而使用唯一标识作为key，能让Vue更准确地识别节点，只更新真正有变化的节点。

84. 如何解决Vue2中组件样式冲突问题？

• 答案：可以通过以下几种方式解决：
  • 作用域样式：在<style>标签中添加scoped属性，如<style scoped>，这样该组件的样式只会应用于当前组件，不会影响其他组件，原理是Vue会给组件的DOM元素添加唯一的属性标识，然后在CSS选择器中加上该标识来限定样式作用范围。
  • 使用CSS Modules：将样式文件命名为.module.css，在组件中引入并使用，例如：

<template><div class="test - class"></div>
</template><script>
import styles from './test.module.css';
export default {computed: {testClass() {return styles['test - class'];}}
};
</script>

- **命名空间**：为组件的样式定义一个独特的命名空间，例如给组件的根元素添加一个特定的类名，然后在CSS中以该类名作为前缀来编写样式，如`.my - component div { /* 样式 */ }`。

85. Vue2中如何对axios进行二次封装？

• 答案：通常可以这样进行二次封装：

import axios from 'axios';// 创建axios实例
const service = axios.create({baseURL: '/api', // 基础URLtimeout: 5000 // 超时时间
});// 请求拦截器
service.interceptors.request.use(config => {// 例如添加token到请求头const token = localStorage.getItem('token');if (token) {config.headers['Authorization'] = `Bearer ${token}`;}return config;
}, error => {return Promise.reject(error);
});// 响应拦截器
service.interceptors.response.use(response => {const { data } = response;if (data.code === 200) {return data;} else {// 处理错误情况，如提示用户return Promise.reject(data);}
}, error => {// 处理网络错误等return Promise.reject(error);
});export default service;

然后在组件中可以直接导入service来发送请求，如import service from './api'; service.get('/user').then(res => { /* 处理响应 */ });。

86. Vue2中组件的inheritAttrs和attrs有什么作用？

• 答案：
  • inheritAttrs是一个布尔值，默认值为true，它控制着父组件传递给子组件的属性（除了props声明的属性）是否会自动挂载到子组件的根元素上。如果设置为false，这些属性就不会自动挂载，但仍然可以通过$attrs来访问。
  • attrs是一个对象，包含了父组件传递给子组件但没有被props接收的所有属性。可以通过v - bind="$attrs"将这些属性传递给下级组件，实现属性的透传。

87. Vue2中如何实现自定义指令？

• 答案：可以通过Vue.directive()方法来实现自定义指令，有全局指令和局部指令两种方式。
  • 全局指令：

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

然后在模板中可以直接使用<input v - focus />，当该元素插入到DOM中时，会自动获取焦点。
- 局部指令：在组件内部定义，如下：

<template><div><input v - myDirective /></div>
</template><script>
export default {directives: {myDirective: {bind: function (el) {// 指令绑定到元素时执行},inserted: function (el) {// 元素插入到DOM时执行},update: function (el) {// 所在组件更新时执行}}}
};
</script>

88. Vue2中watch可以监听到对象内部属性的变化吗？默认情况下是怎样的？如何实现深度监听？

• 答案：默认情况下，watch只能监听到对象引用的变化，不能监听到对象内部属性的变化。如果要监听到对象内部属性的变化，需要开启深度监听。可以通过设置deep: true来实现深度监听，例如：

watch: {myObject: {handler(newVal, oldVal) {// 处理对象变化},deep: true}
}

这样，当myObject内部的任何属性发生变化时，都会触发watch的handler函数。

89. 简述Vue2中provide和inject的作用及使用场景。

• 答案：provide和inject主要用于实现祖先组件向其所有子孙后代注入依赖。祖先组件可以使用provide来提供数据或方法，例如：

export default {provide() {return {myData: 'Hello, world!',myMethod: () => { /* 方法实现 */ }};}
};

子孙组件可以通过inject来接收这些数据或方法，如下：

export default {inject: ['myData','myMethod'],mounted() {console.log(this.myData);this.myMethod();}
};

使用场景主要是在一些嵌套层级较深的组件结构中，方便祖先组件向深层子孙组件传递数据或功能，而无需通过多层props传递，减少代码冗余。

90. Vue2项目中如何进行性能优化？

• 答案：可以从以下几个方面进行性能优化：
  • 虚拟DOM优化：合理使用key，让Diff算法更高效地更新DOM。尽量减少不必要的组件重新渲染，例如将不常变化的部分抽离成单独的组件。
  • 数据优化：避免数据冗余，对于不需要响应式的数据，不要放在data中，可以定义为普通变量。减少数据监听的范围，如对于一些大型对象，只对必要的属性进行响应式处理。
  • 组件优化：按需加载组件，使用异步组件减少初始加载的代码量。合理使用keep - alive缓存不常切换的组件，避免重复渲染。
  • 资源优化：压缩和合并CSS、JS文件，减少文件体积。使用CDN引入第三方库，减轻服务器压力。
  • 渲染优化：避免在v - for中使用大量复杂的表达式，将复杂计算提取到计算属性或方法中。控制v - if和v - show的使用场景，频繁切换用v - show，条件性渲染用v - if。

二、150道面试题目录列表

文章序号	vue2面试题150道
1	vue2 面试题及详细答案（01 - 20）
2	vue2 面试题及详细答案（21 - 40）
3	vue2 面试题及详细答案（41 - 60）
4	vue2 面试题及详细答案（61 - 70）
5	vue2 面试题及详细答案（71 - 80）
6	vue2 面试题及详细答案（81 - 90）
7	vue2 面试题及详细答案（91 - 100）
8	vue2 面试题及详细答案（101 - 120）
9	vue2 面试题及详细答案（121 - 130）
10	vue2 面试题及详细答案（131 - 140）
11	vue2 面试题及详细答案（141 - 150）