【Vue入门】组件及组件化

🚀 欢迎来到我的CSDN博客：Optimistic _ chen

✨ 一名热爱技术与分享的全栈开发者，在这里记录成长，专注分享编程技术与实战经验，助力你的技术成长之路，与你共同进步！

---

🚀我的专栏推荐：

专栏	内容特色	适合人群
🔥C语言从入门到精通	系统讲解基础语法、指针、内存管理、项目实战	零基础新手、考研党、复习
🔥Java基础语法	系统解释了基础语法、类与对象、继承	Java初学者
🔥Java核心技术	面向对象、集合框架、多线程、网络编程、新特性解析	有一定语法基础的开发者
🔥Java EE 进阶实战	Servlet、JSP、SpringBoot、MyBatis、项目案例拆解	想快速入门Java Web开发的同学
🔥Java数据结构与算法	图解数据结构、LeetCode刷题解析、大厂面试算法题	面试备战、算法爱好者、计算机专业学生
🔥Redis系列	从数据类型到核心特性解析	项目必备

---

🚀我的承诺：

✅ 文章配套代码：每篇技术文章都提供完整的可运行代码示例

✅ 持续更新：专栏内容定期更新，紧跟技术趋势

✅ 答疑交流：欢迎在文章评论区留言讨论，我会及时回复（支持互粉）

---

🚀 关注我，解锁更多技术干货！
⏳ 每天进步一点点，未来惊艳所有人！✍️ 持续更新中，记得⭐收藏关注⭐不迷路 ✨

📌 标签:#技术博客  #编程学习  #Java  #C语言  #算法  #程序员

文章目录

• 什么是组件？
• • 组件化
• 组件的使用（重点）
• • App.vue根组件
• 组件的生命周期
• • 钩子函数（选项式API）
  • 准备工作
  • 第一阶段：创建阶段
  • 第二阶段：挂载阶段
  • 第三阶段：更新阶段
  • 第四阶段：卸载阶段
  • 选项式API和组合式API
  • • 钩子函数（组合式API）
• 完结撒花！🎉

什么是组件？

组件是一个独立的、可复用的Vue实例，也是一段独立的UI视图 ，代码写在一个独立的.vue文件包含JS + HTML + CSS三部分组成。类似于玩的拼图，一个vue文件就是拼图的一小块碎片；

组件化

组件化是一种开发思想，一个页面可以理解为是为一个个"零件"拼到一起的，每个组件都有自己独立的结构、样式、行为。通过组件的组合与拼装最后形成一个完整的页面。类似要完成整个拼图，意味着我们需要把所有碎片组合到一起。

这种思想的核心在于分解思维，通过化繁为简、化整为零来实现。其优势在于各个部分相对独立(不用担心变量名重复)，便于重复使用（提高某段标签的复用性）。

比如B站的导航栏：大体可以拆分为三个组件来"拼装"

组件的使用（重点）

组件（vue文件）由三部分组成：

• template：HTML结构
• script：JavaScript逻辑
• style：CSS样式（可支持scss，但是记得装包哦~）

组件使用的四大步骤：

1. 创建组件（.vue文件）

//行为
<script setup>
</script>

//结构
<template>
  <div>
  </div>
</template>

//样式
<style>
</style>

2. 导入要使用的组件（包）

import 组件对象 from '相对路径'
// eg
import MyPanel from './components/MyPanel.vue'

3. 注册（全局注册）
   在main.js文件中全局注册：一次注册，全局使用

// 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')

局部组件需要在每个使用的组件里面注册，只能在注册它的组件内使用；优势在于只有使用时才占用内存（一般不缺那点内存~）

4. 使用组件
   把组件当作自定义标签使用（类似调用接口~）

//双标签
<组件名></组件名>
//单标签
<组件名 />

//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点自动响（自动调用）

官方生命周期图示：

准备工作

<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')
    },
    //进入第一阶段

第一阶段：创建阶段

//创建前:此时还没有创建，无法访问data数据，也无法调用方法
  beforeCreate() {
    console.log('数据是：', this.message) // undefined
  },
//创建后：此时可以访问数据，也可以调用方法
  created() {
    console.log('数据是：', this.message) // '你好，Vue'
  },

//进入第二阶段

第二阶段：挂载阶段

//挂载前：此时写在 template 下的标签还没有变成真实DOM，故⽽⽆法获取DOM 
 beforeMount() {
    console.log('beforeMount：没有显示到页面')
  },
// 挂载后：此时写在 template 下的标签已经变成了真实DOM，故⽽可以获取DOM(是最早可以操作DOM的时机)
  mounted() {
    console.log('mounted：已经显示到页面了')
    // 最常用的钩子，适合发请求
  },
//进入第三阶段

第三阶段：更新阶段

//更新前：页面显示旧数据
 beforeUpdate() {
    console.log('5. beforeUpdate：数据变了，还没有更新页面')
  },
//更新后：显示新数据
  updated() {
    console.log('6. updated：页面更新完了')
  },

//进入第四阶段

第四阶段：卸载阶段

// 卸载前：组件移除阶段
 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(清理工作)

<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

📌 收藏本文，下次需要时不迷路！

我们下期再见！💫 持续更新中......

---

悄悄说：点击主页有更多精彩内容哦～ 😊