vue2 面试题及详细答案150道（121 - 130）

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

一、本文面试题目录

121. Vue2中如何实现组件的动态样式绑定？

答案：
Vue2中实现动态样式绑定有以下几种方式：

1. 对象语法：

   <div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
   

   data() {
     return {
       activeColor: 'red',
       fontSize: 16
     }
   }
   

2. 数组语法：

   <div :style="[baseStyles, overridingStyles]"></div>
   

3. 计算属性：

   <div :style="dynamicStyles"></div>
   

   computed: {
     dynamicStyles() {
       return {
         color: this.isActive ? 'red' : 'blue',
         fontWeight: this.isBold ? 'bold' : 'normal'
       }
     }
   }
   

4. 绑定CSS变量：

   <div :style="`--color: ${textColor}`"></div>
   

122. Vue2中如何处理跨域请求？

答案：
Vue2中处理跨域请求的方法如下：

1. 开发环境代理（vue.config.js）：

   module.exports = {
     devServer: {
       proxy: {
         '/api': {
           target: 'http://localhost:3000',
           changeOrigin: true,
           pathRewrite: { '^/api': '' }
         }
       }
     }
   }
   

2. 生产环境配置CORS：
   在后端服务器设置响应头：

   res.setHeader('Access-Control-Allow-Origin', '*');
   res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
   res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
   

3. JSONP（仅支持GET请求）：

   this.$jsonp('https://api.example.com/data', {
     params: { id: 1 },
     callback: 'jsonpCallback'
   }).then(response => {
     console.log(response);
   });
   

123. Vue2中如何实现路由过渡动画？

答案：
Vue2中实现路由过渡动画的步骤如下：

1. 使用<transition>包裹路由出口：

   <transition name="fade">
     <router-view></router-view>
   </transition>
   

2. 定义CSS过渡：

   .fade-enter-active, .fade-leave-active {
     transition: opacity 0.5s;
   }
   .fade-enter, .fade-leave-to {
     opacity: 0;
   }
   

3. 基于路由方向设置不同动画：

   <transition :name="transitionName">
     <router-view></router-view>
   </transition>
   

   export default {
     computed: {
       transitionName() {
         // 根据路由路径或元信息设置不同动画
         return this.$route.meta.transition || 'fade';
       }
     }
   }
   

124. Vue2中如何实现自定义事件？

答案：
Vue2中实现自定义事件的方法如下：

1. 在子组件中触发事件：

   <!-- ChildComponent.vue -->
   <button @click="$emit('custom-event', '传递的数据')">触发事件</button>
   

2. 在父组件中监听事件：

   <!-- ParentComponent.vue -->
   <ChildComponent @custom-event="handleEvent" />
   

   methods: {
     handleEvent(data) {
       console.log('接收到的数据:', data);
     }
   }
   

3. 使用v-model语法糖：

   <!-- 子组件 -->
   <input :value="value" @input="$emit('input', $event.target.value)" />
   
   <!-- 父组件 -->
   <ChildComponent v-model="parentValue" />
   

125. Vue2中如何实现服务注入？

答案：
Vue2中实现服务注入的方法如下：

1. 使用Vue.prototype：

   // main.js
   import axios from 'axios';
   Vue.prototype.$http = axios;
   
   // 在组件中使用
   this.$http.get('/api/data').then(response => {
     console.log(response);
   });
   

2. 使用provide/inject：

   // 父组件
   export default {
     provide: {
       $api: this.$http
     }
   }
   
   // 子组件
   export default {
     inject: ['$api'],
     mounted() {
       this.$api.get('/data').then(response => {
         console.log(response);
       });
     }
   }
   

3. 使用插件：

   const MyService = {
     install(Vue) {
       Vue.prototype.$myService = {
         getData() {
           return axios.get('/api/data');
         }
       };
     }
   };
   
   Vue.use(MyService);
   

126. Vue2中如何实现数据缓存？

答案：
Vue2中实现数据缓存的方法如下：

1. 使用localStorage/sessionStorage：

   // 存储数据
   localStorage.setItem('user', JSON.stringify(this.user));
   
   // 获取数据
   const user = JSON.parse(localStorage.getItem('user'));
   

