01-01：数据渲染

1、Vue定义：是一套用于构建用户界面的渐进式的JavaScript框架

2、引用方式

1. 1. 外部CDN引入
   2. 本地引入

3、Vue的优缺点

• • 优点：

1. 1. 1. Vue是一个遵循MVVM模式的渐进式框架
      2. Vue比较易学，体积更小，灵活，高效
      3. Vue的本身只关注UI视图，可以更简单的导入Vue插件和第三方库
      4. 数据和视图完全分离开来，对视图的改变无需在操作DOM元素，只需要操作对应的数据，即可改变对应的视图结构，也就是通过双向数据绑定把View层和Model层连接了起来，通过对数据的操作就可以完成对页面视图的渲染

• • 缺点：

1. 1. 1. 生态系统相对较小：与 React 和 Angular 相比，Vue.js 的社区和第三方组件库相对较小，可能需要自己编写一些功能组件。
      2. 不利于SEO优化：大部分数据是存在于js代码里面的，在一个单页应用，搜索引擎请求到的html是没有渲染数据的。
      3. 中小规模项目适用： Vue.js 更适合中小规模的项目，大型项目使用会有一些限制，如处理复杂的数据流和状态管理。
      4. IE8及以下浏览器不支持。

4、数据渲染过程

1. 1. 引入vue.js文件
   2. 创建视图（模版）
   3. 创建viewModel
   4. 指定挂载点（el）
   5. 创建model渲染数据（data）

虚拟DOM和Diff算法

虚拟DOM的概念是通过状态生成一个虚拟节点树，然后使用虚拟节点树进行渲染。在渲染之前，会使用新生成的虚拟节点和上一次生成的虚拟节点进行对比，只渲染不同的部分。

通过虚拟 DOM-Diff 算法只需要在数据发生变化时，对新旧虚拟 DOM 进行差异化的比较，然后对真实 DOM 进行局部的更新操作，大大较少了渲染性能的开销，从而提高页面的渲染性能和用户体验。

Diff 算法是一种高效的算法，可以在不重建所有节点的情况下，将新旧虚拟 DOM 比较，找出需要更新的节点，从而实现局部更新，提高应用程序的性能。