品牌 资讯 搭配 材料 时尚 热点 行业 首饰 玉石 行情

微速讯:vue面试题八股文简答大全 让你更加轻松的回答面试官的vue面试题

2023-04-07 19:14:39 来源:腾讯云

你对vue框架的理解?

Vue.js是一个流行的JavaScript框架,它使得构建复杂的交互式应用程序变得更容易。Vue.js基于MVVM模式设计,采用了响应式数据绑定和组件化的架构。在Vue.js中,数据绑定是非常重要的概念,它通过使用观察者模式来追踪数据变化并自动更新DOM。

Vue.js源码是一个庞大而复杂的项目,但通过掌握其核心概念,我们可以更好地理解其工作原理。在本文中,我们讨论了Vue.js的响应式数据绑定、虚拟DOM、模板编译、组件、生命周期钩子、事件处理和指令等关键知识点。了解这些知识点可以让我们更好地编写Vue.js应用程序,并深入了解Vue.js的工作原理


(资料图)

计算属性和侦听器

Vue.js提供了计算属性和侦听器来处理数据的变化。计算属性是用于计算和缓存的属性,而侦听器则允许你监听数据的变化并执行特定的操作。这两个概念都是基于Vue.js的响应式数据绑定实现的。

计算属性的实现是通过使用Object.defineProperty()方法来定义getter和setter方法。当计算属性依赖的数据发生变化时,计算属性会重新计算,这样可以避免重复计算。侦听器则是通过使用Watcher对象来实现的。

Vue.js中的虚拟DOM

Virtual DOM是Vue.js的一个核心概念,它是一个“轻量级”的DOM副本,作为内存中的JavaScript对象存在。每次数据发生变化时,Vue.js会计算需要更新的最小DOM子树,然后只更新这些部分。这种方法比直接操作真实DOM要快得多。

在Vue.js中,虚拟DOM由VNode类来表示。VNode类有一些属性:tag、data、children等。VNode实例通常通过createElement()方法创建,该方法返回一个VNode实例。

模板编译

Vue.js使用模板来描述应用程序的界面,而模板编译是将模板转换为渲染函数的过程。在Vue.js中,模板编译是由template编译器来处理的。它将模板解析为AST(抽象语法树),然后将AST转换为渲染函数。

Vue.js的模板编译器是独立的,可以在浏览器中运行。在开发环境中,模板编译器会被自动加载,并且Vue.js还提供了一个单独的运行时构建,不包含模板编译器。这意味着你需要在构建工具中对模板进行预编译,或者使用手动渲染函数。

组件

组件是Vue.js的另一个核心概念,它允许你构建可重用和可组合的UI组件。在Vue.js中,每个组件都是一个Vue实例,并且可以包含其他组件。组件可以接收属性(props)和发射事件,以便与其他组件进行通信。

Vue.js中的组件是通过Vue.extend()方法来创建的。该方法将基本Vue类与组件定义合并,并返回一个新的构造函数。然后可以在应用程序中使用自定义标记(例如)来创建组件实例。

生命周期钩子

Vue.js的生命周期钩子是一系列函数,它们定义了Vue实例在不同阶段执行的操作。这些阶段包括:创建、挂载、更新和销毁。生命周期钩子可以在Vue实例的选项对象中定义。

在Vue.js中有7个生命周期钩子:

created: 在Vue实例创建后调用,但在模板渲染之前。

mounted: 在Vue实例挂载到DOM上后调用。

updated: 在Vue实例数据被更新后调用,但在DOM重新渲染之前。

destroyed: 在Vue实例销毁之前调用。

beforeCreate: 在Vue实例创建之前调用。

beforeMount: 在Vue实例挂载到DOM之前调用。

beforeUpdate: 在Vue实例数据更新之前调用,但在DOM重新渲染之前。

Vue.js中的事件处理

在Vue.js中,你可以使用v-on指令来绑定DOM事件。例如,你可以使用v-on:click来监听点击事件。事件处理程序可以是内联函数,也可以是Vue.js组件的方法。事件处理程序可以接收一个事件对象作为参数。

