当前位置： 首页 > news >正文

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

news 2025/7/21 11:42:12

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

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

在这里插入图片描述

文章目录

  • 一、本文面试题目录
      • 121. Vue2中如何实现组件的动态样式绑定？
      • 122. Vue2中如何处理跨域请求？
      • 123. Vue2中如何实现路由过渡动画？
      • 124. Vue2中如何实现自定义事件？
      • 125. Vue2中如何实现服务注入？
      • 126. Vue2中如何实现数据缓存？
      • 127. Vue2中如何实现组件的全局注册？
      • 128. Vue2中如何实现组件的递归调用？
      • 129. Vue2中如何实现动态修改路由参数？
      • 130. Vue2中如何实现组件的性能优化？
  • 二、150道面试题目录列表

一、本文面试题目录

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.freezestaticData: Object.freeze(largeData)};}
};
  4. 虚拟列表（处理大数据）：
    使用vue-virtual-scroller等库只渲染可视区域。
  5. 事件销毁：
    export default {mounted() {this.timer = setInterval(() => { /* ... */ }, 1000);},beforeDestroy() {clearInterval(this.timer); // 清除定时器}
};

二、150道面试题目录列表

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

相关文章：

  • [Python] -实用技巧10- 时间处理：datetime 和 time 模块入门
  • React 的 `cache()` 函数
  • 使用 Gunicorn 部署 Django 项目
  • XSS相关理解
  • Ubuntu20.04 samba配置
  • 针对大规模语言模型的上下文工程技术调研与总结（翻译并摘要）
  • 考研复习-数据结构-第七章-查找
  • 论文略读：Are Large Language Models In-Context Graph Learners?
  • 编程实现Word自动排版：从理论到实践的全面指南
  • 【Linux服务器】-zabbix通过proxy进行分级监控
  • Vue3生命周期函数
  • 多进程服务器
  • 【愚公系列】《MIoT.VC》001-认识、安装 MIoT.VC 软件
  • 安装postgresql
  • 深度学习Depth Anything V2神经网络实现单目深度估计系统源码
  • OpenCV 官翻8 - 其他算法
  • warning: _close is not implemented and will always fail
  • 驾驭 Spring Boot 事件机制：8 个内置事件 + 自定义扩展实战
  • Custom SRP - Custom Render Pipeline
  • SurfaceView、TextureView、SurfaceTexture 和 GLSurfaceView
  • 立创EDA中双层PCB叠层分析
  • 原码、反码和补码在计算机中的运算规则有何不同？
  • 医疗AI与融合数据库的整合：挑战、架构与未来展望（上）
  • 小谈相机的学习过程
  • 软考 系统架构设计师系列知识点之杂项集萃（112）
  • jvm-sandbox-repeater 录制和回放
  • 基于深度学习的微表情识别算法研究
  • 智慧园区工程监控与工单管理系统需求文档
  • Go语言里的map
  • RocketMQ源码级实现原理-NameServer路由机制