Vue中级冒险：3-4周成为组件沟通大师-育师

欢迎使用我的小程序👇👇👇👇 俱好用助手功能介绍

欢迎回到你的Vue学习之旅！如果你已经跨过了基础门槛，那么接下来的3-4周将带你进入一个全新的世界——在这里，组件不再孤立，数据流动如交响乐般和谐，代码组织变得优雅而强大。

📅 第一周：与“时间魔法师”——生命周期成为好友

想象一下，每个Vue组件都像一个小生命，有自己的出生、成长和告别时刻。生命周期钩子就是这些关键时刻的提醒铃铛🔔。

// 以前你可能只认识created和mounted// 现在来认识整个生命周期家族吧！exportdefault{beforeCreate(){console.log('我即将诞生！')},created(){console.log('我出生了！可以访问数据啦')},beforeMount(){console.log('准备挂载到DOM树上...')},mounted(){console.log('成功安家！现在可以操作DOM了')},beforeUpdate(){console.log('数据变了，我要准备更新啦')},updated(){console.log('更新完成！界面焕然一新')},beforeUnmount(){console.log('我即将离开这个世界...')},unmounted(){console.log('再见！清理工作完成')}}

本周小挑战：写一个组件，在它生命的每个阶段都在控制台留下足迹👣，观察数据变化和DOM更新时的触发顺序。

📅 第二周：掌握组件间的“悄悄话”艺术

组件不会读心术，但它们有6种方式可以交流！让我们把它们想象成住在不同房间的室友：

1. Props：妈妈喊你吃饭式（父→子）

// 爸爸组件大喊：<ChildComponent:dinner="'红烧肉'"/>// 孩子组件乖乖接收：props:['dinner']

2. $emit：孩子有事报告式（子→父）

// 孩子在房间里喊：this.$emit('hungry','想吃零食')// 爸爸在外面监听：<ChildComponent @hungry="handleHungry"/>

3. Refs：直接敲门式

// 获取组件实例，直接调用方法<ChildComponent ref="child"/>this.$refs.child.doSomething()

4. Event Bus：小区广播式（任意组件间）

// 创建一个中央事件总线// 组件A：广播消息eventBus.emit('news','今天小区停水')// 组件B：收听广播eventBus.on('news',(msg)=>{console.log(msg)// 今天小区停水})

5. Provide/Inject：家族秘密传承式（跨层级）

// 爷爷辈组件：provide(){return{familySecret:'传家宝的位置'}}// 孙子辈组件（跳过爸爸直接获取）：inject:['familySecret']

6. Vuex/Pinia：社区公告栏式（全局状态）

// 任何组件都可以：store.commit('setMessage','社区通知：明天停电')// 任何组件也都能看到：store.state.message

本周实践：创建一个“家庭聊天室”应用，使用至少4种通信方式让祖孙三代的组件互相传递消息！

📅 第三、四周：解锁组合式API的“积木魔法”

还记得小时候搭积木的乐趣吗？组合式API让你重新体验这种快乐！

选项式API vs 组合式API

// 以前（选项式） - 像整理抽屉exportdefault{data(){return{count:0}},methods:{increment(){this.count++}},computed:{doubleCount(){returnthis.count*2}}}// 现在（组合式） - 像搭积木import{ref,computed}from'vue'exportdefault{setup(){// 逻辑1：计数器constcount=ref(0)constincrement=()=>{count.value++}constdoubleCount=computed(()=>count.value*2)// 逻辑2：用户信息constuser=ref(null)constfetchUser=async()=>{/* ... */}// 像搭积木一样组合功能return{count,increment,doubleCount,user,fetchUser}}}

超能力：自定义组合函数

// 创建一个可复用的“鼠标跟踪器”积木import{ref,onMounted,onUnmounted}from'vue'exportfunctionuseMouse(){constx=ref(0)consty=ref(0)constupdate=(event)=>{x.value=event.pageX y.value=event.pageY}onMounted(()=>window.addEventListener('mousemove',update))onUnmounted(()=>window.removeEventListener('mousemove',update))return{x,y}}// 在任何组件中轻松使用：const{x,y}=useMouse()// 看！鼠标坐标自动跟踪！

响应式进阶：reactive vs ref

// ref - 给单个值加响应式外衣constcount=ref(0)// 访问时：count.value// reactive - 给对象加响应式外衣conststate=reactive({name:'Vue',version:3})// 访问时：state.name// 小贴士：简单值用ref，复杂对象用reactive