推广

Vue面试题汇总

iseeyu2年前 (2024-02-21)推广122

9. nextTick

作用:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,可以获取更新后的 DOM。
应用场景:需要在视图更新之后,基于新的视图进行操作。
触发时机:在同一事件循环中的数据变化后,DOM完成更新,立即执行Vue.nextTick()的回调。
Vue 在内部对异步队列尝试使用原生的 Promise.thenMutationObserversetImmediate,如果执行环境不支持,则会采用 setTimeout(fn, 0) 代替。宏任务耗费的时间是大于微任务的,所以在浏览器支持的情况下,优先使用微任务。如果浏览器不支持微任务,使用宏任务。

10. keep-alive

11. vue的双向绑定原理

分对象和数组
对象的话,利用Object.defineProperty()来重新定义属性,当属性发生变化时,就会通知相关依赖进行更新操作。
数组的话,使用函数劫持的方法,重写了数组的方法
Vue将data中的数组进行了原型链重写,指向了自己定义的数组原型方法。这样调用数组api(7种会改变数组的方法)时,就会通知依赖更新。如果数组中包含引用类型,则会对引用类型再进行监控。
vue3
vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过new Proxy()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。
Vue 3.0与Vue 2.0的区别仅是数据劫持的方式由Object.defineProperty更改为Proxy代理,其他代码不变。

12. v-model是如何实现的

13. 单向数据流

vue 组件间传递数据是单向的,即数据总是由父组件传递到子组件,子组件在其内部可以有自己维护的数据,但它无权修改父组件传递给它的数据,当开发者尝试这样做的时候,vue 将会报错。这样做是为了组件间更好的解耦,在开发中可能有多个子组件依赖于父组件的某个数据,假如子组件可以修改父组件数据的话,一个子组件变化会引发所有依赖这个数据的子组件发生变化,所以 vue 不推荐子组件修改父组件的数据,直接修改 props 会抛出警告。

14. 组件通信

(1)props
一般属性,父传子
函数属性,子传父
父子通信比较常用的是,父传子用props,子传父用$emit(方法, 参数)
(2)事件总线,通过一个空的vue实例作为事件总线,用来触发和监听事件。$on$emit
可以实现任意组件间通信
(3)vuex
状态管理。最常用,最方便。可以实现任意关系组件的通信。
(4)$parent,$childrenref
ref如果在子组件上,就指向子组件实例

15. vuex管理状态的机制

vuex用来管理共享状态
state是共享状态的集合,getters通过操作state获得派生状态,mutations是操作state数据的方法集合,actions让mutations中的方法能够在异步操作中起作用

16. vue实例的生命周期

在beforeCreate 钩子函数调用的时候,是获取不到props 或者data 中的数据的,因为这些数据的初始化都在initState 中。
然后会执行created 钩子函数,在这一步的时候已经可以访到之前不能访问到的数据,但是这时候组件还没被挂载,所以是看不到的。
接下来会先执行beforeMount 钩子函数,开始创建VDOM,最后执行mounted 钩子,并将VDOM 渲染为真实DOM 并且渲染数据。组件中如果有子组件的话,会递归挂载子组件,只有当所有子组件全部挂载完毕,才会执行根组件的挂载钩子。
再接下来是数据更新时会调用的钩子函数beforeUpdate 和updated,这两个钩子函数没什么好说的,就是分别在数据更新前和更新后会调用。
另外还有keep-alive 独有的生命周期,分别为activated 和deactivated 。用keep-alive 包裹的组件在切换时不会进行销毁,而是缓存到内存中并执行deactivated 钩子函数,命中缓存渲染后会执行actived 钩子函数。
最后就是销毁组件的钩子函数beforeDestroy 和destroyed。前者适合移除事件、定时器等等,否则可能会引起内存泄露的问题。然后进行一系列的销毁操作,如果有子组件的话,也会递归销毁子组件,所有子组件都销毁完毕后才会执行根组件的destroyed 钩子函数。

17. 何时需要使用beforeDestroy

