【后端转全栈|第一天】

最新推荐文章于 2026-09-20 15:31:48 发布

原创最新推荐文章于 2026-09-20 15:31:48 发布 · 233 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

前言：

由于纯后端已经没有任何竞争力了，所有我开始学习前端，往全栈开发方向前进，我在次之前断断续续了解过前端的内容，然后也做过AI应用，不过都比较散，东一块西一块，今天开始系统性学习，先学前端的知识。

我今天最开始是直接看的视频，但是我发现看视频学习真的有个很大的问题：看了就忘，而且就算看完了也是云里雾里过两天就会全部忘记，所以我干脆直接让ai给我生成代码，我直接对着代码学算了。

我是直接学习vue3，像html，js，css我都不想去一点点啃了，我觉得ai时代这种学习方式已经不行了，现在只需要把核心知识学习了，代码能看懂，其实后续就是在不断地写页面中进行学习了。

开启vue项目

这个是项目的整体架构，我只了解了核心的包：像src\ 这个文件下就是我们写的各个组件了。

前端概念	后端类比
`src/`	`src/main/java` + `src/main/resources`
`package.json`	`pom.xml`
`node_modules/`	`~/.m2/repository`
`main.ts`	`Application.java` 的 `main` 方法
`vite.config.ts`	`application.yml`

协作流程图

1. 浏览器访问 http://localhost:5173
↓
2. 服务器返回 index.html（空壳页面）
↓
3. 浏览器解析到 <script src="/src/main.ts">，开始执行 main.ts
↓
4. main.ts 执行 createApp(App).mount('#app')
↓
5. Vue 把 App.vue 里的所有内容（模板 + 逻辑 + 样式）渲染成真实 DOM
↓
6. 这些 DOM 被塞进 index.html 的 <div id="app"> 里面
↓
7. 你看到了完整的页面（标题 + Todo列表 + 所有交互）

其实一个借助vue开发的页面是这么组成的拿ai写的一个页面来说：

我的待办这一整个卡片其实就是挂到index.html里面的。这一整个白色背景其实就是一个index.html

我的待办这一个卡片其实就是App.vue组件，然后下面这两个卡片也是一个组件

这里有两个待办卡片，就是渲染了两个组件实例。所以我说其实一个页面就是一个index.html骨架+一个全局组件App.vue+挂载到App.vue上的各个组件。

父子组件

谁在代码里“引入”并“使用了”谁，谁就是父组件；被引入、被使用的那一个，就是子组件。

App.vue = 父组件（它是“大管家”，管着整个列表数据）

TodoItem.vue = 子组件（它是“小卡片”，只管自己这一行的展示）

这个就是子组件

单向数据流 + 事件向上冒泡

在 Vue 里，父子组件通信有两条铁律

数据（Props） → 子组件（只读）
向下传递
向上冒泡
事件（Emits） ← 子组件（触发）

数据向下流	父组件通过Props把数据传给子组件，子组件只能读，不能改	App.vue把`todos`数组的每一项传给`TodoItem`，子组件只展示，不修改
事件向上冒	子组件通过Emits通知父组件“有事发生”，父组件负责处理	子组件点删除 → 父组件执行`splice`删数据

为什么要把组件拆成父子？

组件	单一职责	如果全写在一起会怎样？
App.vue	管理数据源（`todos`数组）+ 定义增删改逻辑 + 整体布局	一个文件超过500行，改一个复选框要把整个页面滚三遍
TodoItem.vue	只负责“一行卡片长什么样”+ 内部点击交互	独立出来，改卡片样式只改这一个文件，不影响其他逻辑

父组件管数据，子组件管展示；Props向下传，Emits向上冒；子组件只读不改，数据修改全由父包办。

数据双向绑定

可以看见只要有待办数据上方的待完成总计都会发生变化，这其实就是vue的一个很关键的特性

数据双向绑定，指的就是 数据（Model） 和 视图（View） 之间的自动同步机制。

数据变了 → 页面自动刷新（M → V）

页面改了（比如输入框打字）→ 数据自动跟着变（V → M）

在 Vue 里，实现这个魔法的指令就是 v-model。

我对 Vue 开发的核心理解

1. 页面组成结构

用 Vue 开发时，整个页面就是由一个个组件构成的。

index.html 只是一个空的挂载点（占位符），里面只有一个 <div id="app">。

main.js 负责把 App.vue 挂载到 index.html 上。

App.vue 作为根组件，再像搭积木一样，引入并挂载更多子组件，形成一颗组件树。

2. 我们开发者写什么

我们写的内容分为三块：

模板（Template）：告诉 Vue 数据该怎么渲染（HTML结构 + 指令如 v-if、v-for）。

样式（Style）：决定组件长什么样（CSS）。

逻辑（Script）：定义数据（State）和方法（Methods），实现如何接收用户数据（事件处理）以及如何修改数据。

核心工作流：

用户操作 → 触发方法 → 方法修改数据 → 数据驱动视图更新。

3. “组件什么时候出现”谁说了算？

我最初以为“具体每个组件什么时候出现，都是框架来决定”，这个说法需要修正：

真正的决策者：数据。
我们用 v-if="isShow"、v-for="list" 等指令，明确告诉 Vue：“当数据满足什么条件时，这个组件出现/循环生成”。

框架（Vue）的角色：它是执行力极强的“施工队”。
Vue 不会擅自决定显示谁，它只干一件事——盯着数据（响应式系统），一旦数据变了，它立刻按照我们写好的模板规则，高效地更新/挂载/销毁对应的组件。

我们不需要关心 Vue 什么时候执行 diff，只需要关心一件事——“用户操作后，我该把哪条数据改成什么值？” 改完数据，页面自动变。

5. 组件的生命周期（挂载与卸载）

出现（挂载）：当父组件模板中引入子组件标签，且 v-if 条件为真，或路由匹配到该组件时，Vue 自动实例化并渲染该组件。

消失（卸载）：当条件变为假，或路由跳走时，Vue 自动销毁该组件（清空监听、断开事件）。

总结

我个人认为，后端开发其实就是决定数据该怎么安全，快速的存取罢了，前端开发其实就是拿到数据后该怎么进行渲染，怎么进行快速渲染，这只是简单最直白的说，也只是我现在的理解，在后续学习中我可能会改变这些看法。同时我也对数据驱动开发有了更深的理解，我发现我输入数据后，App.vue接收数据然后传给子组件，然后vue框架发现数据多了就执行这段代码，然后页面就显示了待办卡片，也就是数据变了视图也变了，数据删除了卡片也消失了。全靠框架进行渲染。