vue 给取data值_web前端教程分享Vue相关面试题

b724afa08f0bacdcf6f4b45e3ad7c97d.png

Vue是一套构建用户界面的渐进式框架,具有简单易用、性能好、前后端分离等优势,是web前端工程师工作的好帮手,也是企业选拔人才时考察的重点技能。接下来就给大家分享一些Vue相关的面试题,帮助大家提升竞争力。

你对Vue生命周期的理解?

Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载等一系列过程,我们称这是Vue的生命周期。

Vue组件如何通信?

Vue组件通信的方法如下:

props $emit+v-on: 通过props将数据自上而下传递,而通过$emit和v-on来向上传递信息。

EventBus: 通过EventBus进行信息的发布与订阅;

vuex: 是全局数据管理库,可以通过vuex管理全局的数据流;

$attrs $listeners: Vue2.4中加入的$attrs/$listeners可以进行跨级的组件通信;

provide/inject:以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效,这成为了跨组件通信的基础。

Vue如何实现双向绑定?

利用Object.defineProperty劫持对象的访问器,在属性值发生变化时我们可以获取变化,然后根据变化进行后续响应,在vue3.0中通过Proxy代理对象进行类似的操作。

如何理解Vue的响应式系统的?

响应式系统简述:任何一个 Vue Component都有一个与之对应的Watcher实例。Vue的data上的属性会被添加getter和setter属性。当Vue Component render函数被执行的时候,data上会被 触碰(touch),即被读, getter方法会被调用, 此时Vue会去记录此Vue component所依赖的所有data。(这一过程被称为依赖收集)

data被改动时(主要是用户操作),即被写,setter方法会被调用, 此时Vue会去通知所有依赖于此data的组件去调用他们的render函数进行更新。

Vue中的key到底有什么用?

key是为Vue中的vnode标记的唯一id,通过这个key,我们的diff操作可以更准确、更快速。

准确: 如果不加key,那么vue会选择复用节点(Vue的就地更新策略),导致之前节点的状态被保留下来,会产生一系列的bug。

快速: key的唯一性可以被Map数据结构充分利用,相比于遍历查找的时间复杂度O(n),Map的时间复杂度仅仅为O(1)。

computed和watch有什么区别?

computed:

computed是计算属性,也就是计算值,它更多用于计算值的场景;

computed具有缓存性,computed的值在getter执行后是会缓存的,只有在它依赖的属性值改变之后,下一次获取computed的值时才会重新调用对应的getter来计算;

computed适用于计算比较消耗性能的计算场景。

watch:

更多的是「观察」的作用,类似于某些数据的监听回调,用于观察props $emit或者本组件的值,当数据变化时来执行回调进行后续操作;

无缓存性,页面重新渲染时值不变化也会执行。

  当然,根据企业中对web前端人才的岗位职责规定不同,面试考察的重点也不尽相同。如果你想了解更多web前端面试题或掌握更多面试技巧,可以关注“好程序员”,定期发布技术热点和求职指导文章,助力你更快更好的求职。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/300783.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

.NET Core with 微服务 - Consul 配置中心

上一次我们介绍了Elastic APM组件。这一次我们继续介绍微服务相关组件配置中心的使用方法。本来打算介绍下携程开源的重型配置中心框架 apollo 但是体系实在是太过于庞大,还是让我爱不起来。因为前面我们已经介绍了使用Consul 做为服务注册发现的组件,那…

程序员最爱说的十句口头禅。。 | 今日最佳

世界只有3.14 % 的人关注了青少年数学之旅1、别更新了学不动了。2、我不会修电脑,谢谢。3、听说今晚不用加班。4、是你的网络有问题。5、清一下缓存再试试6、扫码提需求,谢谢。7、换一台设备试试看。8、保证今晚十点上线。9、键盘给你,你来写…

.NET 6 新特性 System.Text.Json 中的 Writeable DOM

.NET 6 新特性 System.Text.Json 中的 Writeable DOM 特性Intro在 .NET 6 Preview 4 中,微软加入了 JSON Node 的支持,我们可以动态的编辑一个 JSON 文档,一个可以修改的 JSON 文档,就像 Newtonsoft.Json 里的 JToken,…

ArcGISServer10安装与地图发布

1.安装ArcGISServer10前先启动IIS,并打开IIS管理器界面,检查是否已经安装好。2.新建一个自己的站点打开Internet信息服务(IIS)管理器,右击左侧的网站列表,选择——添加网站,如下图所示&#xff…

电影特效用到什么计算机知识,后期影视特效处理知识普及

电影特效作为电影产业中不可或缺的元素之一,为电影的发展做出了巨大的贡献。今天小编主要给大家分享后期影视特效处理知识普及,希望对你们有帮助!影视特效改变电影制作的方式在目前的电影制作过程中,从分镜头剧本开始,特效的理念已…

通达信版弘历软件指标_通达信软件指标编写基础教程,10个指标源码祝你股市一帆风顺...

一、基本函数HHV(X,N) N日内X的最高价LLV(X,N) N日内X的最低价VOL 成交量AND 和,表示同时满足MA(X,N) 移动平均线,5日均线可以写作MA(CLOSE,5)&am…