2. 使用Vuex-persistedstate：

   import createPersistedState from 'vuex-persistedstate';
   
   const store = new Vuex.Store({
     plugins: [createPersistedState()]
   });
   

3. 内存缓存：

   const cache = {};
   
   export default {
     methods: {
       fetchData() {
         if (cache[this.id]) {
           return Promise.resolve(cache[this.id]);
         }
         
         return axios.get(`/api/data/${this.id}`).then(response => {
           cache[this.id] = response.data;
           return response.data;
         });
       }
     }
   }
   

127. Vue2中如何实现组件的全局注册？

答案：
Vue2中实现组件全局注册的方法如下：

1. 在main.js中逐个注册：

   import Vue from 'vue';
   import App from './App.vue';
   import ButtonComponent from './components/ButtonComponent.vue';
   
   Vue.component('ButtonComponent', ButtonComponent);
   
   new Vue({
     render: h => h(App)
   }).$mount('#app');
   

2. 自动全局注册：

   // components/global.js
   import Vue from 'vue';
   import upperFirst from 'lodash/upperFirst';
   import camelCase from 'lodash/camelCase';
   
   const requireComponent = require.context(
     './global', // 全局组件目录
     false, // 是否递归
     /Base[A-Z]\w+\.(vue|js)$/ // 匹配组件文件名
   );
   
   requireComponent.keys().forEach(fileName => {
     const componentConfig = requireComponent(fileName);
     const componentName = upperFirst(
       camelCase(fileName.replace(/^\.\/(.*)\.\w+$/, '$1'))
     );
     
     Vue.component(componentName, componentConfig.default || componentConfig);
   });
   

   在main.js中引入：

   import './components/global';
   

以下是Vue2相关的面试题及详细答案161-170：

128. Vue2中如何实现组件的递归调用？

答案：
Vue2中实现组件递归调用（如树形结构）需确保：

1. 命名组件：在组件选项中显式定义name。
2. 正确引用自身：在模板中使用name作为标签名。

示例（树形组件）：

<!-- TreeComponent.vue -->
<template>
  <ul>
    <li v-for="item in treeData" :key="item.id">
      {{ item.name }}
      <TreeComponent v-if="item.children && item.children.length" :treeData="item.children" />
    </li>
  </ul>
</template>

<script>
export default {
  name: 'TreeComponent', // 关键：定义组件名称
  props: {
    treeData: {
      type: Array,
      required: true
    }
  }
};
</script>

129. Vue2中如何实现动态修改路由参数？

答案：
Vue2中动态修改路由参数的方法如下：

1. 使用router.push或this.$router.push：

   // 方法一：命名路由 + params
   this.$router.push({ name: 'user', params: { id: 2 } });
   
   // 方法二：路径 + query
   this.$router.push({ path: '/user', query: { id: 2 } });
   

2. 在模板中绑定链接：

   <router-link :to="{ name: 'user', params: { id: 2 } }">用户详情</router-link>
   

3. 保留当前参数并修改部分：

   this.$router.push({
     params: { ...this.$route.params, id: 2 }
   });
   

130. Vue2中如何实现组件的性能优化？

答案：
Vue2中组件性能优化的方法如下：

1. 使用v-show替代v-if（频繁切换时）：

   <!-- 频繁切换用v-show -->
   <div v-show="isVisible">内容</div>
   
   <!-- 条件渲染用v-if -->
   <div v-if="hasData">数据内容</div>
   

2. 缓存组件（keep-alive）：

   <keep-alive>
     <router-view></router-view>
   </keep-alive>
   

3. 减少响应式数据大小：

   export default {
     data() {
       return {
         // 仅将需要响应式的数据放在data中
         active: true,
         // 大量静态数据使用Object.freeze
         staticData: Object.freeze(largeData)
       };
     }
   };
   

4. 虚拟列表（处理大数据）：
   使用vue-virtual-scroller等库只渲染可视区域。
5. 事件销毁：

   export default {
     mounted() {
       this.timer = setInterval(() => { /* ... */ }, 1000);
     },
     beforeDestroy() {
       clearInterval(this.timer); // 清除定时器
     }
   };
   

二、150道面试题目录列表