推广

Vue面试题汇总

iseeyu3年前 (2024-02-21)推广129

9. nextTick

作用:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,可以获取更新后的 DOM。
应用场景:需要在视图更新之后,基于新的视图进行操作。
触发时机:在同一事件循环中的数据变化后,DOM完成更新,立即执行Vue.nextTick()的回调。
Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate,如果执行环境不支持,则会采用 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,$children与ref
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

相关文章

西安企业做百度推广,一个月花三千和花三万到底差在哪?

4|最近跟几个西安的老板聊天,发现一个挺有意思的现象:同样做百度推广,有人一个月花三千块,询盘不断;有人一个月砸三万,水花都没见着。问他们区别在哪,大多数人说不清楚,只知道'钱花了,没效果'。 5| 6|百度推广这东西,说复杂也复杂,说简单也简单。核心就一件事:让你的潜在客户搜某个词的时候,你的信息...

我想当策划,大学应该选什么专业?

我想当策划,大学应该选什么专业?

学,广告,传播,公关,这些专业其实都可以。另外也可以学像汉语言文学,以及一些跟文学相关的一些专业,会对你找工作有帮助。但是,你想从事这个这份职业,除了专业的学习之外,更多的是,你要在上学的时候积极参与一些更营销策划相关的社会实践。比如说你可以做一些兼职,比如说帮别人去写稿,...

服装市场营销策略分析,“定位不慎满盘皆输”

服装市场营销策略分析,“定位不慎满盘皆输”

不同的区域需要不同的策略,而不同的营销策略需要不同的销售思路来配合。因此,在研究女装产品销售思路之前,最好先对于市场与营销策略做一次深入地了解。1.市场区域化(market segmentation):目标营销的第一步,是将整个市场拆分成若干个同性质的小市场。2.目标市场的...

晚间悦读丨你的思维方式,决定你的人生高度!

晚间悦读丨你的思维方式,决定你的人生高度!

越长大,越发现,能够决定你人生高度的,往往是你的认知层次。 你的认知在哪个层级,你的人生就处在什么状态。你认知的高度,决定了你人生的高度。 那如何才能升级方式、提升认知能力呢?可以从这三个方面做出改变。 NO. 1 改变态度 有人...

编写项目营销策划方案六大要点

编写项目营销策划方案六大要点

现在商业发展非常迅速,的需求非常的大,但是要做好营销策划是有一定难度的,我把自己做营销策划的一些体会在这里分享给朋友们。营销策划方案六大要点我们先说项目营销策划方案这个话题。大部分的营销策划人都是在企业里工作,大部分项目之初都是来源于一个想法,创始人、老板或者创始团队的一个...

【商场营销策划】如何进行商场营销策划?

【商场营销策划】如何进行商场营销策划?

商场是策划者们关注的永恒话题,那么究竟该如何作好商场营销策划呢?掌握以下这几点营销策略设计原则,至关重要!1.义利兼顾的原则。商场在获取利润的同时要充分考虑到消费者的合法利益和商场的长远利益。在作商场活动营销策略方案的时候应该将这一点作为首要的原则。对商场有利而对顾客不利的...

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

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