MVVM 状态管理的核心逻辑
- 数据驱动视图：
Model 变化通过 ViewModel 自动更新 View，无需手动操作 DOM（如this.msg = 'new value'会触发 View 重渲染）。 - 视图反馈数据：
View 的用户输入通过事件（如v-on:input）更新 Model，实现双向绑定（如表单输入同步到data属性）。 - 生命周期控制时机：
- 创建阶段（
created）：初始化 Model 数据、配置 ViewModel。 - 挂载阶段（
mounted）：建立 View 与 Model 的连接。 - 更新阶段（
beforeUpdate/updated）：处理数据变更与视图响应。 - 销毁阶段（
destroyed）：断开连接，释放资源。
async/await，理解实质上仍是一个异步
维度 |
传统 Promise 链式调用 |
async/await |
代码结构 |
链式回调，逻辑分散 |
线性结构，逻辑集中 |
执行流程 |
异步请求后立即返回，回调延迟执行 |
函数暂停，等待请求完成后继续 |
错误处理 |
需要单独的 处理错误 |
可使用 统一处理 |
调试体验 |
调用栈可能不完整，断点难设置 |
与同步代码调试体验一致 |
变量作用域 |
回调中需通过参数传递变量 |
函数内变量作用域连续 |
async/await 的核心优势在于让异步代码的执行流程看起来更接近同步代码，但本质上仍是异步执行（通过 Promise 和事件循环实现）。这种写法使代码更易读、调试更直观，尤其适合处理复杂的异步流程。
同步：指的是顺序执行，一步步往下走（看着）。但实质还是异步
Vue 的渲染逻辑是：
数据变化 → 触发 DOM 更新，因此要在mounted中调用，进行数据的渲染
数据变化->视图自动更新。v-model=”“ 双向绑定，适用于表单项（获取表单项的内容和设置内容）
创建springboot-web工程，不使用界面创建的的选项，而是手动自己创建（原因，使用界面创建，版本会用最新的，且每次都会变更版本）
手动创建
步骤一：
1.创建maven模块
2.在pom.xml文件中添加父工程和依赖（不在一个标签内）
<!--springboot父工程--> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>3.5.0</version> <relativePath></relativePath><!--放在这里解决资源访问问题--> </parent> <!--导入依赖--> <dependencies> <!--web依赖 ，不用写版本号，因为父依赖已经界定--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> </dependencies>
3.创建controller层，service层,Dao层（实际上就是个包名），其他的逻辑处理在对应的包名下
controller层是请求处理层，需要添加,controller(URI不能重复)
@RestController//创建对象加入spring容器（控制反转），不需要再new对象了 public class HelloController { /** * 处理前端/hello访问的请求 * @RequestMapping("/hello") 代表处理请求路径是"/hello" * String name 代表接收前端传递过来的name=value的数据，value会赋值给name * 注意：参数名name必须与前端传递的参数名一致 */ @RequestMapping("/hello") public String hello(String name){ System.out.println("进入HelloController处理请求"); return "Hello "+name+" ~"; }
@RestController//创建对象加入spring容器（控制反转），不需要再new对象了（加入容器类）
@RequestMapping("/hello") 代表处理请求路径是"/hello"（），在处理请求上添加
为了简化注解，Spring 提供了 HTTP 方法的专用注解：
注解 |
等价于 |
|
|
|
|
|
|
|
|
|
|
4.创建启动类
@SpringBootApplication //标识当前类是启动类，可以启动内置的tomcat的web服务器 public class HelloApplication { public static void main(String[] args) { SpringApplication.run(HelloApplication.class,args); } }
对比项 |
Spring Web（后端） |
Vue（前端） |
角色 |
处理请求、执行业务逻辑 |
发起请求、渲染 UI |
技术栈 |
Java、Spring MVC |
JavaScript、Vue.js |
请求方式 |
被动接收（注解定义接口） |
主动发起（axios/fetch） |
数据格式 |
Java 对象 → JSON |
JSON → JavaScript 对象 |
跨域处理 |
配置 CORS |
开发环境配置代理 |
典型场景 |
构建 REST API |
调用 API 更新 UI |
联系与协作
- 前后端分离架构：Vue 作为前端负责 UI，Spring Web 作为后端提供 API，两者通过 HTTP 协议交互。
