前端面试题（Vue篇）_前端vue面试题-CSDN博客

具备跨平台的优势。由于虚拟DOM是以JS对象为基础而不依赖真实平台环境，所以使它具有了跨平台的能力，比如浏览器、Weex、Node等。
操作DOM慢，JS运行效率高。我们可以将DOM对比操作放在JS层，提高效率。运用patching算法来计算出真正需要更新的节点，最大限度地减少DOM操作，从而显著提高性能。虚拟DOM本质上就是在JS和DOM之间做了一个缓存。
提升渲染性能。虚拟DOM的优势不在于单次的操作，而是在大量、频繁的数据更新下，能够对视图进行合理、高效的更新。

vue中的虚拟DOM原理_vue虚拟dom原理-CSDN博客

5.diff算法

特点：

比较只会在同层级进行，不会跨层级比较。
在diff比较的过程中，循环从两边向中间比较。

方式：递归+双指针

判断是否是同一元素，不是同一元素，则直接替换。
是同一个元素，则比对属性→比对儿子→双指针比较→对比查找进行复用。

步骤：

（1）patch函数中对新老节点进行比较，如果新节点不存在就销毁老节点，如果老节点不存在，直接创建新的节点。当两个节点是相同节点的时候，进入 patctVnode过程，比较两个节点的内部。

（2）patchVnode函数比较两个虚拟节点内部，如果两个虚拟节点完全相同，返回当前vnode的children不是textNode，再分成三种情况：

有新children，没有旧children，创建新的。
没有新children，有旧children，删除旧的。
新children、旧children都有，执行`updateChildren`比较children的差异，这里就是diff算法的核心，当前vnode的children是textNode，直接更新text。

（3）updateChildren函数子节点进行比较。

第一步，头头比较。若相似，旧头新头指针后移（即 `oldStartIdx++` && `newStartIdx++`），真实dom不变，进入下一次循环；不相似，进入第二步。
第二步，尾尾比较。若相似，旧尾新尾指针前移（即 `oldEndIdx--` && `newEndIdx--`），真实dom不变，进入下一次循环；不相似，进入第三步。
第三步，头尾比较。若相似，旧头指针后移，新尾指针前移（即 `oldStartIdx++` && `newEndIdx--`），未确认dom序列中的头移到尾，进入下一次循环；不相似，进入第四步。
第四步，尾头比较。若相似，旧尾指针前移，新头指针后移（即 `oldEndIdx--` && `newStartIdx++`），未确认dom序列中的尾移到头，进入下一次循环；不相似，进入第五步。
第五步，若节点有key且在旧子节点数组中找到sameVnode（tag和key都一致），则将其dom移动到当前真实dom序列的头部，新头指针后移（即 `newStartIdx++`）；否则，vnode对应的dom（`vnode[newStartIdx].elm`）插入当前真实dom序列的头部，新头指针后移（即 `newStartIdx++`）。

【精选】vue中的diff算法_vue diff-CSDN博客

说说 vue2 和 vue3 核心diff算法 - 掘金 (juejin.cn)

6.Vue2和Vue3的区别

Vue3和Vue2的区别_前端_你吃香蕉吗？-华为云开发者联盟

7.MVC和MVVM的区别

mvc和mvvm之间有什么区别啊？ - 知乎

8.computed和watch的区别

computed计算属性：

要用的属性不存在，需要通过已有属性计算得来
简化template里面{{ }}的计算和处理props/$emit的传值
具有缓存性，页面重新渲染值不变化，计算属性会立即返回之前的计算结果，而不必再次执行函数
不支持异步
不能在data中定义

watch侦听属性：

当被监视的属性变化时，回调函数自动调用，进行相关操作
监听props，$emit或本组件的值执行异步操作
无缓存性，页面重新渲染时值不变化也会执行
支持异步
监听数据必须是data中声明过或父组件传递过来的props中的数据，可以配合computed使用

watch跟computed的区别_computed与watch的区别-CSDN博客

9.生命周期（父子组件生命周期触发顺序）

Vue2：Vue的生命周期的详解_vue 生命周期-CSDN博客

Vue3：【vue3系列】vue3之生命周期(带图)_vue3生命周期图-CSDN博客

父子组件生命周期触发顺序：vue父子组件生命周期执行顺序_独钓渔的技术博客_51CTO博客

10.组件之间的通信方式

vue中组件间通信的6种方式_vue组件通信_Jiang_JY的博客-CSDN博客

11.响应式原理

Vue2：浅谈Vue响应式原理_二九君的博客-CSDN博客

Vue3：【Vue3中的响应式原理】_vue3响应式原理_小田是个程序员的博客-CSDN博客

12.双向绑定原理

Vue2：vue双向绑定原理_vue双向绑定的原理_程序员~北北的博客-CSDN博客

Vue3：vue3双向绑定实现原理_vue3双向绑定原理_这是提莫大人的博客-CSDN博客

v-model原理：vue 中v-model原理及应用_向组件中绑定了v-mode,最终会被解析为下方的结构. 为el-checkbox增加了model属性-CSDN博客

13.两种路由模式的原理和区别

【精选】hash值和history值详解区别-CSDN博客

14.keep-alive的使用及原理

keep-alive是Vue.js的内置组件，它能够把不活动的组件的实例保存在内存中，而不是直接销毁。它是一个抽象组件，不会被渲染到真实DOM中，也不会出现在父组件链中。它提供了exclude和include两个属性，允许组件有条件的缓存。

keep-alive的使用及详解-CSDN博客

15.nextTick的实现

概念：Vue中的nextTick主要用于处理数据动态变化后，DOM还未及时更新的问题。在修改数据之后立即使用这个方法就可以获取更新后的DOM。

原理：当数据发生变化，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后再统一进行更新。nextTick本质是利用JS的这些异步回调任务队列来实现Vue中的异步回调队列。

使用场景：在created生命周期执行DOM操作，在数据变化后需要进行基于DOM结构的操作。

【精选】简单易懂关于nextTick()的理解-CSDN博客

16.怎样实现路由懒加载

路由懒加载：我们在路由中通常会定义很多不同的页面。如果不应用懒加载的话，很多页面都会打包到同一个js文件中，文件将会异常的大。进入首页时，需要加载的内容过多，时间过长，在浏览器中可能会出现短暂的空白页，从而降低用户体验，而运用路由懒加载是将各个模块分开打包，用户查看的时候再加载对应的模块，减少加载用时。

实现方式：

（1）Vue异步组件

（2）ES6的import（）

（3）webpack的require.ensure（）

vue 实现动态路由_白菜星的博客-CSDN博客