🚀 欢迎来到我的CSDN博客：Optimistic _ chen
✨ 一名热爱技术与分享的全栈开发者，在这里记录成长，专注分享编程技术与实战经验，助力你的技术成长之路，与你共同进步！
🚀我的专栏推荐：
| 专栏 | 内容特色 | 适合人群 |
|---|---|---|
| 🔥C语言从入门到精通 | 系统讲解基础语法、指针、内存管理、项目实战 | 零基础新手、考研党、复习 |
| 🔥Java基础语法 | 系统解释了基础语法、类与对象、继承 | Java初学者 |
| 🔥Java核心技术 | 面向对象、集合框架、多线程、网络编程、新特性解析 | 有一定语法基础的开发者 |
| 🔥Java EE 进阶实战 | Servlet、JSP、SpringBoot、MyBatis、项目案例拆解 | 想快速入门Java Web开发的同学 |
| 🔥Java数据结构与算法 | 图解数据结构、LeetCode刷题解析、大厂面试算法题 | 面试备战、算法爱好者、计算机专业学生 |
| 🔥Redis系列 | 从数据类型到核心特性解析 | 项目必备 |
🚀我的承诺：
✅ 文章配套代码：每篇技术文章都提供完整的可运行代码示例
✅ 持续更新：专栏内容定期更新，紧跟技术趋势
✅ 答疑交流：欢迎在文章评论区留言讨论，我会及时回复（支持互粉）
🚀 关注我，解锁更多技术干货！
⏳ 每天进步一点点，未来惊艳所有人！✍️ 持续更新中，记得⭐收藏关注⭐不迷路 ✨
📌 标签:#技术博客 #编程学习 #Java #C语言 #算法 #程序员
文章目录
什么是组件？
组件是一个独立的、可复用的Vue实例，也是一段独立的UI视图 ，代码写在一个独立的.vue文件包含JS + HTML + CSS三部分组成。类似于玩的拼图，一个vue文件就是拼图的一小块碎片；
组件化
组件化是一种开发思想，一个页面可以理解为是为一个个"零件"拼到一起的，每个组件都有自己独立的结构、样式、行为。通过组件的组合与拼装最后形成一个完整的页面。类似要完成整个拼图，意味着我们需要把所有碎片组合到一起。
这种思想的核心在于分解思维，通过化繁为简、化整为零来实现。其优势在于各个部分相对独立(不用担心变量名重复)，便于重复使用（提高某段标签的复用性）。
比如B站的导航栏：大体可以拆分为三个组件来"拼装"
组件的使用（重点）
组件（vue文件）由三部分组成：
- template：HTML结构
- script：JavaScript逻辑
- style：CSS样式（可支持scss，但是记得装包哦~）
组件使用的四大步骤：
- 创建组件（.vue文件）
javascript
//行为
<script setup>
</script>
//结构
<template>
<div>
</div>
</template>
//样式
<style>
</style>- 导入要使用的组件（包）
javascript
import 组件对象 from '相对路径'
// eg
import MyPanel from './components/MyPanel.vue'- 注册（全局注册）
在main.js文件中全局注册：一次注册，全局使用
javascript
// main.js - 只需写一次
import { createApp } from 'vue'
import App from './App.vue'
import MyButton from './components/MyButton.vue'
import MyInput from './components/MyInput.vue'
const app = createApp(App)
// 全局注册
app.component('MyButton', MyButton)
app.component('MyInput', MyInput)
app.mount('#app')局部组件需要在每个使用的组件里面注册，只能在注册它的组件内使用；优势在于只有使用时才占用内存（一般不缺那点内存~）
- 使用组件
把组件当作自定义标签使用（类似调用接口~）
javascript
//双标签
<组件名></组件名>
//单标签
<组件名 />
//eg
<!-- 大驼峰 双标签 --->
<MyPanel></MyPanel>
<!-- 大驼峰 自闭和单标签 --->
<MyPanel />
<!-- 烤串法 双标签 --->
<my-panel></my-panel>
<!-- 烤串法 自闭和单标签 --->
<my-panel />最终，自定义标签会被自身的template下的原生标签全部替换掉。
可能有点难理解： 只是一个占位符，Vue找到这个组件的定义，用组件template 里的真实HTML替换掉这个占位符，最终页面上显示的只有真实的原生标签。
这就是为什么叫组件化 --- --- 定义一次模板，可以重复使用，每次使用都会被替换成真实的HTML。
App.vue根组件
我们把App.vue做为根组件，也就是顶层组件，是组件数的起点入口。main.js是程序开始的入口（类似于main）
组件的生命周期
组件的生命周期 = 组件从出生到死亡的过程，可以分为四个核心阶段：
| 阶段 | 触发时机 |
|---|---|
| 创建 | 组件被创建时 |
| 挂载 | 组件渲染到页面上时 |
| 更新 | 数据变化导致页面更新 |
| 卸载 | 组件从页面上移除时 |
钩子函数（选项式API）
每个Vue组件实例在创建时都需要经历⼀系列的初始化步骤，在初始化过程中会自动运行的一些函数，称为Vue生命周期钩子：到某个时间点自动调用的函数。
就像闹钟，你设定早上7点响铃（定义函数），时间到了7点自动响（自动调用）
官方生命周期图示：
准备工作
javascript
<template>
<div>
<h2>{{ message }}</h2>
<button @click="message = '数据变了'">改变数据</button>
<button @click="show = false">销毁组件</button>
</div>
</template>
<script>
export default {
// 提供响应式数据
data() {
return {
count: 0
}
},
// 提供⽅法/函数
methods: {
fn() {
console.log('fn 函数执⾏了')
}
},
setup() {
console.log('0-setup')
},
//进入第一阶段第一阶段：创建阶段
javascript
//创建前:此时还没有创建，无法访问data数据，也无法调用方法
beforeCreate() {
console.log('数据是：', this.message) // undefined
},
//创建后：此时可以访问数据，也可以调用方法
created() {
console.log('数据是：', this.message) // '你好，Vue'
},
//进入第二阶段第二阶段：挂载阶段
javascript
//挂载前：此时写在 template 下的标签还没有变成真实DOM，故⽽⽆法获取DOM
beforeMount() {
console.log('beforeMount：没有显示到页面')
},
// 挂载后：此时写在 template 下的标签已经变成了真实DOM，故⽽可以获取DOM(是最早可以操作DOM的时机)
mounted() {
console.log('mounted：已经显示到页面了')
// 最常用的钩子，适合发请求
},
//进入第三阶段第三阶段：更新阶段
javascript
//更新前：页面显示旧数据
beforeUpdate() {
console.log('5. beforeUpdate：数据变了，还没有更新页面')
},
//更新后：显示新数据
updated() {
console.log('6. updated：页面更新完了')
},
//进入第四阶段第四阶段：卸载阶段
javascript
// 卸载前：组件移除阶段
beforeUnmount() {
console.log('7. beforeUnmount：组件马上要销毁了')
// 清理定时器、取消订阅
},
//卸载后：没有组件了
unmounted() {
console.log('8. unmounted：组件已经销毁了')
}
}
</script>选项式API和组合式API
两者都是 Vue 组件的两种不同书写方式，也是从 Vue 2 过渡到 Vue 3的必会知识。
| 角度 | 选项式API | 组合式API |
|---|---|---|
| 逻辑方式 | 数据、方法、函数等各自逻辑分离 | 将一个功能相关的数据、方法、生命周期钩子写在一起 |
| 代码风格 | 声明式：通过this访问组件实例 | 函数式：基于setup语法，使用ref等响应式API |
| 逻辑复用 | 依赖 mixins，但是容易导致命名冲突等问题 |
使用组合式函数，将逻辑抽离为独立的函数，逻辑清晰 |
| 适用场景 | 逻辑不复杂，结构简单 | 大型、复杂的组件或可复用的逻辑单元 |
钩子函数（组合式API）
| 创建阶段 | 挂载阶段 | 更新阶段 | 销毁阶段 | |
|---|---|---|---|---|
| Vue2(选项式) | beforeCreate created | beforeMount mounted | beforeUpdate updated | beforeUnmount unmounted |
| Vue3(组合式) | setup(网络请求) | onBeforeMount Onmounted(操作DOM) | onBeforeUpdate Onupdated | onBeforeUnmount onUnmounted(清理工作) |
javascript
<template>
<div>
<h2>{{ message }}</h2>
<button @click="message = '数据变了'">改变数据</button>
<button @click="show = false">销毁组件</button>
</div>
</template>
<script setup>
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'
// 1. 数据
const message = ref('你好，Vue')
const show = ref(true)
// 注意：组合式API中没有beforeCreate和created
// script setup执行时就相当于created阶段
console.log('0. setup执行：数据已经有了', message.value)
// 2. 挂载阶段
onBeforeMount(() => {
console.log('1. onBeforeMount：马上要显示到页面了')
})
onMounted(() => {
console.log('2. onMounted：已经显示到页面了')
// 最常用的钩子，适合发请求
})
// 3. 更新阶段
onBeforeUpdate(() => {
console.log('3. onBeforeUpdate：数据变了，马上更新页面')
})
onUpdated(() => {
console.log('4. onUpdated：页面更新完了')
})
// 4. 卸载阶段
onBeforeUnmount(() => {
console.log('5. onBeforeUnmount：组件马上要销毁了')
// 清理定时器、取消订阅
})
onUnmounted(() => {
console.log('6. onUnmounted：组件已经销毁了')
})
</script>完结撒花！🎉
如果这篇博客对你有帮助，不妨点个赞支持一下吧！👍
你的鼓励是我创作的最大动力～
✨ 想获取更多干货？ 欢迎关注我的专栏 → optimistic_chen
📌 收藏本文，下次需要时不迷路！
我们下期再见！💫 持续更新中......
悄悄说：点击主页有更多精彩内容哦～ 😊
