前端开发面试题总结-vue2框架篇（三）

23、说说浏览器的同源策略？

同源策略
● 是浏览器的一种安全保护策略, 主要是限制一个源对另外一个源资源交互
● 体现在限制页面中 AJAX请求 只能访问同源的服务器资源
●协议/域名(主机)/端口三者相同, 则同源, 如果有一个不同则不同源

24、什么是跨域和如何解决跨域？

跨域
● 网页所在源和 AJAX 请求的源（协议，域名，端口号）不完全相同，就发生跨域访问
○ 比如: 网页运行在http://localhost:8080 接口服务器运行在http://localhost:3000
● 请求能发出去, 服务器也能把数据响应回来, 但是浏览器会阻止数据给回页面

如何解决跨域
● CORS(跨域资源共享)
○ 服务器端：设置 Access-Control-Allow-Origin 响应头字段，允许除了它自己以外的源来访问自己的资源
○ 前端：正常发起 AJAX 请求，无需额外操作
● 代理服务器
○ 在网站运行的本地服务器中架设一个代理服务器, 代理服务器和本地服务器是同源的
○页面中请求先发给代理服务器, 代理服务器再把请求转发给接口服务器, 因为服务器与服务器之间没有跨域问题, 接口服务器能把响应的数据给到代理服务器, 因为代理服务器和项目运行的本地服务器是同源的, 所以浏览器不会触发同源保护

25、在vue项目中如何通过代理服务器解决跨域?

在项目根目录vue.config.js文件中，通过devServer选项来配置代理

