整理Vue相关的内容
1. 虚拟 dom 有什么好的地方？ 框架为什么要设计虚拟 dom？
先说一下真实DOM和虚拟DOM。
浏览器有个渲染引擎，用来渲染和呈现页面的样式。HTML代码是无法被渲染引擎直接理解的，需要转化为内部可以理解的数据结构是DOM。
DOM树的构建过程：在渲染引擎内部有一个叫做HTML解析器(HTML Parser)的模块。在接收到 HTML数据后的流程是 HTML -> 分词器(token) -> 生成节点(Node) -> DOM
渲染引擎和JS引擎是两个不同的模块。
比如早期之前用的JQuery框架的，就是操作真实DOM的操作，内部是通过document.getxxxxx的操作，从DOM树中找到要操作的节点，然后做对应的操作。这种处理方式就是操作真实DOM。
然而，直接操作实际 DOM 是一项昂贵的操作，会引起浏览器的重绘和重排，导致性能问题。比如需要修改页面中3个节点内容，这3个节点是父子孙的关系。如果操作真实DOM的话，其实是要渲染3次的。
虚拟DOM的基本思想是将实际DOM结构映射到JavaScript 对象树中的虚拟节点（Virtual Node）。每个虚拟节点都对应着实际 DOM 中的一个元素。当应用程序的状态发生变化时，虚拟 DOM 能够通过比较前后两个状态的虚拟节点树的差异，找出需要更新的部分，并将这些差异批量地应用到实际 DOM 中，从而最小化对 DOM 的操作。
虚拟DOM并不能消除原生的DOM操作，虚拟 DOM 的优势在于它能够通过批量的 DOM 操作减少浏览器的重绘和重排，提高性能。它还提供了一种组件化的开发方式，使得开发人员可以更轻松地构建可维护和可重用的 UI 组件。
总的来说虚拟DOM的好处是：
- 性能优化。
- 跨平台兼容
- 组件开发
参考资料
浏览器之JavaScript如何影响DOM树构建过程
为什么需要虚拟DOM？
Vuejs设计与实现 —— 为什么需要虚拟 DOM
2. Vue生命周期和钩子函数的理解？
对于Vue的生命周期，其实就是Vue框架执行的各个阶段暴露出来的函数。
不过需要注意的是，在各个周期中的钩子函数，能不能访问dom，data数据，methed方法等。
生命周期大概分几个几段，每个阶段有两个钩子函数
- 创建阶段 -- 在组件创建时执行 -- beforeCreate, created
- 挂载阶段 -- DOM 被挂载时执行 -- beforeMount, mounted
- 运行阶段 -- 当响应数据被修改时执行 -- beforeUpdate, updated
- 销毁阶段 -- 在元素被销毁之前立即运行 -- beforeDestroy, destroyed
Vue2和Vue3钩子函数对照
| Vue2 生命周期钩子 | Vue3 生命周期钩子 |
|---|---|
| beforeCreate | setup |
| created | setup |
| beforeMount | onBeforeMount |
| mounted | onMouted |
| beforeUpdate | onBeforeUpdate |
| updated | onUpdated |
| beforeDestroy | onBeforeUnmount |
| destroyed | onUnmounted |
| errorCaptured | onErrorCaptured |
参考资料
3. 对MVVM的理解？
MVVM是一种软件架构模式，它的全称是Model-View-ViewModel。它旨在通过将应用程序的用户界面（View）与底层数据和业务逻辑（Model）解耦，以及通过一个中间层（ViewModel）来实现数据绑定和交互的分离。
在MVVM中，Model代表应用程序的数据和业务逻辑，View代表用户界面，而ViewModel则是连接Model和View的桥梁。ViewModel中包含了与用户界面相关的数据和命令，并提供了一组方法来处理用户操作和更新数据。ViewModel还负责将Model中的数据进行转换和准备，以适应View的需要。
MVVM的核心概念是数据绑定。通过数据绑定，ViewModel中的数据可以自动与View中的控件进行同步，使得数据的变化能够即时地反映在界面上，而无需手动编写大量的事件处理代码。这种双向的数据绑定可以大大简化应用程序的开发和维护工作。
另一个重要的概念是命令绑定。ViewModel中的命令可以与View中的用户操作进行绑定，例如按钮的点击事件。通过命令绑定，ViewModel可以直接处理用户操作，而无需将逻辑代码写在View中，实现了业务逻辑与用户界面的解耦。
4. MVVM和MVC的区别？
MVC和MVVM都是软件架构模式，它们在设计和组织应用程序的方式上有一些不同之处。 在前后端的开发中，前端是负责写UI，后端负责写业务和处理数据。在开发中前端写UI,然后调用接口拿到数据，把数据按照对应的格式展示在页面中。
-
概念不同 MVC: Model是代表应用程序的数据和业务逻辑，View负责展示用户界面，Controller负责接收和处理用户输入，以及协调Model和View之间的交互。 MVVM: Model代表数据和业务逻辑，View负责展示用户界面，ViewModel负责将Model中的数据准备和转换为View所需的形式。
-
数据绑定 MVC：通常需要手动编写代码将Model中的数据更新到View上，并且手动处理用户输入。 MVVM：使用数据绑定机制，View和ViewModel之间建立了自动的数据同步，数据变化可以自动反应在界面上，用户的操作可以直接传递给ViewModel进行处理。
-
依赖关系 MVC: View -> Controller -> Model -> View。Controller和Model之间不是直接依赖的，是通过接口通讯的。 MVVM: View <-> ViewModel <-> Model。View和Model之间没有直接的依赖关系。
