推广

Vue面试题汇总

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

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://0291.com.cn/post/57396.html

相关文章

seo推广有怎样的发展趋势。

seo推广有怎样的发展趋势。

seo推广是目前互联网的必要手段,如果说传统广告是二维,那么seo推广就是多维的,因为seo推广能将文字、图像、视频等组合在一起,传递多感官的信息,增强宣传效果。 一、seo推广会有怎样的发展趋势? 1、用户对内容的要求更高 无论是短视频、自媒体、公众号还是传统的网络广告,随着用户更...

电商行业的8种运营模式分析

电商行业的8种运营模式分析

电商行业的8种运营模式分析 移动互联网时代,电商已经成为新时代营销的标配,今天给大家介绍一下这几年电商行业的运营模式。1、平台型 模式是提供给个人或者企业进行开店交易的平台,通过佣金、服务费、广告费、增值服务等盈利。 这就像线下的集市商场。 在所有电商平台中淘宝是目前最大的电商平台。移动互...

新闻稿发布怎么发文章效果好(新闻源平台好的渠道有哪些)

新闻稿发布怎么发文章效果好(新闻源平台好的渠道有哪些)

新闻稿发布怎么发文章效果好(新闻源平台好的有哪些)。想要新闻稿有效果,就必须能够被收录和排名,这样才能获得一定的流量。没有流量的新闻稿是没有用的,甚至失去了推广的意义。之前新闻稿媒介星软文平台一直在和大家强调新闻稿推广对企业的重要性,但是这都是基于新闻稿收录的条件之上。新闻...

抖音SEO优化:如何使抖音搜索排名前十

抖音平台上热门的搜索词“抖音”,想要提高排名,需要进行SEO优化。本文介绍了优化的方法,包括关键词优化、标题优化、描述优化、优化、外部链接优化等,帮助抖音用户提高搜索排名。抖音SEO优化,搜索排名百度已经开始收录抖音的内容,接下来要怎么做才能把抖音 SEO工作做好,这是一个...

营销型网站上线时需做好哪些优化工作。

营销型网站上线时需做好哪些优化工作。

齐河网:营销型网站上线时需做好哪些优化工作。相信许多企业在进行营销型网站建设以后,首先都会考虑如何去做优化工作,当然对于新站来说,优化的基础几乎为零,故而一切都需要从头开始。因此,企业在对新站进行优化时,就不能像优化老站那样来做,同时新站见效的速度也会较慢,企业需要做好充分的心理准备。那么接下来,聚...

答疑支招篇:企业运营管理包括什么(企业运营管理咨询与诊断)

答疑支招篇:企业运营管理包括什么(企业运营管理咨询与诊断)

三人行管理咨询李老师认为,企业运营管理,是指对企业运营过程进行的计划、组织、指挥、协调、控制和监督等一系列活动的过程的总称,是与产品生产和服务相关的各项工作的管理活动。运营管理是现代企业管理科学中最活跃的一个分支,着重关注在企业的生产与运营环节,也是新思想、新理论、新观点、新方法大量涌现的一个分支学...

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

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