vue核心面试题（零碎题）

た入场券 2023-02-25 02:13 26阅读 0赞

# 一、在开发中，你将ajax请求放在哪个生命周期中 #

1.一般ajax请求可以放置的位置在created和mounted中。

2.在created的时候已经可以拿到数据，视图中的 dom 并没有渲染出来，所以此时如果直接去操 dom 节点，无法找到相关的元素。

3.在mounted中，由于此时 dom 已经渲染出来了，所以可以直接操作 dom 节点 。

4.一般情况下都放到 mounted 中，保证逻辑的统一性，因为很多时候我们的请求会操作dom，避免出现拿不到dom的情况，放的mounted中的情况下多。如果不涉及操作dom，提前请求做一次数据处理放在created中。在服务端渲染不支持mounted方法，所以在服务端渲染的情况下统一放到created中。

# 二、何时需要使用beforeDestroy #

1.在当前页面使用了$on方法时，就需求在组件销毁前解绑。如果不解绑，一会在触发这件事情的时候，可能还会去操作实例，这时实例已经被销毁了，所以在销毁前解绑下。

2.清楚自己定义的定时器。

3.解绑一些原生事件。比如对scroll，mousemove，resize等添加的监听事件，在销毁前进行移除监听事件，提高性能，因为在销毁时不移除监听事件，会一直处于监听状态，浪费资源。

4.如果项目中使用了websocket时，在销毁前可以关闭websocket的连接，避免造成资料浪费。

5.其实在该组件销毁后，对无用数据无用操作都可以在beforeDestroy中进行清除和关闭。

# 三、vue中的特殊指令 #

target.\_o = markOnce

target.\_n = toNumber

target.\_s = toString

target.\_l = renderList

target.\_t = renderSlot

target.\_q = looseEqual

target.\_i = looseIndexOf

target.\_m = renderStatic

target.\_f = resolveFilter

target.\_k = checkKeyCodes

target.\_b = bindObjectProps

target.\_v = createTextVNode

target.\_e = createEmptyVNode

target.\_u = resolveScopedSlots

target.\_g = bindObjectListeners

target.\_d = bindDynamicKeys

target.\_p = prependModifier

# 四、Vue3.0你知道有哪些改进? #

1.vue3采用TS编写

2.采用了Composrtion API，解决了mixin的缺陷，代码的条理性

3.vue3中响应式数据原理改成了proxy，vue3只渲染动态数据的部分，vue2中会不停的去比对

4.vdom 的对比算法更新，只更新 vdom 的绑定了动态数据的部分

# 五、Vue-Router中导航守卫有哪些？ #

1、全局前置守卫： `router.beforeEach`

2、全局解析守卫： `router.beforeResolve`

3、全局后置钩子： `router.afterEach`

4、路由独享的守卫： `beforeEnter`

5、组件内的守卫： `beforeRouteEnter、beforeRouteUpdate (2.2 新增)、beforeRouteLeave`

执行顺序：beforeRouteLeave < beforeEach < beforeRouteUpdate < beforeEnter < beforeRouteEnter < beforeResolve < afterEach

# 六、完整的导航解析流程 (runQueue) #

1. 导航被触发。

2. 在失活的组件里调用离开守卫。

3. 调用全局的 beforeEach 守卫。

4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。

5. 在路由配置里调用 beforeEnter 。

6. 解析异步路由组件。

7. 在被激活的组件里调用 beforeRouteEnter 。

8. 调用全局的 beforeResolve 守卫 (2.5+)。

9. 导航被确认。

10. 调用全局的 afterEach 钩子。

11. 触发 DOM 更新。

12. 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

# 七、action 和 mutation区别 #

1.mutation 是同步更新数据(内部会进行是否为异步方式更新数据的检测) $watch 严格模式下会报错

2.action 异步操作，可以获取数据后调佣 mutation 提交最终数据

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDcyMDg2_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDcyMDg2_size_16_color_FFFFFF_t_70]: /images/20230209/53be31cd11bc47f6a3134d8ef4be88eb.png

发表评论取消回复

表情：

评论列表（有 0 条评论，26人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue核心面试题：vue中模板编译原理

一、Vue 编译原理这块的整体逻辑主要分三个部分： 1.将模板字符串转换成element AST（解析器parser） 2.对ast进行静态节点标记，主要用来做虚拟do

浅浅的花香味﹌/ 2023年02月25日 02:17/ 0 赞/ 21 阅读

相关 vue核心面试题（零碎题）

一、在开发中，你将ajax请求放在哪个生命周期中 1.一般ajax请求可以放置的位置在created和mounted中。 2.在created的时候已经可以拿到数据，视

た入场券/ 2023年02月25日 02:13/ 0 赞/ 27 阅读

相关 vue核心面试题（nextTick实现原理）

概念： nextTick就是一个异步方法。nextTick 方法主要是使用了宏任务和微任务（事件循环机制），定义了一个异步方法，多次调用 nextTick 会将方法存入

青旅半醒/ 2023年02月20日 13:51/ 0 赞/ 158 阅读

相关 vue核心面试题（为什么vue采用异步渲染）

前言：因为不采用异步更新，在每次更新数据都会对当前组件进行重新渲染。所以为了性能考虑，vue 会在本轮数据更新后，再去异步更新视图。 vu

亦凉/ 2023年02月20日 13:45/ 0 赞/ 263 阅读

相关 vue核心面试题（MVVM原理）

一、谈一下你对MVVM原理的理解 1.MVC是Model-View- Controller的简写。即模型-视图-控制器。是最早的架构模型，是从前台到后台统一称之为MVC，

傷城~/ 2023年02月17日 02:36/ 0 赞/ 32 阅读

相关面试题——vue面试题总结

vue面试题总结 1.vue的特点是什么 1.国人开发的轻量级框架 2.双向数据绑定，在数据操作方面更为简单 3.视图，数据，结构分析，不需要进行逻辑代码的修改

た入场券/ 2023年01月18日 11:29/ 0 赞/ 431 阅读

相关 vue核心面试题：Vue组件如何通信?

1.父子间通信源码位置：src/core/instance/events.js 父->子：通过 props 子-> 父：$on、$emit (发布订阅)

ゞ浴缸里的玫瑰/ 2022年12月18日 09:00/ 0 赞/ 221 阅读

相关 vue核心面试题：diff算法

一、diff算法的时间复杂度两个树的完全的 diff 算法是一个时间复杂度为 O(n3) , Vue 进行了优化·O(n3) 复杂度的问题转换成 O(n) 复杂度的问

小灰灰/ 2022年11月27日 00:48/ 0 赞/ 291 阅读

相关 Java核心面试题

Java核心面试题原文地址： [http://javahungry.blogspot.com/2013/06/top-25-most-frequently-asked-c

小鱼儿/ 2022年07月17日 02:23/ 0 赞/ 226 阅读

相关 vue面试题

vue面试题 1.Vue和react的相同与不同相同点：都支持服务器端渲染都有virtual DOM，组件化开发，通过props参数进行父子组件数据的

太过爱你忘了你带给我的痛/ 2021年12月08日 16:03/ 0 赞/ 389 阅读