在Vue.js的事件处理中,事件是经过封装的。在组件内部使用$emit方法触发事件,在组件之间使用$on来监听事件。这样可以避免直接操作dom元素,使代码更加清晰和易于维护。

Vue.js中的指令

Vue.js中的指令是特殊的HTML属性,它们可以用于指定某些特殊行为。例如,v-if和v-for指令用于条件渲染和循环渲染。指令可以接收表达式作为参数,并可以在表达式变化时进行更新。

Vue.js提供了一些内置指令,包括v-model、v-bind、v-on等。我们可以自定义指令来扩展Vue.js的功能。自定义指令需要使用Vue.directive()方法来定义。

简述MVVM

MVVM是Model-View-ViewModel缩写,也就是把MVC中的Controller演变成ViewModel。Model层代表数据模型,View代表UI组件,ViewModel是View和Model层的桥梁,数据会绑定到viewModel层并自动将数据渲染到页面中,视图变化的时候会通知viewModel层更新数据。

v-for中key的作用

key的作用主要是为了更高效的对比虚拟DOM中每个节点是否是相同节点;Vue在patch过程中判断两个节点是否是相同节点,key是一个必要条件,渲染一组列表时,key往往是唯一标识,所以如果不定义key的话,Vue只能认为比较的两个节点是同一个,哪怕它们实际上不是,这导致了频繁更新元素,使得整个patch过程比较低效,影响性能;从源码中可以知道,Vue判断两个节点是否相同时主要判断两者的key和元素类型等,因此如果不设置key,它的值就是undefined,则可能永 远认为这是两个相同的节点,只能去做更新操作,这造成了大量的dom更新操作,明显是不可取的。

vue组件的通信方式

父子组件通信

父->子props,子->父 $on、$emit获取父子组件实例 parent、parent、children Ref 获取实例的方式调用组件的属性或者方法 Provide、inject官方不推荐使用,但是写组件库时很常用

兄弟组件通信

Event Bus 实现跨组件通信 Vue.prototype.$bus = new Vue() Vuex

跨级组件通信

$attrs、$listeners Provide、inject

路由传参

使用router-link进行路由导航,传递参数直接调用$router.push 实现携带参数的跳转通过路由属性中的name来确定匹配的路由,通过params来传递参数使用path来匹配路由,然后通过query来传递参数,这种情况下 query传递的参数会显示在url

路由的两种模式 hash与history

对于Vue 这类渐进式前端开发框架,为了构建SPA(单页面应用),需要引入前端路由系统,这也就是Vue-router存在的意义。前端路由的核心,就在于改变视图的同时不会向后端发出请求。

1、hash ——即地址栏URL中的#符号,它的特点在于:hash 虽然出现URL中,但不会被包含在HTTP请求中,对后端完全没有影响,因此改变hash不会重新加载页面。

2、history ——利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法。这两个方法应用于浏览器的历史记录站,在当前已有的back、forward、go 的基础之上,它们提供了对历史记录进行修改的功能。只是当它们执行修改是,虽然改变了当前的URL,但你浏览器不会立即向后端发送请求。history模式,会出现404 的情况,需要后台配置。

双向绑定实现原理

当一个Vue实例创建时,Vue会遍历data选项的属性,用 Object.defineProperty 将它们转为 getter/setter并且在内部追踪相关依赖,在属性被访问和修改时通知变化。每个组件实例都有相应的 watcher 程序实例,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的 setter 被调用时,会通知 watcher重新计算,从而致使它关联的组件得以更新。

v-model的实现以及它的实现原理吗?

vue中双向绑定是一个指令v-model,可以绑定一个动态值到视图,同时视图中变化能改变该值。v-model是语法糖,默认情况下相于:value和@input。使用v-model可以减少大量繁琐的事件处理代码,提高开发效率,代码可读性也更好通常在表单项上使用v-model原生的表单项可以直接使用v-model,自定义组件上如果要使用它需要在组件内绑定value并处理输入事件我做过测试,输出包含v-model模板的组件渲染函数,发现它会被转换为value属性的绑定以及一个事件监听,事件回调函数中会做相应变量更新操作,这说明神奇魔法实际上是vue的编译器完成的。

