【Vue复习】Vue面试题收记录

Vue面试题收记录

Vue系列感觉如果直接用笔记来复习很抽象，于是想到了通过对常见面试题的一个收录和分析来复习。

Vue中的路由拦截是怎么做的？

在全局前置函数中通过to和next参数，参照当前用户权限对路由重定向

1.Vue3与Vue2相比较，有哪些变化

组合式API、setup（）、生命周期destoyed被unmounted替换 、teleport、双向绑定的优化、reactive和ref 、diff优化、Vue对象的重任卸给了app对象，并且减轻了对象压力删除了不常用的一些api

Vue3不兼容IE8的原因：Vue3中大量使用了ES6的语法，比如响应式处理改用Proxy，通过Reflect读写代理对象属性，通过Set收集视图依赖，Map建立代理对象属性与Set依赖的映射关系

2.在Vue中修改数据后，视图没有更新，是什么原因

数据更新视图没更新，这说明是vue并未检测到属性的改变，如果是对象那么可能是直接新增或者是删除了属性，或者是数组，或者数据不是响应式的，vue不能检测数组直接通过索引修改数组项

那是vue的域更新是异步的，因为即当setter操作发生后，并不会立马更新，指令的更新操作会有延迟，当指令更新真正执行的时候，此时修改的属性属性已经设置，所以指令更新模板时得到的是新值。

3.$nextTick在什么场景使用，实现原理

Vue中的DOM是异步更新的，当数据已经获取到最新的时候想要获取最新的DOM就需要用nextTick

this.$nextTick(cb) 当数据更新时,dom渲染后会自动执行callback函数（为了取得最新的dom）

需要在视图更新之后，基于新的视图进行操作。

this. n e x t T i c k ( ) 方 法 主 要 是 用 在 数 据 改 变 ， d o m 改 变 应 用 场 景 中 。 v u e 中 数 据 和 d o m 渲 染 由 于 是 异 步 的 ， 所 以 ， ∗ ∗ 要 让 d o m 结 构 随 数 据 改 变 这 样 的 操 作 都 应 该 放 进 t h i s . nextTick()方法主要是用在数据改变，dom改变应用场景中。vue中数据和dom渲染由于是异步的，所以，**要让dom结构随数据改变这样的操作都应该放进this. nextTick()方法主要是用在数据改变，dom改变应用场景中。vue中数据和d<