魔方内部长啥样?三维动画展示其结构,谁发明的真是个天才

全世界只有3.14 % 的人关注了青少年数学之旅魔方,英文名为Rubiks Cube,又叫鲁比克方块,最早是由匈牙利布达佩斯建筑学院厄尔诺鲁比克(又称作厄尔诺卢比克)教授于1974年发明的。魔方竞速是一项手部极限运动。咱们平时看…

Hello Blazor:(2)集成Tailwind CSS续——nuget包方式

前段时间,写了一篇“Blazor如何集成Tailwind CSS”的文章。但是操作起来比较麻烦,又是命令行,又是要修改一大堆配置。后来,我又找到一个更简单的方法。实现方式新建Blazor项目,然后引用nuget包BamButz.MSBuild.Tailwin…

30屏幕参数_顶级屏幕加持,一加8系列核心配置、屏幕参数官方公布

昨天,一加8系列官宣将于4月16日进行线上发布。届时,全新的一加8系列将正式到来。随着官宣的开启,一加手机也开始了新机的预热。参数配置上,一加官方剧透称,一加8系列全系标配骁龙865 5G旗舰级移动平台,全系…

陕西科技大学18计算机调剂,2018年陕西科技大学考研调剂信息公布

2018考研复试交流群(进群领内部资料) 5764338402018年陕西科技大学考研调剂信息公布2018年考研成绩查询接近尾声,部分成绩不太理想的考生可能会考虑考研调剂,为了方便考生,中公考研小编为大家整理了2018年陕西科技大学考研调剂信息公布&#…

垃圾软件!动不动就扣费!| 今日最佳

世界只有3.14 % 的人关注了青少年数学之旅一、二、三、四、五、(图源网络,侵权删)我怀疑有人偷窥我生活↓ ↓ ↓

WPF实现统计图(饼图仿LiveCharts)

WPF开发者QQ群: 340500857 | 微信群 -> 进入公众号主页 加入组织欢迎转发、分享、点赞、在看,谢谢~。 01—效果预览效果预览(更多效果请下载源码体验):一、PieControl.cs 代码如下 using System.Collections.Obje…

计算机实践教程采莲趣事,计算机基础作业采莲趣事

精品文档 . 忽然想起采莲的事情来了。采莲是江南的旧俗,似乎很早就有,而六朝时为盛;从诗歌里可以约略知道。采莲的是少年的女子,她们是荡着小船,唱着艳歌去的。采莲人不用说很多,还有看采莲的人。那是一个热…

那些曾经拥有的最大快乐,都是好奇心的结果

▲ 点击查看对于孩子们来说,强烈的好奇心和求知欲,是一种本能。在他们懵懵懂懂长大的过程中,总是对周围的世界充满着各种各样的疑问:“叶子为什么是绿色的?”“为什么花朵有那么多种颜色?”“蚂蚁为什么能…

[原]让链接点击过后无虚线

我以前还以为有难呢,在网上查资料,才知道这么简单, <a href"http://www.ktbbs.com"onfocus"this.blur()">转载于:https://www.cnblogs.com/Kennytian/archive/2007/03/31/695463.html

UML简易实践

2019独角兽企业重金招聘Python工程师标准>>> 面向对象的问题的处理的关键是建模问题。建模可以把在复杂世界的许多重要的细节给抽象出。许多建模工具封装了UML&#xff08;也就是Unified Modeling Language™&#xff09;&#xff0c;这篇课程的目的是展示出UML的精…

战斗机各种世界之最,涨知识了。。。

全世界只有3.14 % 的人关注了青少年数学之旅世界上最大的战斗机苏联的图-128是目前世界上起飞重量最大&#xff0c;体积最大的一款截击机&#xff0c;它由前苏联图波列夫设计局于1955研制成功并进行首飞&#xff0c;1963年装备部队&#xff0c;该机全长30.03米&#xff0c;翼展…

Bye Bye Embed-再见了Embed,符合web标准的媒体播放器代码

由于Embed标签是Netscape的私有财产&#xff0c;故一直未被W3C认可&#xff0c;对于各种媒体文件使用Embed标签是非标准的&#xff0c;如何改变&#xff1f;Elizabeth Castro的 Bye Bye Embed 一文对于各种媒体播放器给出了很好的符合web标准的代码。 在线媒体播放--Google Vid…

.NET Core授权失败如何自定义响应信息?

【导读】在.NET 5之前&#xff0c;当授权失败即403时无法很友好的自定义错误信息&#xff0c;以致于比如利用Vue获取到的是空响应&#xff0c;不能很好的处理实际业务&#xff0c;同时涉及到权限粒度控制到控制器、Action&#xff0c;也不能很好的获取对应路由信息本文我们来看…

计算机电缆2x2x1.5,计算机电缆djypvp1x2x1.5

计算机电缆djypvp1x2x1.5硅橡胶计算机电缆适用于各种仪器仪表的连结&#xff0c; 以及信号传输。它具有耐高温、低温、耐腐蚀、舒缓老化等优点&#xff0c;对特殊场所或恶劣环境中的使用是目前理想的产品&#xff0c;正常使用温度为—60℃一250℃。产品特点:1.执行标准Q/ILXD-1…