前端三大核心是网页开发的基础,Vue则是基于它们构建的“生产力工具”。
通俗理解就是HTML是化妆的工具如眉笔,CSS是化妆品如口红,JavaScript是化妆后的互动,而Vue就是化妆助手。有了化妆工具、化妆品和化妆后的交互,化妆助手将这些元素整合起来,打造出一个完美的妆容。
Vue全称Vue.js,是一个前端框架。
其核心特点:响应式数据绑定、组件化开发、渐进式集成、虚拟 DOM
用Vue写过几个网站,感觉比较突出的特点就是它的响应式数据绑定v-model和组件化开发。
双向数据绑定v-model,单向数据绑定v-bind。
组件化开发最喜欢它的每个页面单独分开,且有自己的HTML、CSS和JavaScript,每次要调整网页的时候也方便查找到具体代码。
组件嵌套我不怎么用,只会在页面嵌套一个组件,然后第一个实习公司就用了嵌套,还是嵌套了两个组件
前端面试题(这是前端老师给的,答案是问豆包的)
- Vue.js 为何不推荐在一个元素上同时使用 v-if 和 v-for 指令?
优先级问题: v-for 的优先级高于 v-if ,同时使用时,每次循环都需要先执行 v-if 判断,影响性能。
逻辑混乱: v-for 用于循环渲染, v-if 用于条件渲染,两者职责不同,同时使用会让代码逻辑不清晰,维护性差。
改进:先通过计算属性过滤数据,再用 v-for 渲染。
- Vue.js 中 provide( ) 和 inject( ) 函数有何用途?
跨级组件通信:用于祖先组件向后代组件传递数据,无需逐层通过 props 传递。祖先组件中通过 provide() 暴露数据,后代组件中通过 inject() 接收数据。我理解为provide()发送数据,inject()接收数据。
注意: provide/inject 是单向绑定,后代组件修改数据不会影响祖先组件,适合传递静态数据或回调函数。
- Vue.js 中如何自定义“双向绑定”?
在标签里用通过v-model绑定数据。
平常都是先定义一个变量,使用的时候把这个变量在组件里用v-model绑定。如:
在JavaScript里const num=ref(0);
在HTML里<input v-model="num">,<p>{{num}}</p>
- 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 可以劫持整个对象,新增或删除属性都能自动触发响应式更新,无需额外的方法,对数组的操作也能完全响应式。
- Vue.js 的渲染系统为何基于“虚拟 DOM”构建?
性能优化:虚拟DOM通过JS对象模拟真实DOM结构,对比差异时仅在内存中操作,避免频繁操作真实DOM(真实DOM操作开销大)。最终只将差异部分更新到真实DOM,减少重绘和回流。
跨平台能力:虚拟DOM与平台无关,可基于同一套逻辑渲染到浏览器、移动端(如Weex)或小程序。
组件化复用:虚拟DOM将组件抽象为JS对象,便于组件的嵌套、复用和状态管理。
我答:因为真实DOW操作开销大,用虚拟DOW只将差异部分更新到真实DOM,这样可以减少重绘和回流。
要完,不知道什么是重绘和回流
重绘:当元素的外观(如颜色、背景、边框等)发生改变,但不影响其在文档流中的位置和布局时,浏览器会重新绘制该元素的过程。我理解为盒子的CSS改变就叫重绘
回流:当元素的尺寸、位置或布局相关属性发生改变,导致浏览器需要重新计算元素在页面中的位置和几何结构,并更新页面布局的过程。盒子的HTML改变就叫回流
回流必定会触发重绘,因为布局变化后元素的外观可能需要更新;重绘不一定触发回流,如仅修改颜色时,布局未变。
- 简述 Vue.js 组件实例的生命周期。
创建阶段:
beforeCreate :实例刚创建,数据和DOM未初始化。
created :数据初始化完成,可访问 data 和 methods ,但未挂载DOM。
挂载阶段:
beforeMount :模板编译完成,即将生成真实DOM。
mounted :真实DOM挂载完成,可操作DOM,常用于发起API请求。
更新阶段:
beforeUpdate :数据更新前,虚拟DOM尚未重新渲染。
updated :数据更新完成,真实DOM已更新。
销毁阶段:
beforeDestroy :实例销毁前,仍可访问实例属性。
destroyed :实例销毁完成,所有事件和监听被移除。
- 谈谈你对 Vue Router 导航守卫的理解。
用于路由跳转前后拦截导航,控制页面访问权限、加载数据等。
- 谈谈你对 Axios 拦截器的理解。
在请求发送前或响应接收后统一处理数据,避免重复代码(如添加请求头、错误处理)。