共计 3764 个字符，预计需要花费 10 分钟才能阅读完成。
前言
收集了两周近 30 场面试遇到的问题，本文整顿了其中 Vue 相干的面试题，由 ChatGPT 提供答案。
Vue 面试题
Vue 的实现原理是什么？
Vue 的实现原理是基于数据驱动视图的形式，即采纳数据响应式原理，当数据发生变化时，驱动视图动静更新，实现双向绑定和单向数据流。其中包含响应式零碎、模板引擎与虚构 DOM、渲染函数。
1、实现响应式零碎：Vue 通过初始化实例时建设的 Observer 来解决数据响应，当数据变动时，会告诉 Dep 实例，并从新渲染组件。2、模板引擎与虚构 DOM：Vue 在初始化组件时，会把模板编译成虚构 DOM，不会立即真用 DOM 渲染，以此晋升渲染性能。3、渲染函数：当 Vue 检测到数据变动时，会运行渲染函数创立页面，并与原来页面进行比拟，发现出变动之处，只对变动的内容进行更新，以此晋升性能。
Vue 中的双向数据绑定是什么？
Vue 的双向数据绑定是一种机制，用来实现视图和数据之间的分割。双向数据绑定能让咱们可能在一个界面中扭转某些数据，这些被批改的数据也能反映到界面中 elemets 上，也就是说，在一个界面中，你的输出和界面元素的状态能够放弃同步。
Vue 中双向数据绑定的实现原理？
Vue 中实现双向数据绑定的原理是：Vue 通过 Object.defineProperty()，重写了每个 Property 的 Setter 和 Getter 办法来对数据进行实时监听，当对象的值产生扭转时，会触发 setter，而后更新 View；反之，当 View 产生扭转时，会触发 getter，而 getter 由 Vue 监听了，而后更新 Model。
Vue 中 Diff 算法的实现原理？
Vue 中的 Diff 算法是采纳了简略的双指针算法来比拟新旧 VNode（虚构 DOM）树之间的差别。有两个指针别离指向新、旧 VNode 各自的子 VNode，新 VNode 的子 VNode 和旧 VNode 的子 VNode 顺次比拟，直到新 VNode 的子 VNode 中的指针地位比旧 VNode 的子 VNode 大（阐明新 VNode 有多进去的 VNode），或者旧 VNode 的子 VNode 中的指针地位比新 VNode 的子 VNode 大（阐明新 VNode 有少了的 VNode），或者两个指针同时相等但新旧 VNode 中的子 VNode 不相等（阐明新旧 VNode 中的同一号子 VNode 不同）时进行。
若两个指针都比对到了对方的子 VNode 上，则认为整棵 VNode 树曾经齐全比对结束，VNode 树没有发生变化。
若发现新 VNode 的子 VNode 有多进去的，则会将新 VNode 的子 VNode 挂载到 DOM 上，或者替换掉旧 VNode 的子 VNode；若发现新 VNode 的子 VNode 有少了的，则会将旧 VNode 的子 VNode 移除掉，从而实现了新旧 VNode 之间的比拟，从而实现了 VNode 树的 Diff 算法。
Vue 和 React 原理上的区别？
Vue 是一个底层框架，而 React 是利用框架。
Vue 应用组件的语法与自定义元素以及它的绑定机制来构建用户界面，而 React 应用 JavaScript 对象来形容构建用户界面。
Vue 默认应用虚构 DOM，而 React 则应用实在 DOM 来渲染节点。
Vue 可能更加灵便地实现状态治理，而 React 则更加清晰地实现状态治理。
Vue 反对实时渲染，而 React 无奈实现实时渲染。
Vue 虚构 DOM 实现原理？
Vue 虚构 DOM 实现原理次要是通过对原始 DOM 元素进行复制（通过 Object.assign），发明出一个虚构的 DOM 树，当在数据发送变动的时候，不会间接去更新原始 DOM，而是会比拟新旧虚构 DOM 的区别，而后依照新虚构 DOM 来更新原始 DOM。这样能够无效缩小重绘所带来的性能性能开销，进步渲染性能。
为什么 Vue 不必实在 DOM 来渲染节点？
Vue 只须要一份虚构 DOM，在应用程序更新之后能够比拟新旧虚构 DOM，确定精确的变动，这样就能够就能够十分疾速的更新 DOM 而无需渲染整个树，从而缩小了大量的计算工夫。
Vue3 比 Vue2 最大的扭转在哪里？
Vue3 的外围扭转次要在以下方面：
- 采纳新的构建零碎和基于 Proxy 技术的响应式零碎。
- 从新设计的组件零碎，反对异步组件和服务端渲染。
- 加强的路由库，反对更高效的路由性能和更好的动静路由匹配。
- 更好的 TypeScript 反对，反对更多的语法。
- 反对本地策略缓存和渲染缓存，晋升渲染性能。
- 优化的小程序反对，反对更多的小程序 API。
Vue 中渲染函数的原理？
Vue 的渲染函数能够用来生成一个虚构 DOM 树，而后与实在 DOM 树进行比拟，从而决定须要更新的 DOM 节点。Vue.js 对每一个元素都使用户提供的渲染函数，而后计算出它的虚构 DOM 子树，比拟它和它的前一个虚构 DOM 的子树，而后确定最小的更新策略。这使得 Vue 在更新的时候，只更新视图中的必要的 DOM 更新，从而升高了页面的渲染工夫。
Vue 中 Key 的原理是什么？
Vue 中的 key 是一个非凡的字符串标识符，把它指定给 Vue.js 中某个元素，以标识这个元素在数组中的地位。它的作用是使 Vue 在从新渲染列表的时候，可能追踪到列表的元素的地位，以确定该元素是新增加的还是被挪动的，以此实现最佳的性能和渲染性能。
vue 通信形式有哪些？
Props
父组件通过 Props 向子组件传递参数，子组件能够通过 props 接管父组件传递的参数
Events
子组件能够通过 $emit 来触发父组件定义的事件，父组件能够通过 v-on 关键字来监听子组件触发的事件
Provide/Inject
父组件能够通过 provide 向它的子孙组件提供特定值，这个值能够通过 inject 获取
Vuex
应用 Vuex，能够在多个组件之间共享状态，并且能够实现不同组件之间的状态同步
vue 模板引擎实现原理？
Vue 模板引擎的实现原理如下：
- 应用 JavaScript 将模板字符串解析为形象语法树 (AST)。
- 应用 AST 将形象语法树编译为渲染函数，该函数将数据渲染为最终的 DOM 构造。
- 定义 Vue 的指令，如
v-for、v-if、v-show等，用于对模板进行解决并生成对应的渲染函数。 - 在 Vue 实例中定义模板，在实例挂载时，解析模板并编译为渲染函数，并将渲染函数放入 Vue 实例中。
- 当数据变动时，调用渲染函数并将数据渲染到 DOM 中，实现视图响应式更新
Vue 生命周期有哪些？
Vue 生命周期
Vue 实例从创立到销毁的过程，就是生命周期。
Vue 的生命周期分为 8 个阶段：
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestory
- destoryed
Vue3 为什么不举荐应用 Mixin 了？
为什么不举荐应用 Mixin
Mixin 会使 Vue 的组件之间的可复用性急剧下降，因为 Mixin 会引入一些全局的属性和办法，对原有的组件产生凌乱的影响。
Mixin 会导致组件的渲染后果不可预测，在组件之间混入同一个 Mixin 可能会有不一样的后果，而且很难追踪和调试。
Mixin 会导致自定义属性（props）和办法（methods）之间的命名抵触，从而毁坏组件的性能，或者至多会使组件变得复杂和难以保护。
Mixin 会在肯定水平上减少对组件的未知依赖，可能会导致意想不到的谬误，而且也很难查找进去。
Vue3 相比 Vue2 改良？
Vue3 与 Vue2 相比改良
性能晋升 ：Vue3 采纳了新的渲染引擎，晋升了整体渲染性能；
外围代码封装 ：Vue3 应用 ES6 将外围代码封装为模块，不便复用，缩小代码体积；
TypeScript 反对 ：Vue3 全面反对 TypeScript，使开发更加简略，且更易于保护；
加强的 Composition API：Vue3 全新的 Composition API 代替旧的 Options API，加强了组件的复用能力，使组件的开发更灵便；
Fragments 反对 ：Vue3 反对 Fragments，能够将多个根节点放到单个模板中，能够更灵便地解决多根节点；
Teleport 反对 ：Vue3 反对 Teleport，能够在不同地位间传递组件，能够更灵便地定义视图；
SSR 改良 ：Vue3 对服务端渲染也做了一些改良，使加载更快，性能更优；
Virtual DOM 改良 ：Vue3 采纳 Virtual DOM，优化了虚构 DOM 的渲染机制，晋升性能；
牢靠的 UI 测试 ：Vue3 反对牢靠的 UI 测试，使开发者更容易编写和保护单元测试。
Vue 的 key 为什么能优化列表性能？
Vue 的 key 是 Vue 所提供的一个属性，其作用是为 Vue 的每个元素赋予一个惟一的标示，在更新数据时，Vue 通过比拟这个标示来辨别新旧元素，以此来进步更新数据时列表渲染的性能。
Vue3 响应式实现原理？
Vue3 响应式实现原理？
Vue3 中的响应式实现原理基于 Proxy 对象。Proxy 对象用于定义和拦挡对象属性的拜访，能够拦挡对象的以下操作：
- get
- set
- has
- deleteProperty
- ownKeys
- getOwnPropertyDescriptor
当在 Vue 的实例中申明一个属性时，Vue 将会通过 Proxy 重写对象的 getter 和 setter 办法，并将其变成响应式数据。当属性的值扭转时，Vue 会自动更新对应的视图。
此外，Vue 还提供了一个 reactive 函数来让对象变成响应式，并可自定义 getter 和 setter 办法来实现响应式数据。