当前页面中使用了$on方法,那就需要在组件销毁前解绑
清除自己定义的定时器
解除事件的绑定scroll, mousemove等

18. Vue模板编译原理

19. 虚拟dom

20. diff算法

21. $.set

我们在data中定义一个对象后,如果给对象增加新的属性。则这个新增加的属性不是响应式的。当数据发生变化,并不会显示到视图。这是因为新添加的属性没有被Object.defineProperty劫持,导致视图不会同步更新。解决办法是使用this.$set(obj, ‘name’, ‘jack’)
对于数组,直接通过索引设置元素,例如arr[] = 2
修改数组长度,例如arr.length = 6
vue同样不能监测到数据变化

22. MVVM的理解

参考资料:
通俗易懂了解Vue中nextTick的内部实现原理

扫描二维码推送至手机访问。

版权声明:本文由西安泽虎代运营发布,如需转载请注明出处。

转载请注明出处https://www.0291.com.cn/post/57396.html

相关文章

怎么在淘宝上开个网店,如何在天猫上开网店?(怎么在淘宝申请注册店铺)

怎么在淘宝上开个网店,如何在天猫上开网店?(怎么在淘宝申请注册店铺)

首先在官网上注册淘宝账号,然后在卖家中心里点击“我要开店”。填写好相关的申请材料,然后开始寻找货源。现在位淘宝商家提供货源的渠道有很多,像1688就是一个进货非常方便的平台,不仅有非常多便宜的货源,...

企业网站没转化你是否考虑用seo优化提升准确访客量。

企业网站没转化你是否考虑用seo优化提升准确访客量。

要素1:网站主页建设 网站是企业的名片,代表着企业的形象和企业的面貌。所以我们必须精雕细琢。当然,在追求精致和完善的同时,我们不应忽视搜索引擎的访问,也要让用户体验良好。 要素2:网站架构 营销网站、导航栏和内部链接的结构和框架是网站建设不可或缺的组成部分。不要在代码中使用太多的flash,尽...

小编教你网站推广和建设比较有效的思路分享。

小编教你网站推广和建设比较有效的思路分享。

网站建设完成后,如何进行有效的,如何吸引客户访问你的网站,然后提高网站的吸引力,大家都喜欢漂亮的东西,所以首先,网站建设时,网站设计应该有所不同,这样可能会吸引更多的用户。网站的文案也要能吸引人。文案设计提升了公司的品牌。文案和品牌结合起来,无形中把公司的品牌植入用户的脑海。 蹭热度推广...

如何提高SEO页面与用户检索的相关性?

如何提高SEO页面与用户检索的相关性?

对于任何一个而言,我们的目的实际上都只有一个,那就是尽量出现在搜索结果中的TOP10,当然,我们知道,影响网站排名的因素众多,其中:页面相关性与特定搜索关键词是否高度相匹配显得格外重要。 否则,即使你拥有大量的外部资源,也只能是事倍功半。 那么,如何提高SEO页面与用户检索的相关性? 根据以往...

2021年企业热点营销事件、营销经典案例(汇总版),2022 ...

2021年企业热点营销事件、营销经典案例(汇总版),2022 ...

2021已成过去式,每年的企业热点事件、营销经典案例也成为大家颇为关注的年终选题。下面为大家盘点盘点去年有哪些企业经典营销案例。一月l 合成大西瓜游戏走红事件回顾:年初一款名为《合成大西瓜》的小游戏突然火爆朋友圈,其火爆势头太过突然,不少网友至今仍对其火爆原因摸不着头脑。根...

网上的软文推广平台可信吗?

网上的软文推广平台可信吗?

新闻软文投稿发布可以尝试下面的方法,希望对你有帮助  第一步:账号注册  1、点击上面导航栏中的“会员注册”栏目然后根据提示填写自己的会员名、登陆密码等相关信息即可完成注册。  第二步:寻找媒体  1、站长媒介拥有8000+媒体资源,需要找到自己想发送的合适媒体。  2、点...

现在,非常期待与您的又一次邂逅

我们努力让每一部企业宣传片和抖音短视频成为商业大片