JavaWeb学习笔记(一)Thymeleaf和Vue的本质区别

Thymeleaf:

---

模板引擎

定义：

        模板引擎是一种工具，用于将数据和UI模板结合起来，生成最终的HTML内容。

作用：        

        简化UI渲染过程，通过使用占位符或特定语法，将数据动态注入到预定义的UI模板中，生成最终的HTML页面。

        Thymeleaf相当于过去的JSP，但比JSP更先进。它是后端渲染，后端直接推送整个HTML文档。然而，这种方法可能会增加服务器的负担，因为渲染的内容较多。

        在前后端不分离的情况下，Springboot推荐用HTML做页面，然后用Thymeleaf做模板引擎，做数据渲染，但是这种方式还是要用js或者jquery手动去操作DOM。

Vue:

---

前端框架

定义：

        是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷、更加高效。

特点：

        框架规定了编程方式，提供一套完整的解决方案，由框架控制一切，开发者只需要按照规则编写代码。

        Vue和Thymeleaf，不是一个层面的，Vue是前端渲染，后端数据以json形式提供，前后端交互只有纯数据。

        Vue是一款前端渐进式框架，意味着您可以根据需要逐步引入Vue，而不必一次性改变整个项目结构。

声明式渲染:

        Vue允许您通过简单地将数据绑定到DOM上的元素来声明式地渲染页面。您只需指定数据和页面上的DOM元素如何关联，Vue会自动处理数据的变化并更新DOM，使得开发者无需手动操作DOM。

组件系统:

        Vue采用了组件化的开发方式，将页面拆分为多个独立的、可复用的组件。每个组件包含自己的HTML模板、JavaScript逻辑和CSS样式，可以被嵌套和组合，使得代码结构更清晰、可维护性更高。

客户端路由:

        Vue提供了客户端路由功能，允许您在单页应用（SPA）中实现页面之间的导航，而无需每次导航都向服务器发送请求。通过Vue Router，可以根据URL的变化加载不同的组件，实现页面切换和状态管理。

大数据状态管理:

        指的是使用Vuex来管理Vue.js应用程序中的共享状态。Vuex是一个专门为Vue设计的状态管理库，它采用集中式存储管理应用的所有组件的状态，并提供了一套规则保证状态的一致性。

构建工具:

        Vue通常使用一些构建工具来帮助开发者构建、调试和部署应用程序。例如，Vue CLI是一个官方提供的构建工具，可以快速搭建Vue项目，并提供了丰富的插件和配置选项来满足各种需求。

        vue是轻量级的，它有很多独立的功能或库，我们会根据我们的项目来选用vue的一些功能。就像我们开发项目时如果只用到vue的声明式渲染，我就只用vue的声明渲染，而我们要用他的组件系统，我们可以引用它的组件系统。

        Vue通过MVVM模式,能够实现视图与模型的双向绑定，简单来说，就是数据变化的时候, 页面会自动刷新, 页面变化的时候，数据也会自动变化。

前后端分离

---

        Thymeleaf和Vue在支持前后端分离的方式上存在显著的区别。这主要体现在它们处理数据和渲染页面的方式上。

Thymeleaf实现了开发的前后端分离，分离程度比较低:

        Thymeleaf的页面主要还是作为视图依附于后端存在，与后端部署在一起，不能作为独立的应用程序，由后端控制器打开并负责传入数据模型对象。所以,后端才是完整的应用程序。

        Thymeleaf主要在服务器端工作，它负责在服务器端渲染页面。这意味着，后端将数据绑定到模板中，然后在服务器上将整个页面渲染为HTML，再将这个完整的HTML页面发送给客户端（如浏览器），当页面打开时，用户会立即看到已经填充了数据的页面内容。

        这种方式的优点在于页面加载速度快，因为用户无需等待异步数据请求。但是，由于数据是在服务器端渲染的，所以页面的动态性和交互性可能会受到限制。

Vue则实现了开发和部署的前后端分离，分离程度更高，前端独立性更强:

        Vue实现的前端主动性更强，业务逻辑很多都放在前端实现，前端可以单独部署，后端一般只提供持数据久化服务。这时后端只是作为被动的、被调用的服务存在。

        Vue则主要在客户端（浏览器）工作，它通过异步的方式请求数据。后端返回JSON格式的数据给前端，然后Vue通过其指令在前端循环渲染列表或其他内容。

        这种方式使得页面具有更高的动态性和交互性，因为前端可以根据需要实时更新数据，无需重新加载整个页面，由于数据是异步加载的，所以可能会出现页面先打开，然后数据慢慢加载的情况，导致用户看到页面内容有延迟。

        Thymeleaf和Vue在支持前后端分离的方式上各有优劣。Thymeleaf适合需要快速加载页面且交互性要求不高的场景，而Vue则更适合需要高度动态和交互性的页面。

---