new Vue后整个的流程

initProxy:作用域代理,拦截组件内访问其它组件的数据。

initLifecycle:建立父子组件关系,在当前组件实例上添加一些属性和生命周期标识。如Math Processing Errorparent,parent,refs,$children,_isMounted等。

initEvents:对父组件传入的事件添加监听,事件是谁创建谁监听,子组件创建事件子组件监听

initRender:声明Math Processing Errorslots和slots和createElement()等。

initInjections:注入数据,初始化inject,一般用于组件更深层次之间的通信。

initState:重要)数据响应式:初始化状态。很多选项初始化的汇总:data,methods,props,computed和watch。

initProvide:提供数据注入。

思考:为什么先注入再提供呢??

1、首先来自祖辈的数据要和当前实例的data,等判重,相结合,所以注入数据的initInjections一定要在InitState的上面。

从上面注入进来的东西在当前组件中转了一下又提供给后代了,所以注入数据也一定要在上面。

keep-alive的实现

keep-alive是Vue的内置组件,实现组件缓存。当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁。

keep-alive是系统自带的一个组件,用来缓存组件,避免多次加载相同的组件,减少性能消耗,提高用户体验。

例如我们可以在列表页进入详情页使用。如果在列表页点击的都是相同的 ,详情页就不用请求多次了,直接缓存起来就行了,如果点击的不同,则需要重新请求数据

vuex、vue-router实现原理

vuex是一个专门为vue.js应用程序开发的状态管理库。 核心概念:

state(单一状态树) getter/Mutation显示提交更改state

Action类似Mutation,提交Mutation,可以包含任意异步操作。

module(当应用变得庞大复杂,拆分store为具体的module模块)

你怎么理解Vue中的diff算法?

在js中,渲染真实DOM的开销是非常大的, 比如我们修改了某个数据,如果直接渲染到真实DOM, 会引起整个dom树的重绘和重排。那么有没有可能实现只更新我们修改的那一小块dom而不要更新整个dom呢?此时我们就需要先根据真实dom生成虚拟dom, 当虚拟dom某个节点的数据改变后会生成有一个新的Vnode, 然后新的Vnode和旧的Vnode作比较,发现有不一样的地方就直接修改在真实DOM上,然后使旧的Vnode的值为新的Vnode。

diff的过程就是调用patch函数,比较新旧节点,一边比较一边给真实的DOM打补丁。在采取diff算法比较新旧节点的时候,比较只会在同层级进行。 在patch方法中,首先进行树级别的比较 new Vnode不存在就删除 old Vnodeold Vnode 不存在就增加新的Vnode 都存在就执行diff更新 当确定需要执行diff算法时,比较两个Vnode,包括三种类型操作:属性更新,文本更新,子节点更新 新老节点均有子节点,则对子节点进行diff操作,调用updatechidren 如果老节点没有子节点而新节点有子节点,先清空老节点的文本内容,然后为其新增子节点 如果新节点没有子节点,而老节点有子节点的时候,则移除该节点的所有子节点 老新老节点都没有子节点的时候,进行文本的替换

updateChildren 将Vnode的子节点Vch和oldVnode的子节点oldCh提取出来。 oldCh和vCh各有两个头尾的变量StartIdx和EndIdx,它们的2个变量相互比较,一共有4种比较方式。如果4种比较都没匹配,如果设置了key,就会用key进行比较,在比较的过程中,变量会往中间靠,一旦StartIdx>EndIdx表明oldCh和vCh至少有一个已经遍历完了,就会结束比较。

标签:

(责任编辑:)

相关文章

微速讯:vue面试题八股文简答大全 让你更加轻松的回答面试官的vue面试题

​Vue js是一个流行的JavaScript框架,它使得构建复杂的交互式应用程序变得更容易。Vue js基于MVVM模式设计,采用了响应式数据绑定和组件化的架构

2023-04-07 19:14:39

前沿资讯!华铁股份(000976.SZ):控股股东拟进行合伙人变更

