vue面试

一、基础

1、MVVM与MVC

1.1、MVVM

VM作为更新桥梁

a、MVVM构成：
Model代表数据模型，数据和业务逻辑都在Model层中定义
View代表UI视图，负责数据的展示
ViewModel负责监听Model中数据的改变并且控制视图的更新，处理用户交互操作

b、交互：

Model和View并无直接关联，而是通过ViewModel来进行联系的，

Model和ViewModel之间有着双向数据绑定的联系。

因此当Model中的数据改变时会触发View层的刷新，View中由于用户交互操作而改变的数据也会在Model中同步，

这种模式实现了 Model和View的数据自动同步，因此开发者只需要专注于数据的维护操作即可，而不需要自己操作DOM  

1.2、MVC

 M驱动V（数据驱动视图）

MVC 通过分离 Model、View 和 Controller 的方式来组织代码结构。其中 View 负责页面的显示逻辑，Model 负责存储页面的业务数据，以及对相应数据的操作。并且 View 和 Model 应用了观察者模式，当 Model 层发生改变的时候它会通知有关 View 层更新页面。Controller 层是 View 层和 Model 层的纽带，它主要负责用户与应用的响应操作，当用户与页面产生交互的时候，Controller 中的事件触发器就开始工作了，通过调用 Model 层，来完成对 Model 的修改，然后 Model 层再去通知 View 层更新

2、常见的Vue性能优化方法

 

二、生命周期

1、Vue 子组件和父组件执行顺序

 

 

三、组件通信

四、vuex

1、Vuex有哪几种属性

state => 基本数据(数据源存放地)
getters => 从基本数据派生出来的数据
mutations => 提交更改数据的方法，同步
actions => 像一个装饰器，包裹mutations，使之可以异步。
modules => 模块化Vuex

2、Vuex中actions和mutations的区别

2.1、mutations
mutation中的操作是一系列的同步函数，用于修改state中的变量的的状态。

当使用vuex时需要通过commit来提交需要操作的内容。

2.2、actions
Action 可以包含任意异步操作，Action 提交的是 mutation，而不是直接变更状态。
2.3、区别
Mutation专注于修改State，理论上是修改State的唯一途径；Action业务代码、异步请求。
Mutation：必须同步执行；Action：可以异步，但不能直接操作State。
在视图更新时，先触发actions，actions再触发mutations

3、为什么 Vuex 的 mutation 中不能做异步操作？

每个mutation执行完成后都会对应到一个新的状态变更，这样devtools就可以将新的状态存下来，然后就可以实现 数据的更新 了。

如果mutation支持异步操作，就没有办法知道状态是何时更新的，无法很好的进行状态的追踪，给调试带来困难。

4、如何在组件中批量使用Vuex的getter属性

使用mapGetters辅助函数, 利用对象展开运算符将getter混入computed 对象中

 

 

5、如何在组件中重复使用Vuex的mutation

用mapMutations辅助函数，使用展开运算符映射到组件的methods中进行重复使用

在组件中使用，然后调用this.setNumber(10)相当调用this.$store.commit('SET_NUMBER',10)

 

五、router

 1、Vue-router 导航守卫有哪些

全局守卫（前置/后置）：beforeEach、beforeResolve、afterEach
路由独享的守卫：beforeEnter
组件内的守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

 

六、vue3.0

1、Vue3.0有什么更新

1.1、监测机制的改变

● 3.0 将带来基于代理 Proxy的 observer 实现，提供全语言覆盖的反应性跟踪。
● 消除了 Vue 2 当中基于 Object.defineProperty 的实现所存在的很多限制
  检测属性的添加和删除；
  检测数组索引和长度的变更；
  支持 Map、Set、WeakMap 和 WeakSet。

1.2、模板

● 作用域插槽，2.x 的机制导致作用域插槽变了，父组件会重新渲染，

而 3.0 把作用域插槽改成了函数的方式，这样只会影响子组件的重新渲染，提升了渲染的性能。
● 同时，对于 render 函数的方面，vue3.0 也进行一系列更改来方便习惯直接使用 api 来生成 vdom 。

1.3、对象式的组件声明方式

● vue2.x 中的组件是通过声明的方式传入一系列 option，和 TypeScript 的结合需要通过一些装饰器的方式来做，

虽然能实现功能，但是比较麻烦。
● 3.0 修改了组件的声明方式，这样使得和 TypeScript 的结合变得很容易

1.4、其它方面的更改

