【直接收藏】前端 VUE 高阶面试题（三）
最新回答
奶气缠身
2024-09-08 01:25:16
1、vue生命周期
1）、生命周期是什么？ Vue实例有一个完整的生命周期，包含数据挂载、模板渲染、组件更新和组件销毁四个阶段，每个阶段有特定的钩子函数。
2）、各个阶段及其钩子函数
数据挂载阶段：beforeCreate和created
模板渲染阶段：beforeMount和mounted
组件更新阶段：beforeUpdate和updated
组件销毁阶段：beforeDestroy和destroyed
当使用keep-alive时，额外有组件激活和停用阶段：activited和deactivated
2、请求位置与时机
请求建议在created阶段，而不是beforeMount或mounted中。
原因：
不能在beforeCreate，因为data尚未挂载到Vue实例上。
避免在beforeMount和mounted中执行请求，因为这可能会延迟页面加载，且不符合SSR（服务器端渲染）的兼容性。
1、父子组件间传值
父到子：props，子到父：$emit
其他方式：$ref、$parent、事件总线、集中管理（$root）
2、兄弟组件间传值
使用事件总线、集中管理或先子到父再父到子（结合props与$emit）
3、v-if与v-for同时使用
可以同时使用，但避免在循环时仅满足v-if条件较少，可能导致性能问题。
优化：在computed属性中循环数组并过滤所需数据，避免v-if直接作用于循环。
4、跨域配置
使用反向代理，在vue.config.js中设置。
5、v-bind作用
v-bind指令用于动态绑定属性，支持属性名与属性值动态化。
6、插槽理解
插槽用于组件内容管理，分为单个插槽与具名插槽。
7、$nextTick与定时器区别
二者都是延迟执行，$nextTick在当前队列末尾执行，而定时器在下一个队列队首。
8、事件总线用法
借助全局Vue对象绑定事件与触发事件，实现组件间通信。
9、mounted与created区别
created在数据挂载后调用，此时DOM未更新；mounted在模板首次渲染后调用，DOM已更新。
10、v-model原理
v-model结合了属性绑定和事件，实现表单元素值的双向绑定。
11、data配置函数
使用函数确保每个Vue实例的data数据独立性。
12、computed与watch的区别
computed计算属性用于读取数据并返回计算结果，watch监听数据变化并执行回调。
13、生命周期？网络请求挂载在mounted中的原因
生命周期：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。挂载网络请求在mounted中，确保页面加载后进行网络操作。
14、指令在项目中的封装
使用Vue指令来实现常用功能，如v-LazyLoad、v-premission等。
15、移动端适配与rem应用
使用amfe-flexible和postcss-pxtorem实现移动端适配，确保页面在不同设备上的响应式。
16、用户验证权限
通过后台管理系统实现用户权限验证，通常涉及角色与权限关联。
17、vuex数据刷新问题解决
将vuex数据持久化存储在本地，避免刷新页面时数据丢失。
18、vue2与vue3区别
新增生命周期钩子、setup函数、renderTracked与renderTriggered等。
19、虚拟DOM实现原理
构建虚拟DOM树，通过diff算法对比新旧虚拟DOM，仅更新差异部分到真实DOM，提高性能。
20、角色权限分配
引入角色媒介，通过角色关联权限，再关联用户，实现权限控制。
21、双向数据绑定与单向数据流的优缺点
双向数据绑定能够实现视图与数据的即时更新，但可能带来性能问题；单向数据流则更注重数据流的控制与性能优化。
22、Vue响应式系统实现
通过数据劫持与发布者-订阅者模式实现响应式，当数据变化时，自动触发视图更新。
23、为什么需要虚拟DOM进行diff检测
减少DOM操作，优化性能，通过对比新旧虚拟DOM差异，生成补丁并应用到真实DOM。
24、Vue生命周期钩子问题
Vue没有类似于React的shouldComponentUpdate，因为其响应式系统已经足够高效。
25、Vue中的key用途
key用于追踪虚拟DOM的变化，避免不必要的DOM操作，提高性能，同时在过渡切换时区分元素。
26、不能用index做key的原因
避免性能损耗、代码规范、类型化管理、列表顺序不稳定等。
27、在Vue中使用JSX语法
JSX支持在Vue模板中使用，提高代码可读性与效率，但部分Vue项目更偏好模板语法。
热门标签