​格隆汇4月7日丨华铁股份(000976 SZ)公布,收到控股股东拉萨泰通的《告知函》后获悉,拉萨泰通普通合伙人宣瑞国拟受

2023-04-07 18:24:02

天天快播:开封市水岸社区联合开封市康复医院、共青团商丘学院共同开展“世界卫生日”“颈肩腰腿痛”专场义诊主题宣传活动

​为做好2023年世界卫生日宣传工作,提高社区居民群众的健康意识水平,社区为居民提供贴心、便民的医疗服务。2023年4月7日下午,水岸社区党委、

2023-04-07 17:13:48

环球实时:SMM锰硅期评:黑色期货下行 锰硅弱势跟跌

​今日SM2305主力合约开盘开于7156元 吨,开盘后震荡下行在14:17达到7164元 吨,随后震

2023-04-07 16:36:53

安赫尔-科雷亚母亲因癌去世,他曾经历幼时丧父、哥哥被杀&心脏病 天天热门

​直播吧4月7日讯据马竞官方消息,安赫尔-科雷亚的母亲在经历三年的抗癌斗争后去世,球员因此缺席球队训练。据过去的媒体采访

2023-04-07 15:34:51

瑞典确认“北溪”遭到蓄意破坏 但犯案人员难以确定

​瑞典检方周四发布公报称,再次确认“北溪”天然气管道遭到蓄意破坏,但表示目前难以确定实施破坏的犯案人员。瑞典检方在公报中称,“对在现...

2023-04-07 14:55:42

写景大作文350字的(通用25篇)

​写景大作文350字的第1篇关于国庆节作文350关于国庆节作文350【1】今天是你的生日我的中国一首多么雄伟而又亲切的歌曲再次在我的耳边回响起来,

2023-04-07 13:37:38

一张图:黄金原油外汇股指"枢纽点+多空占比"一览(2023/04/07周五)

​汇通财经APP讯——一张图:黄金原油外汇股指“枢纽点+多空占比”一览。今日(2023 04 07周五)最新出炉的数据显示,截止上个交易日结束时...

2023-04-07 12:19:58

公布!首届“多彩永定”冬季摄影大赛获奖作品

​公布!首届“多彩永定”冬季摄影大赛获奖作品

2023-04-07 11:15:39

中金:维持香港中旅“中性”评级 目标价1.8港元 世界最新

​中金发布研究报告称,维持香港中旅(00308)“中性”评级,2023 24年盈利预测2 5 3 5亿港元,目标价1 8港元,上行空间8%。公司2022年营业收入30

2023-04-07 10:39:16

速看:同济大学浙江学院在哪里_同济大学浙江学院宿舍条件

​1、有好的,也有不好的09新建寝室有太阳能热水器,08没有,没空调,洗衣房有洗衣机太阳能热水器夏天天热无所谓。2、冬天寒

2023-04-07 09:51:11

天天速读:海天瑞声:奥比中光目前不是公司所服务的客户

​海天瑞声(688787)04月07日在投资者关系平台上答复了投资者关心的问题。

2023-04-07 09:01:55

新股消息丨乡村基快餐第三次递表港交所 旗下两大品牌餐厅共1154家 聚看点

​智通财经获悉,据港交所4月6日披露,乡村基快餐连锁控股有限公司向港交所主板递交上市申请,高盛、招银国际为其联席保荐人。值

2023-04-07 07:47:47

星星的礼物钟仓小学_当前动态

​星星的礼物钟仓小学,星巴出生的爱心愿之物!星有个奇奇奇想?或许愿星人送给你一份特殊的礼物,你们曾经有过过它的人。它代表我

2023-04-07 06:11:34

初级会计师《经济法基础》模考试卷(44)

​初级会计师《经济法基础》模考试卷(44) 网上课程学习请电话咨询:400-622-5005!

2023-04-07 06:24:29

为应对缺水危机 意大利出台“抗旱法令” 世界实时

​4月7日电,为应对今年的缺水危机,意大利政府当地时间4月6日通过一项“抗旱法令”。法令内容包括简化授权程序,加快水利基础

2023-04-07 03:18:44

“三斤牛肉”巧解农户麦地纠纷

