一、渐进式框架
Vue是一个框架，也是一个生态，其功能覆盖了大部分前端开发常见的需求。包含了声明式渲染、组件化系统、客户端路由、大规模状态管理、构建工具等，但vue的核心库只关注视图层。在实际开发中，可以根据业务需求的变化，来不断增加这些功能，实现vue的渐进式增强。
二、声明式框架
声明式框架是一种编程范式，它允许开发者更加清晰地表达计算的逻辑或界面元素，而不是具体描述其执行步骤或过程。这种框架的主要特点在于它更关注结果，而不是达到这个结果的过程。
Vue被称为声明式框架，主要基于其编程模型的特点和方式，以下是几个关键原因：
- 关注结果而非过程：Vue允许开发者通过简洁的模板语法描述最终输出的HTML和JavaScript状态之间的关系，而不需要详细指定达到这些结果的步骤或过程。这种声明式的方式让开发者能够更专注于业务逻辑和界面效果，而不是底层的实现细节。
- 模板语法：Vue基于标准HTML拓展了一套模板语法，使开发者能够直接描述UI应该是什么样的，而不是如何构建它。这大大简化了UI开发的复杂性，并提高了代码的可读性和可维护性。
- 响应式数据绑定：Vue使用响应式数据绑定来自动更新UI，当数据发生变化时，Vue会自动检测到这些变化并相应地更新视图。这使得开发者无需手动编写繁琐的DOM更新代码，进一步简化了开发过程。
- 组件化：Vue提供了组件化的开发方式，允许开发者将UI拆分成独立的、可复用的组件。这些组件可以独立开发、测试和维护，提高了代码的可重用性和可维护性。组件之间的通信和数据流也可以通过声明式的方式进行管理，进一步简化了复杂应用的开发。
综上所述，Vue通过其声明式的编程模型、模板语法、响应式数据绑定和组件化特性，使开发者能够更高效地构建用户界面，并简化了开发过程。因此，Vue被广泛认为是一个强大的声明式框架。
声明式和命令式的区别：
- 命令式：早期进行前端开发，需要将获取到的数据用字符串拼接成需要的结果，然后插入到DOM中
- 声明式：声明式框架更注重结果，命令式的代码已经被封装到了vue.js中，替换DOM的操作由vue来实现
三、MVVM模式
-
MVC模式：后端开发使用的一种模式，包括模型（Model）、视图（View）、控制器（Controller）。后端开发，一般分成三层架构，包括：表现层、业务层、持久层。表现层负责接收客户端请求，并向客户端响应结果；业务层负责处理复杂的业务逻辑；持久层负责数据的持久化，对数据库表进行增删改查。其中表现层采用了MVC模式，使用控制器（Controller）来接收请求，模型（Model）进行数据封装，视图（View）展示数据，视图一般采用模板渲染引擎，比如：jsp、Thymeleaf等。
-
前端如何借鉴MVC模式：
- 用户和应用交互，控制器（Controller）的事件处理器被触发
- 控制器（Controller）从模型（Model）中请求数据，并返回给视图（View）
- 视图（View）将数据渲染，并呈现给用户
-
前端使用MVC模式的弊端：
- 针对每一个交互逻辑，都需要对应的控制器（Controller）来处理，而且复杂的DOM操作逻辑都放在了控制器（Controller）
-
MVVM模式：
-
针对前端采用MVC模式的弊端，需要去屏蔽控制器（Controller）。MVVM模式就是用来简化模型到视图的映射关系，隐藏controller
-
在MVVM模型中，View（视图）和Model（数据模型）之间是没有直接联系的，它们之间的同步工作是通过ViewModel（视图模型）实现的，ViewModel通过双向数据绑定将两者联系起来。
-
-
由于Vue引入了$ref属性，使得Model可以直接操作View，违反了MVVM模型中View和Model之间不应该直接通信的原则， Vue并没有完全遵循MVVM模型，但Vue的设计也受到了它的启发
四、虚拟DOM
-
虚拟DOM就是一个用来描述真实DOM的对象，但比真实DOM要轻量
-
传统更新页面，需要将一个字符串通过innerHTML插入到DOM节点中，这会导致节点全部重新渲染
-
使用虚拟DOM，可以通过diff算法，比较新旧虚拟节点的变化，计算出最小的更新步骤，最后应用到真实DOM的更新上
-
虚拟DOM本质上是一个JS对象，与具体平台无关，所以虚拟DOM支持跨平台，可以轻松地适用于多种应用程序和网站。
-
在Vue中，虚拟DOM的生成是通过Vue的编译器和渲染函数来实现的。当Vue实例被创建时，它的模板会被编译成一个渲染函数。渲染函数是Vue的核心，接收一个
createElement函数作为参数，这个函数用于创建虚拟DOM节点。当所有的模板元素都被转换为虚拟DOM节点后，这些节点会组合成一个虚拟DOM树。这个树形结构反映了组件的UI结构。当组件的状态发生变化时，Vue会重新运行渲染函数生成新的虚拟DOM树，然后与旧的虚拟DOM树进行差异比较（diff算法）。找出最小的变更集，并应用到真实的DOM上，以更新UI。render: function (createElement) { return createElement( 'div', // 标签名 { attrs: { id: 'foo' }, // 属性 }, [createElement('span', 'Hello')] // 子节点 ) }
五、组件化
- 提高开发效率：通过复用已有的组件，避免了重复的代码编写，从而提高了开发效率。
- 提高代码质量：组件的独立性和模块化降低了代码之间的耦合度，使得代码更加清晰和可维护。
- 增强可扩展：通过将应用拆分为多个组件，可以独立地对某个组件进行升级和扩展，而不会影响到其他部分的代码。
- 降低维护难度：只需要更新一个组件，就可以对使用组件的页面都进行更新
六、SPA
- SPA：SPA在初始时只加载一个HTML页面，之后的所有页面切换和内容更新都是通过客户端的JavaScript动态实现的，无需每次页面切换时重新加载整个页面。由于SPA无需在每次页面切换时重新加载整个页面，因此可以实现更流畅的用户交互和动态更新，减少了页面加载和切换时的延迟。但由于SPA的页面结构是动态加载的，不利于网络爬虫进行抓取，所以无法实现SEO。
- MPA：每次用户导航到新的页面时，都需要重新加载整个HTML页面，包括该页面所需的脚本和样式。由于页面包含静态结构，网络爬虫可以抓取到页面内容，所以SEO很好。
- 如何解决SPA的SEO问题：
- 服务端渲染（SSR）: 在服务端完成页面的渲染，直接输出完整的HTML
- 预渲染（SSG）：对于某些不经常变动的页面，可以使用预渲染技术生成静态的HTML文件
- 动态渲染：根据请求的来源（用户或搜索引擎爬虫）来动态地决定返回哪种类型的页面。对于用户，返回SPA页面；对于爬虫，返回经过服务端渲染的HTML页面。
- 元数据优化：确保每个页面都有适当的标题（title）、描述（description）和关键字（keywords）等元数据，以便搜索引擎更好地理解和展示页面内容
- 跟踪和分析：使用Google Analytics等工具跟踪和分析SPA的SEO效果，以便及时发现问题并进行优化