// 引入 Vue CLI 的 defineConfig 方法
const { defineConfig } = require('@vue/cli-service');// 导出开发环境的配置
module.exports = defineConfig({// 是否对依赖包进行 Babel 转译（可优化为具体依赖列表）transpileDependencies: true,// 开发服务器配置devServer: {// 开发服务器代理配置proxy: {// 代理 /api 请求到目标服务器'/api': {// 目标

在用axios发请求时, 就不需要配置基地址, 如果所有的接口请求中有相同字段, 比如: /api, 代理服务就可以用/api去匹配接口, 走代理服务器转发

26、有没有使用过vuex？它和Pinia的区别?

使用过, vuex是一个全局状态管理插件
● 当一个项目中多个组件要共同维护一份数据时, 比如: 购物车, 此时就好把购物车数据维护到vuex中
● 当一份数据要在多处使用时, 比如: token, 系统设置, 用户信息, 这些都可以放在vuex中
● 在开发时, 需要添加严格模式 strict:true; 但是开启严格模式会有额外的性能开销, 一旦打包发布会关闭严格模式
●vuex中有一套严格的状态管理机制, 数据定义在state选项中, 操作数据的方法定义在mutations中, 异步操作的方法定义在actions中, 状态的派生用法定义咋getters中; 调用mutations中的方法用this.$store.commit,调用actions中的方法用this.$store.dispatch方法

27、vuex和pinia的区别?

● vuex更多用在vue2中, pinia则更多用在vue3中
● vuex有着严格的状态操作机制, 比如: 定义数据要在state中, 操作数据只能在mutations中, 异步操作只能在actions中, pinia中就没有严格的区分
● vuex中采用的是选项式api, 但是pinia中既有选项式api还有组合式api

28、说一说vue中组件之间如何通信?

根据场景选择：
● 简单父子通信 → Props和$emit
● 跨组件/兄弟 → Event Bus 或 Vuex
● 复杂状态 → Vuex
● 深层嵌套 → provide/inject
● 快速原型 → parent/parent/children（慎用）

29、什么是 Vue 中的 slot？它有什么作用？

在Vue中slot就是插槽, 通常被用于父子组件中, 当父组件在使用子组件时, 需要去定制子组件某个局部的UI结构和内容时, 此时, 我们就可以用到插槽
插槽分为默认插槽和具名插槽
● 默认插槽 只有一个, 可以把传递给子组件的内容直接写在标签的中间, 子组件通过slot标签占位
● 具名插槽 有名称的插槽, 在子组件中可以有多个具名插槽, 父组件在使用时可以根据插槽的名称去往对应的插槽中分发结构和内容
如果子组件需要在插槽中传递数据给父组件, 比如: Element-Plus中的table组件的列中需要传递数据出来, 此时就可以用作用域插槽, 作用域插槽就是在子组件中把数据以属性的形式添加到slot标签上, Vue会把添加上去的属性收集到一个对象中, 那么, 父组件在使用时就可以通过对象.属性的方式获取传递出来的数据

30、有没有封装过组件?

嗯 有的, 在之前做的各类项目中, 都有去封装很多通用的组件, 我就拿我最近做的这个项目中封装的组件来说一说, 因为我最近做的是一个管理系统项目, 我基于Element-Plus中的日历组件, 树形组件, 上传组件都有根据项目业务需要做了二次封装
在开发中, 封装组件一般分为两类, 一类是从零到一封装一个组件, 另一类就是基于现有组件进行二次封装
那我说一下从零到一封装组件的过程:
● 静态结构和样式: 先把组件最完整的静态结构和样式先写出来
● 父传子: 根据使用场景分析, 需要传递哪些属性给子组件, 在子组件的props选项中定义属性接收, 在模板中直接使用, 这样组件的复用性就增强了
● 子传父: 如果父组件需要子组件传递数据出去, 则子组件中通过触发自定义事件(用this.$emit), 父组件注册自定义事件完成; 当然也可以使用v-model或者.sync语法糖优化父子通信
● 插槽: 父组件可以定制子组件内部的结构和内容

31、你了解Vue中的过滤器吗? 它有哪些应用场景?

嗯, 知道的, 过滤器就是在vue2中使用, 在vue3中已经被废弃了, 可以用计算属性或者方法去代替
过滤器一般用于插值表达式{{}}中, 去格式化文本的输出, 比如:
● 价格的格式化输出
● 大小写统一格式化
● 日期格式化
过滤器有局部的和全局的:

// 全局过滤器
Vue.filter('capitalize', function(value) {if (!value) return '';return value.charAt(0).toUpperCase() + value.slice(1);
});// 局部过滤器
new Vue({filters: {currency(value) {return `¥${value.toFixed(2)}`;}}
});

32、怎么在组件初始化时立即调用 Vue 的 watch 函数？

1. 使用 immediate 选项
   当immediate 属性的值设置为 true 时，就会在组件初始化（也就是首次渲染）时，立即执行一次对应的 watch 回调函数，而不需要等待被监听的数据发生实际的变化。
2. 在 created 或 mounted 生命周期钩子中手动调用 watch 回调函数

33、在 Vue 组件中如何获取当前的路由信息？

在 Vue 组件中获取当前的路由信息，可以通过 this.$route属性。this.$route 是一个 Vue Router 提供的对象，包含了当前路由的所有信息，如路径、参数、查询字符串等。例如，你可以在任何组件的 mounted 生命周期钩子中访问这个对象:

34、你在项目中使用了 Vue Router 全局路由守卫，请解释一下路由守卫的概念和用法，并介绍一下它在你项目中的实际应用场景？

有用过的, 在之前的管理系统项目中做权限管理时就有用到

1. 在 Vue Router 中，有三种类型的导航守卫方法可以使用:
   ● 全局守卫：beforeEach 和 afterEach
   ● 独享路由守卫：beforeEnter
   ● 组件内路由守卫：beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave

2. 导航守卫的执行顺序如下
   ● 全局前置守卫 -> 路由独享守卫 -> 组件内守卫 -> 全局后置守卫

3. 导航守卫的参数如下
   ● to: 即将要进入的目标路由对象, 包含了目标路由的路径、参数、查询参数等信息，可以用来判断要导航到哪个路由
   ● from: 当前导航正要离开的路由, 包含了当前路由的路径、参数、查询参数等信息，可以用来判断当前路由的状态
   ● next 方法：用于控制导航行为。它有以下几种用法：
   ○ next() 允许导航，继续进行下一步导航操作
   ○ next(false) 取消导航，终止当前导航操作
   ○ next(‘/’) 或 next({ path: ‘/’ }) 重定向到指定的路径
   ○ next(error) 导航出错，可以传递一个错误对象给 next 方法

35、怎么理解vue中的虚拟DOM

Vue中的虚拟DOM（Virtual DOM） 是一个轻量级的JavaScript对象，用于高效描述真实DOM结构，主要目的在于优化渲染性能。其核心原理与作用如下：
● 虚拟DOM本质：用JS对象模拟真实DOM节点（包含标签名、属性、子节点等信息）。
● 内存计算：DOM操作昂贵，虚拟DOM先在内存中计算差异，再批量更新真实DOM，减少直接操作真实DOM的次数。
工作流程
● 生成阶段：组件数据变化时，Vue的render函数生成新的虚拟DOM树。
● Diff算法：对比新旧虚拟DOM树（同层比较，避免跨层级对比），找出最小变更。
● 局部更新：仅对差异部分更新真实DOM，而非整体替换。
关键优化点
● Diff策略：
○ 标签名不同：直接替换整个子树。
○ 标签名相同：复用节点，仅更新属性和子节点。
○ Key的作用：通过唯一key标识节点，帮助Diff算法高效识别节点移动/复用（如列表渲染）。
● 异步批量更新：多次数据变更合并为一次渲染（避免频繁重绘）。
为什么需要虚拟DOM？
● 性能瓶颈：直接操作真实DOM成本高（重排、重绘）。
● 抽象层价值：开发者只需关注数据，无需手动操作DOM，同时保证大规模更新的效率。
● 跨平台能力：虚拟DOM与平台无关，可适配服务端渲染（SSR）、原生应用（如Weex）等场景。