Vue的基础知识点学习笔记（一）
MVVM模式
Vue框架采用MVVM模式去管理应用程序的数据模型盒试图界面的交互，即数据驱动视图，从而避免了操作DOM。
MVVM（全称Model-View-ViewModel）是一种软件架构模式，将视图（View）与模型（Model）通过视图模型（ViewModel）作为桥梁连接起来。
- 模型（Model）：表示应用程序的数据模型或业务逻辑，负责处理数据的存取、处理和操作。比如数据结构、数据库操作、网络请求等。
- 视图（View）：代表UI视图，负责展示数据和与用户进行交互，就是客户看到的界面。
- 视图模型（ViewModel）：连接Model与View，处理View上的事件和输入，并将其转化为对Model的操作；从Model层上获取数据，将其渲染到View上。
优点：
- 将视图界面的逻辑与数据业务处理逻辑分离，提高代码可维护性和复用性。
- 通过ViewModel对View与Model的双向绑定，将数据的变化实时反馈给用户界面，实现响应式操作。
组件化
理解：将一个应用或页面拆分成多个模块，每个模块实现一个功能或逻辑，这些模块整合到一起就是一个完整的页面，一个组件可以同时在不同的页面被使用。
优势：
- 降低整体系统的耦合度。
- 提高代码的复用性和可维护性。
- 方便调试
耦合度：模块之间的相互依赖程度。耦合度越高，系统复杂度越高，系统稳定性越低，系统可维护性和可复用性越差；耦合度越低，系统复杂度越低，系统稳定性越高，系统可维护性和可复用性越好。
DOM
DOM全称Document Object Model，是HTML和XML文档的编程接口。当浏览器加载一个页面时，会创建出这个页面的模型，称为DOM树。
- 文档节点：树顶端的节点，呈现整个页面。
- 元素节点：通过元素节点可以访问它的属性和文本。
- 属性节点：属性节点不是元素的字节点，而是元素的一部分，访问元素时可以通过特定方法获取。
- 文本节点：访问元素节点时，可以访问其内部的文本。文本节点没有子节点。
示意图：
虚拟DOM
虚拟DOM（Virtual DOM）通过JavaScript对象来抽象地描述DOM的结构。
作用：通过在内存中操作虚拟DOM，可以减少直接操作真实DOM的频率，提高性能。
工作流程：
- 首次渲染时，框架根据组件的模板，生成虚拟DOM树。
- 组件的状态或数据发生变化时，框架会重新生成虚拟DOM树。
- 框架对比新旧虚拟DOM树，找出需要更新的节点。
- 根据对比结果操作真实的DOM树，避免对整个DOM树进行重构。
优点：
- 通过减少DOM操作，提高页面渲染效率。
- 虚拟DOM可以在不同平台上使用。
- 开发者可以专注于数据变化，无需关注DOM操作。
缺点：
- 虚拟DOM在创建和对比时会产生额外计算，比如在首次渲染中，虚拟DOM会多一层计算，可能会比html渲染要慢。
- 在一些要求极高的应用中，虚拟DOM无法进行针对性的极致优化。
diff算法
diff算法是一种通过同层的树节点进行比较的高效算法。
特点：
- 比较在同层级进行。不会跨层级比较。
- 比较过程中，循环从两边向中间比较。
整体策略：深层优先，通常比较
应用场景：比较新旧虚拟DOM树。
computed与watch
相同点：二者再Vue.js中主要用于数据监听和计算。
区别：
- 缓存功能：
- computed计算属性有缓存功能，计算结果会被缓存，当数据发生变化时，才会重新计算。如果依赖的数据没有变化，多次访问不会重新计算。
- watch不具有缓存功能，只要监听的数据发生变化，watch就会触发相应的操作，无论数据是否震动变化。
- 异步操作：
- computed是同步的，不能包含异步操作。
- watch支持异步操作。