[JavaScript知识库]vue面试题

1.MVVM的理解

MVVM分为Model、View、ViewModel三者

Model：代表数据模型，数据和业务逻辑都在model层中定义

View：代表UI视图，负责数据的展示

ViewModel：负责监听model中数据的改变并且控制视图的更新，处理用户交互操作

Model和View并无直接关联，而是通过ViewModel来进行联系的，Model和ViewModel之间有着双向数据绑定的联系。因此当Model中的数据改变时会触发View层的刷新，View中由于用户交互操作而改变的数据也会在Model中同步。这种模式实现了Model和View的数据自动同步，因此开发者只需要专注对数据的维护操作即可，而不需要自己操作dom。

2.v-if和v-show的区别

适用场景：切换频繁的场合用v-show,切换不频繁的场合用v-if ?

3.vue生命周期

在vue生命周期的不同阶段通过对应的钩子函数来实现组件数据管理和DOM渲染两大重要功能。
创建阶段：
beforecreate：实例已经初始化，但不能获取DOM节点。(没有data，没有el)
created:实例已经创建，仍然不能获取DOM节点。(有data，没有el)
载入阶段：
beforemount：模板编译完成，但还没挂载到界面上。(有data，有el)
mounted：编译好的模板已挂载到页面中(数据和DOM都已经渲染出来)。
更新阶段：
beforeupdate：数据发生变化立即调用，此时data中数据是最新的，但页面上数据仍然是旧的(检测到数据更新时，但DOM更新前执行)。
updated：更新结束后执行，此时data中的值和页面上的值都是最新的。
销毁阶段：
beforedestroy：当要销毁vue实例时，在销毁之前执行。
destroy：在销毁vue实例时执行。

4.vue中methods,computed,watch的区别

?Watch是监听data和计算属性中的新旧变化。

?5.v-for中为什么要用key

循环遍历的时候为每一个个体加上key属性，且key的属性是唯一值

在循环中每次内容发生改变的时候Vue会根据key的标识去对比变化前后dom及数据的值，如果没有发生过改变就不去重新渲染，提高渲染效率，局部渲染

?6.说一下你对vuex的理解

数据做提前处理的.再说到辅助函数的作用.?

7.router和route的区别?

route是信息对象集合，包括path，params，hash，query，fullPath，matched，name等路由信息参数

router是路由器对象包含了路由的跳转方法（push , replace , back ，go），钩子函数等

8.v-router hash 模式和 history 模式的区别

url展示hash带‘#’，history没有。刷新页面，hash可以正常加载hash对应的页面，而history因为没有‘#’所有用户刷新页面之类的操作时，浏览器还是会给服务器发送请求，没有处理的话，会返回 404，一般需要后端将所有页面都配置重定向到首页路由。hash可以支持低版本浏览器和IE

9.vue双向数据绑定的原理

Vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过object.defineproperty来劫持各个属性的getter，settet，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通JavaScript对象传给 Vue 实例来作为它的data?选项时，Vue 将遍历它的属性，用object.defineproperty将它们转为getter/setter。用户看不到getter/settet，但是在内部它们让Vue追踪依赖，在属性被访问和修改时通知变化

10.导航守卫

全局守卫：beforeEach，afterEach

局部守卫：

beforeRouterEach：因为当守卫执行前，组件实例还没被创建,不能获取组件实例的this

beforeRouterUpdate：?在当前路由改变，但是该组件被复用时调用，可以访问组件实例this

beforeRouterLeave：导航离开该组件的对应路由时调用，可以访问组件实例this

每个守卫方法接收三个参数：

to：目标路由对象

from：准备要离开的路由

next（）：进行管道中的下一个钩子。可传递参数有布尔值false，直接写路径'/’或{path：‘/’},回调函数

注意：后置钩子函数afterEach不会接售next函数也不会改变导航本身。

11.组件中的data为什么是一个函数

如果data是对象的话，因为对象是引用类型，组件被复用的话，就会创建多个实例。本质上，这些实例用的都是同一个构造函数。这样就会影响到所有的实例，所以为了保证组件不同的实例之间data不冲突，所有data必须是函数。

12.keep-alive的作用

keep-alive可以实现组件缓存，当组件切换时,主要用于保留组件状态或避免重新渲染。有两个属性include、exclude，允许组件有条件的进行缓存。有两个构造函数activated、deactivated，用来得知当前组件是否处于活跃状态。

13.ref的作用

绑定到普通元素上：获取dom元素this.$refs.box

绑定到子组件：

• 获取子组件中的data，this.$refs.box.msg
• 调用子组件中的方法this.$refs.box.open（）

14.nextTick?

可以让我们在下次 DOM 更新循环结束之后执行延迟回调，用于获得更新后的 DOM.nextTick主要使用了宏任务和微任务。根据执行环境分别尝试采用Promise、MutationObserver、setImmediate，如果以上都不行则采用setTimeout。定义了一个异步方法，多次调用nextTick会将方法存入队列中，通过这个异步方法清空当前队列

15.Vue 的响应式原理中 Object.defineProperty 有什么缺陷

无法监控到数组下标的变化，导致通过数组下标添加元素，不能实时响应。只能劫持对象的属性，从而需要对每个对象，每个属性进行遍历，如果，属性值是对象，还需要深度遍历。proxy可以劫持整个对象，并返回一个新的对象。不仅可以代理对象，还可以代理数组。还可以代理动态增加的属性