--- theme: smartblue highlight: github --- # 🌱 搭建 Vue3 项目：一篇文章带你掌握实战演练 > Vue3 + Vite + 组件化 + 响应式 + 表单绑定 + 计算属性 + Watch 全面上手！ ## 🏗️ 创建项目脚手架使用 `vite` 快速构建 Vue 项目： npm create vite # 根据提示选择 Vue 技术栈即可 cd your-project-name npm install npm run dev # 启动项目启动后，你的目录结构大致如下： ├─ .vscode/ # VSCode 配置 ├─ public/ # 静态资源（如 favicon） ├─ src/ # 项目源码目录 ├─ .gitignore # Git 忽略配置 ├─ index.html # 入口 HTML 文件 ├─ package.json # 项目依赖与脚本配置（像 Maven 的 pom.xml） ├─ README.md # 项目说明文档 └─ vite.config.js # Vite 配置文件 *** ## 🧱 组件化开发基础 Vue 以组件为中心： * **组件**：独立、可复用的功能单元 * **组合**：多个组件组合形成完整应用组件本质是一棵 **组件树**，每个界面都是组件组合的结果。 Vue 的组件文件叫做 **SFC（Single File Component）** ，结构如下： ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/d113893afb9e423dac8a459c96645cd7~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgTG92ZV9vdm8=:q75.awebp?rk3s=f64ab15b&x-expires=1763636338&x-signature=RMWOLwH%2Ba3C%2FDVTw5kp%2Bz7TrSdQ%3D) ```js ``` *** ## Vue工程 ### 创建&运行 npm create vite # 按照提示选择Vue npm run dev #项目运行命令 ### 运行原理 ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/30652942e9d34a04a1b4e6d9b3ec0590~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgTG92ZV9vdm8=:q75.awebp?rk3s=f64ab15b&x-expires=1763636338&x-signature=vgCqP8QmdvD6M8zUXbfgoeZ2t6k%3D) ## 🧪 Vue 基础功能实战 ### 🔁 数据插值（双大括号） ```js ``` ### 📜 指令 v-text / v-html ```js ``` ### 🎯 事件绑定 @click ```js ``` 🔗 修饰符参考：[事件修饰符文档](https://cn.vuejs.org/guide/essentials/event-handling.html) ### 🔍 条件判断 v-if ```js ``` ### 🔁 列表渲染 v-for ```js ``` ### 🔗 属性绑定 :href ```js ``` 更多指令见：[Vue 官方指令文档](https://cn.vuejs.org/api/built-in-directives.html) *** ## ⚡ 响应式数据管理 ### ❌ 非响应式变量的问题 ```js ``` 点击按钮后变量变了，页面却没变？因为这不是响应式变量！ ### ✅ 使用 ref 创建响应式变量 ```js ``` 📌 注意：`ref` 中的值在 JS 中访问需要 `.value`，html中直接写变量名。 ### 🧩 深层响应式：ref vs reactive ```js import { reactive } from 'vue' const car = reactive({ brand: '小米', price: 999 }) car.price += 1000 // 直接修改即可 ``` | 类型 | 用法 | | ----- | --------------- | | 基本类型 | 使用 `ref()` | | 对象/数组 | 使用 `reactive()` | > 总结：想偷懒也可以全用 `ref`，多写 `.value` 就完事。 *** ## 📝 表单绑定 v-model ```js ``` 绑定方式如下： * 文本框：`v-model="data.username"` * 复选框：`v-model="data.agree"` * 多选框：`v-model="data.hobby"` * 单选框：`v-model="data.sex"` * 下拉单选：`v-model="data.edu"` * 多选下拉：`v-model="data.course"` > 使用 `v-model` 的输入控件值会自动同步到数据对象中。 *** ## 🔢 计算属性 computed ```js ``` *** ## 🎯 响应式监听 watch / watchEffect ### 🔍 精准监听（watch） ```js import { watch, ref } from 'vue' const num = ref(1) watch(num, (newVal, oldVal, onCleanup) => { console.log("新值：", newVal, "旧值：", oldVal) if (newVal > 3) num.value = 3 onCleanup(() => console.log("watch 清理了")) }) ``` ### 👀 自动依赖收集（watchEffect） ```js import { watchEffect } from 'vue' watchEffect(() => { console.log("响应式数据变了就触发") }) ``` ## 🌀 生命周期钩子（Composition API）在 Vue3 中，每个组件实例在创建时会经历一系列初始化步骤，如： * 设置响应式数据 * 编译模板 * 将组件挂载到 DOM * 监听数据变化并响应更新 Vue 在这些阶段会调用 **生命周期钩子函数**，让我们可以在合适的时机插入自定义逻辑。 ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/cc2ec86917ad45bc976e1f02fd0ca233~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgTG92ZV9vdm8=:q75.awebp?rk3s=f64ab15b&x-expires=1763636338&x-signature=G%2FvTDDTOC2Zxxz8nl34aIeL6hQw%3D) ### 🔄 生命周期四大阶段 | 阶段 | 常用钩子函数 | | -- | --------------------------------- | | 创建 | `onBeforeMount` → `onMounted` | | 更新 | `onBeforeUpdate` → `onUpdated` | | 卸载 | `onBeforeUnmount` → `onUnmounted` | | 销毁 | — | ### ✅ 实战示例 ```js ``` *** ## 📦 组件传值通信 ### 🔁 父传子（Props）父组件通过绑定属性传递数据，子组件使用 `defineProps` 接收。 * 数据是**单向流动**的：父 → 子 * 子组件修改 props 并不会影响父组件的值 #### ✅ 父组件传值 ```js ``` #### ✅ 子组件接收 ```js const props = defineProps({ money: { //这里面是money的特殊定义，类型、是否为必须、当空时为200 type: Number, required: true, default: 200 }, books: Array }); ``` *** ### 📤 子传父（Emit）子组件通过 `emit` 触发事件，父组件监听事件来接收数据或触发行为。 #### ✅ 子组件定义并触发事件 ```js ``` #### ✅ 父组件监听子组件事件 ```js ``` *** ## 🪝 provide / inject 实现跨层通信在祖先组件中使用 `provide` 提供变量或方法，在子孙组件中通过 `inject` 使用。 ### ✅ 父组件 provide 示例 ```js import { provide, ref, nextTick } from 'vue'; const hello = ref(); const reload = async () => { isRouterAlive.value = false; await nextTick(); isRouterAlive.value = true; }; provide("reload", reload); provide("hello", hello); ``` ### ✅ 子组件 inject 示例 ```js import { inject } from 'vue'; const reload = inject("reload"); const hello = inject("hello"); ``` > 🚨注意：方法需要用 **箭头函数** 形式定义，否则注入后 `this` 会丢失。 *** ## 🧩 插槽（Slot）父组件可以通过插槽向子组件注入内容，实现更灵活的组件布局。 ### ✅ 子组件使用插槽 ```js ``` ### ✅ 父组件传入插槽内容 ```js ``` *** ## 🧠 小结 | 功能点 | API/关键词 | 特性说明 | | ------ | ---------------- | -------------- | | 生命周期钩子 | `onMounted` 等 | 提供组件各阶段插入钩子逻辑 | | 父传子 | `defineProps` | 单向数据流，父到子 | | 子传父 | `defineEmits` | 子触发事件，父来处理 | | 跨层通信 | `provide/inject` | 跨层级传值传方法 | | 插槽 | `slot/v-slot/#` | 插入结构内容，增强组件复用性 | *** 🛠️ **持续练习 + 阅读官方文档，是精通 Vue 的最佳方式！** 📚 官方地址： ***

Son

Father

Son

按钮插槽

按钮文字插槽

Father