● 支持自定义渲染器，从而使得 weex 可以通过自定义渲染器的方式来扩展，而不是直接 fork 源码来改的方式。
● 支持 Fragment（多个根节点）和 Protal（在 dom 其他部分渲染组建内容）组件，针对一些特殊的场景做了处理。
● 基于 tree shaking 【删除无用调试代码 console.log之类】优化，提供了更多的内置功能。

2、defineProperty和proxy的区别

 

 

 

七、虚拟dom

1、对虚拟DOM的理解？

虚拟DOM就是用来描述真实DOM的javaScript对象，可以将多次修改的DOM一次性渲染到页面上，减少页面的重排重绘，提高渲染性能。

    在代码渲染到页面之前，vue会把代码转换成一个对象（虚拟 DOM）。在每次数据发生变化前，虚拟DOM都会缓存一份，变化之时，现在的虚拟DOM会与缓存的虚拟DOM进行比较。

    在vue内部封装了diff算法，通过这个算法来进行比较，渲染时修改改变的变化，原先没有发生改变的通过原先的数据进行渲染。

2、虚拟DOM的解析过程

● 首先对将要插入到文档中的 DOM 树结构进行分析，使用 js 对象将其表示出来并将这个 js 对象树给保存下来，最后再将 DOM 片段插入到文档中。

● 当页面的状态发生改变，需要对页面的 DOM 的结构进行调整的时候，首先根据变更的状态，重新构建起一棵对象树，然后将这棵新的对象树和旧的对象树进行比较，记录下两棵树的的差异。

● 最后将记录的有差异的地方应用到真正的 DOM 树中去，这样视图就更新了。

3、为什么要用虚拟DOM

3.1、保证性能下限，在不进行手动优化的情况下，提供过得去的性能

a、页面渲染的流程

解析HTML -> 生成DOM -> 生成 CSSOM -> Layout -> Paint -> Compiler

b、对比修改DOM时真实DOM操作和虚拟DOM的过程

真实DOM∶ 生成HTML字符串＋重建所有的DOM元素

虚拟DOM∶ 生成vNode+ DOMDiff＋必要的dom更新

3.2、跨平台

Virtual DOM本质上是JavaScript的对象，它可以很方便的跨平台操作，比如服务端渲染、uniapp等。

4、虚拟DOM真的比真实DOM性能好吗

首次渲染大量DOM时，由于多了一层虚拟DOM的计算，会比innerHTML插入慢。

正如它能保证性能下限，在真实DOM操作的时候进行针对性的优化时，还是更快的。

5、DIFF算法的原理 【实际就是对比 更新】

● 首先，对比节点本身，判断是否为同一节点，如果不为相同节点，则删除该节点重新创建节点进行替换
● 如果为相同节点，进行patchVnode，判断如何对该节点的子节点进行处理，先判断一方有子节点一方没有子节点的情况(如果新的没有子节点，将旧的子节点移除)
● 比较如果都有子节点，则进行updateChildren，判断如何对这些新老节点的子节点进行操作（diff核心）。
● 匹配时，找到相同的子节点，递归比较子节点
● 更新差异，复用节点

6、Vue中key的作用

6.1、第一种情况是 v-if 中使用 key。

由于 Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。因此当使用 v-if 来实现元素切换的时候，如果切换前后含有相同类型的元素，那么这个元素就会被复用。如果是相同的 input 元素，那么切换前后用户的输入不会被清除掉，这样是不符合需求的。因此可以通过使用 key 来唯一的标识一个元素，这个情况下，使用 key 的元素不会被复用。这个时候 key 的作用是用来标识一个独立的元素。
6.2、第二种情况是 v-for 中使用 key。

用 v-for 更新已渲染过的元素列表时，它默认使用“就地复用”的策略。如果数据项的顺序发生了改变，Vue 不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处的每个元素。因此通过为每个列表项提供一个 key 值，来以便 Vue 跟踪元素的身份，从而高效的实现复用。这个时候 key 的作用是为了高效的更新渲染虚拟 DOM。

总结：
vue为了更高效的渲染元素，会尽可能的复用元素，而非从头渲染，key可以为节点打标记，而非简单的复用节点。

当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，

比较规则：
旧虚拟DOM中找到了与新虚拟DOM相同的key
若虚拟DOM中内容没变, 直接使用之前的真实DOM
若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM
旧虚拟DOM中未找到与新虚拟DOM相同的key
创建新的真实DOM，随后渲染到到页面

7、为什么不建议用index作为key?

若对数据进行：逆序添加、逆序删除等破坏顺序操作:会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低
如果逆序添加、逆序删除等破坏顺序的操作且结构中还包含输入类的DOM：会产生错误DOM更新 ==> 界面有问题