前端三大核心是网页开发的基础，Vue则是基于它们构建的“生产力工具”。

通俗理解就是HTML是化妆的工具如眉笔，CSS是化妆品如口红，JavaScript是化妆后的互动，而Vue就是化妆助手。有了化妆工具、化妆品和化妆后的交互，化妆助手将这些元素整合起来，打造出一个完美的妆容。

Vue全称Vue.js，是一个前端框架。

其核心特点：响应式数据绑定、组件化开发、渐进式集成、虚拟 DOM

用Vue写过几个网站，感觉比较突出的特点就是它的响应式数据绑定v-model和组件化开发。

双向数据绑定v-model，单向数据绑定v-bind。

组件化开发最喜欢它的每个页面单独分开，且有自己的HTML、CSS和JavaScript，每次要调整网页的时候也方便查找到具体代码。

组件嵌套我不怎么用，只会在页面嵌套一个组件，然后第一个实习公司就用了嵌套，还是嵌套了两个组件

前端面试题（这是前端老师给的，答案是问豆包的）

1. Vue.js 为何不推荐在一个元素上同时使用 v-if 和 v-for 指令？

优先级问题： v-for 的优先级高于 v-if ，同时使用时，每次循环都需要先执行 v-if 判断，影响性能。

逻辑混乱： v-for 用于循环渲染， v-if 用于条件渲染，两者职责不同，同时使用会让代码逻辑不清晰，维护性差。

改进：先通过计算属性过滤数据，再用 v-for 渲染。

2. Vue.js 中 provide( ) 和 inject( ) 函数有何用途？

跨级组件通信：用于祖先组件向后代组件传递数据，无需逐层通过 props 传递。祖先组件中通过 provide() 暴露数据，后代组件中通过 inject() 接收数据。我理解为provide()发送数据，inject()接收数据。

注意： provide/inject 是单向绑定，后代组件修改数据不会影响祖先组件，适合传递静态数据或回调函数。

3. Vue.js 中如何自定义“双向绑定”？

在标签里用通过v-model绑定数据。

平常都是先定义一个变量，使用的时候把这个变量在组件里用v-model绑定。如：

在JavaScript里const num=ref(0);

在HTML里<input v-model=＂num＂>，<p>{{num}}</p>

4. Vue.js 2.x 和 Vue.js 3.x 在响应性的具体实现方面有何不同？

实现原理：

Vue2：基于 Object.defineProperty() 方法实现响应式。

Vue3：使用 ES6 的 Proxy 对象实现响应式。相比 Object.defineProperty() 更加灵活和强大。

响应式范围：

Vue2：只能劫持对象的属性，对于新增或删除属性需要使用 Vue.set() 和 Vue.delete() 方法才能实现响应式。对于数组，只能劫持部分变异方法（如 push() 、 pop() 、 shift() 、 unshift() 等），直接通过索引修改数组元素或修改数组长度无法触发响应式更新。

Vue3：Proxy 可以劫持整个对象，新增或删除属性都能自动触发响应式更新，无需额外的方法。对数组的操作也能完全响应式，无论是通过索引修改元素还是修改数组长度，都能正常更新视图。

性能表现：

Vue2：在初始化时需要递归遍历对象的所有属性，将其转换为 getter/setter ，对于大型对象或嵌套层级较深的对象，初始化性能开销较大。

Vue3： Proxy 是对整个对象进行拦截，不需要递归遍历，初始化性能更好，尤其是在处理大型数据结构时优势明显。

我答：首先是实现原理方面，vue2是基于 Object.defineProperty() 方法实现响应式，vue3使用 ES6 的 Proxy 对象实现响应式；响应式范围方面，vue2只只能劫持对象的属性，对于新增或删除属性需要使用 Vue.set() 和 Vue.delete() 方法才能实现响应式，对于数组只能劫持部分变异方法（如push() 等），vue3的Proxy 可以劫持整个对象，新增或删除属性都能自动触发响应式更新，无需额外的方法，对数组的操作也能完全响应式。

5. Vue.js 的渲染系统为何基于“虚拟 DOM”构建？

性能优化：虚拟DOM通过JS对象模拟真实DOM结构，对比差异时仅在内存中操作，避免频繁操作真实DOM（真实DOM操作开销大）。最终只将差异部分更新到真实DOM，减少重绘和回流。

跨平台能力：虚拟DOM与平台无关，可基于同一套逻辑渲染到浏览器、移动端（如Weex）或小程序。

组件化复用：虚拟DOM将组件抽象为JS对象，便于组件的嵌套、复用和状态管理。

我答：因为真实DOW操作开销大，用虚拟DOW只将差异部分更新到真实DOM，这样可以减少重绘和回流。

要完，不知道什么是重绘和回流

重绘：当元素的外观（如颜色、背景、边框等）发生改变，但不影响其在文档流中的位置和布局时，浏览器会重新绘制该元素的过程。我理解为盒子的CSS改变就叫重绘

回流：当元素的尺寸、位置或布局相关属性发生改变，导致浏览器需要重新计算元素在页面中的位置和几何结构，并更新页面布局的过程。盒子的HTML改变就叫回流

回流必定会触发重绘，因为布局变化后元素的外观可能需要更新；重绘不一定触发回流，如仅修改颜色时，布局未变。

6. 简述 Vue.js 组件实例的生命周期。

创建阶段：

beforeCreate ：实例刚创建，数据和DOM未初始化。

created ：数据初始化完成，可访问 data 和 methods ，但未挂载DOM。

挂载阶段：

beforeMount ：模板编译完成，即将生成真实DOM。

mounted ：真实DOM挂载完成，可操作DOM，常用于发起API请求。

更新阶段：

beforeUpdate ：数据更新前，虚拟DOM尚未重新渲染。

updated ：数据更新完成，真实DOM已更新。

销毁阶段：

beforeDestroy ：实例销毁前，仍可访问实例属性。

destroyed ：实例销毁完成，所有事件和监听被移除。

7. 谈谈你对 Vue Router 导航守卫的理解。

用于路由跳转前后拦截导航，控制页面访问权限、加载数据等。

8. 谈谈你对 Axios 拦截器的理解。

在请求发送前或响应接收后统一处理数据，避免重复代码（如添加请求头、错误处理）。