​“三斤牛肉”巧解农户麦地纠纷---“马大娘,牛吃你家麦子,拿牛肉给你赔罪来咯,这下算是两清了。此前,村民王大爷在放牛时,由于管理不善...

2023-04-06 22:56:10

平安夜送苹果有什么坏处_播报

​平安夜送苹果有的坏处,苹果代表平安、祥和、祥和,以及为是苹果。平安夜是一种习俗的代表,之所以苹果的谐音,代表着平安、祥和

2023-04-06 21:15:53

瑞丰新材:2022年净利润同比增193% 拟10转9派23元 聚看点

​4月6日电,瑞丰新材公告,2022年公司实现营业收入30 46亿元,同比增长181 77%;归母净利润5 88亿元,同比

2023-04-06 21:03:08

当前简讯:驻缅使馆解救被困中国公民

​近日,1名中国公民被不法分子诱骗偷渡至缅甸掸邦大其力,被强制要求从事电信诈骗违法犯罪活动,并遭受殴打拘禁,生命安全受到威胁。中国驻缅甸

2023-04-06 19:59:39

#全成都最“慢”的咖啡馆# 却照亮了心智障碍孩子的天空

​在成都竹林巷,有家“星空里”咖啡书店,这里大多数员工都是心智障碍患者,他们被唤作“特需”伙伴——被特别需要的伙伴。这里的服务很“慢...

2023-04-06 18:58:51

4月6日白银晚评:衰退担忧加剧聚焦非农 白银行情调整看涨-环球快资讯

​北京时间周四(4月6日)亚洲时段,白银行情短线下跌至低点,随后震荡上涨,欧市盘中保持涨势,维持震荡。目前交投于25 00美元 盎司附近,截至

2023-04-06 17:41:16

全球今日报丨“停更潮”两败俱伤,B站已无路可退?

​作者:墨鸣,编辑:小市妹近日,B站UP主的停更潮成为互联网圈的焦点事件,一度登上微博热搜成为了出圈话题。4月2日起,不少用户发现B站中多名U

2023-04-06 17:09:02

以“找内奸”为由查手机?工人日报:对员工个人信息勿任性-环球热头条

​有公司例会上以“找内奸”为由突查员工手机,有公司擅自恢复员工办公电脑已删除聊天记录——用人单位对待员工个人信息勿任性阅读提示用人单...

2023-04-06 16:13:44

【全球独家】盘龙区新迎第一幼儿园环境创设充满“故事味”

​盘龙区新迎第一幼儿园环境创设充满“故事味”

2023-04-06 15:11:09

2023年IVD行业现状及前景:我国IVD市场规模达到1226亿元 新视野

​体外诊断是医疗器械的第一大子领域,在新冠疫情期间发挥了重要的作用。我国体外诊断行业正处于快速发展的关键时期,产业链也已经

2023-04-06 14:16:56

2023年在北京退休,工龄40年个人账户22万元,养老金有多少?

​2023年在北京退休,工龄40年个人账户22万元,养老金有多少?下面跟社保网小编一起来看看具体详情吧。22万的个人账户总体上还是比较高的,但由

2023-04-06 12:55:52

最新全国100强城市:谁晋级,谁掉队了?

​文|凯风全国共有多少个城市?根据中国统计年鉴,全国共有330多个地级及以上城市、2843个县级区划以及3 85万个乡镇 街道。GDP百强城市,可谓其

2023-04-06 12:20:43

中国足彩网竞彩6日推荐:米内罗竞技拿下开门红 全球速看料

​解放者杯米内罗竞技VS亚松森自由比赛时间:2023-4-706:00球场:米内罗竞技场米内罗竞技在2021赛季实力崛起,拿到了巴甲和巴西杯的双料冠军,解放者

2023-04-06 11:02:23

李胜溢 :暴风骤雨且将息,震荡静待非农,最新黄金原油行情走势分析,最新策略联系本人

​李胜溢:暴风骤雨且将息,震荡静待非农,最新黄金原油行情走势分析,最新策略联系本人点击上方头像获取名家联系方式!(手机APP点击右上角...

2023-04-06 10:25:27