当前位置:首页 > 技术文章 > 正文内容

第二篇 前端框架Vue.js(vue前端框架简介)

zonemu1周前 (07-26)技术文章4


前端三大核心是网页开发的基础,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 渲染。

  1. Vue.js 中 provide( ) 和 inject( ) 函数有何用途?

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

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

  1. Vue.js 中如何自定义“双向绑定”?

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

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

在JavaScript里const num=ref(0);

在HTML里<input v-model="num">,<p>{{num}}</p>

  1. 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 可以劫持整个对象,新增或删除属性都能自动触发响应式更新,无需额外的方法,对数组的操作也能完全响应式。

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

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

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

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

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

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

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

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

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

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

创建阶段

beforeCreate :实例刚创建,数据和DOM未初始化。

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

挂载阶段

beforeMount :模板编译完成,即将生成真实DOM。

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

更新阶段

beforeUpdate :数据更新前,虚拟DOM尚未重新渲染。

updated :数据更新完成,真实DOM已更新。

销毁阶段

beforeDestroy :实例销毁前,仍可访问实例属性。

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

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

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

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

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

相关文章

中信泰富&amp;明源云——搭建营销费用管理系统,实现3个在线化

3月23日,中信泰富地产与明源云合作的营销费用管理系统业务解决方案汇报在中信泰富大厦顺利结束。 (会议现场)这是自双方合作以来,继今年1月底项目启动会后的又一重要推进动作,本次汇报得到了双方领导的高度...

7种超轻量级的Linux发行版,能够帮助你找到适合自己的操作系统

Linux是一种非常受欢迎的开源操作系统,而且有许多版本可以选择。有时候,你需要一种超轻量级的Linux发行版,它可以在资源有限的设备上运行,并且能够快速启动。本文将介绍7种超轻量级的Linux发行版...

Garuda Linux:现代化、注重性能与美观的Linux发行版

什么是 Garuda Linux?Garuda Linux 是一个基于 Arch Linux 的现代化、注重性能与美观的桌面操作系统。它面向对性能有较高要求的用户,尤其受到 Linux 爱好者、游戏玩...

Vue3 如何实现父子组件传值?(vue父子组件传值props)

在Vue 3中,要实现父子组件传值效果主要通过props和emit两种机制来实现,下面我们就来详细介绍一下这两种机制。父组件向子组件传值propsprops是Vue组件的一种机制,主要的作用就是实现从...

Vue3,父组件子组件传值,provide(提供)和inject(注入)传值

父组件向子组件传值父子组件传递数据时,通常使用的是props和emit,父向子传递使用props,子向父传递使用emit。子组件接收3种方式// 1、简单接收 props:["title...

vue3-内置组件-Teleport(vue内置指令有哪些)

Teleport<Teleport> 是一个内置组件,它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。基本用法有时我们可能会遇到这样的场景:一个组件模板的一部...