1. 環境搭建

1.1. 創建項目

npm install -g @vue/clivue create vue_study_todolist

1.2. 清空項目代碼

清楚HelloWorld.Vue代碼中的內容。

1.3. 啟動空項目

在這里插入圖片描述

1.4 項目目標

項目組件實現以下效果

在這里插入圖片描述

2. 組件拆分代碼

Vue是一個基于組件的框架，允許您將界面拆分成小的、可重用的組件。每個組件都可以包含自己的模板、樣式和邏輯，從而提高了代碼的可維護性和重用性。

組件通常通過props和events來進行通信。Props允許父組件向子組件傳遞數據，而子組件則通過events將數據的變化通知給父組件。這種單向數據流的模式使得應用程序的數據流更加可控和預測。

在Vue中，您可以在組件之間傳遞函數，以實現更高級的交互和數據處理。這可以通過props來實現。您可以將一個函數作為prop傳遞給子組件，然后子組件可以調用這個函數來觸發特定的操作。

例如，假設您有一個父組件和一個子組件，父組件傳遞了一個函數給子組件作為prop。子組件可以在某個事件發生時調用這個函數，從而通知父組件進行某些處理。

2.1. 組件拆分第一版

2.1.1. App.vue代碼


<template><div id="root"><div class="todo-container"><div class="todo-wrap"><MyHeader :addTodo="addTodo"/><MyList :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo"/><MyFooter :todos="todos" :checkAllTodo="checkAllTodo" :clearAllTodo="clearAllTodo"/></div></div></div>
</template><script>import MyHeader from './components/MyHeader'import MyList from './components/MyList'import MyFooter from './components/MyFooter.vue'export default {name:'App',components:{MyHeader,MyList,MyFooter},data() {return {//由于todos是MyHeader組件和MyFooter組件都在使用，所以放在App中（狀態提升）todos:[{id:'001',title:'抽煙',done:true},{id:'002',title:'喝酒',done:false},{id:'003',title:'開車',done:true}]}},methods: {//添加一個todoaddTodo(todoObj){this.todos.unshift(todoObj)},//勾選or取消勾選一個todocheckTodo(id){this.todos.forEach((todo)=>{if(todo.id === id) todo.done = !todo.done})},//刪除一個tododeleteTodo(id){this.todos = this.todos.filter( todo => todo.id !== id )},//全選or取消全選checkAllTodo(done){this.todos.forEach((todo)=>{todo.done = done})},//清除所有已經完成的todoclearAllTodo(){this.todos = this.todos.filter((todo)=>{return !todo.done})}}}
</script><style>/*base*/body {background: #fff;}.btn {display: inline-block;padding: 4px 12px;margin-bottom: 0;font-size: 14px;line-height: 20px;text-align: center;vertical-align: middle;cursor: pointer;box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);border-radius: 4px;}.btn-danger {color: #fff;background-color: #da4f49;border: 1px solid #bd362f;}.btn-danger:hover {color: #fff;background-color: #bd362f;}.btn:focus {outline: none;}.todo-container {width: 600px;margin: 0 auto;}.todo-container .todo-wrap {padding: 10px;border: 1px solid #ddd;border-radius: 5px;}
</style>

2.1.2. 各個子組件代碼

2.1.2.1. MyHeader.vue 代碼

<template><div class="todo-header"><input type="text" placeholder="請輸入你的任務名稱，按回車鍵確認" v-model="title" @keyup.enter="add"/></div>
</template><script>import {nanoid} from 'nanoid'export default {name:'MyHeader',//接收從App傳遞過來的addTodoprops:['addTodo'],data() {return {//收集用戶輸入的titletitle:''}},methods: {add(){//校驗數據if(!this.title.trim()) return alert('輸入不能為空')//將用戶的輸入包裝成一個todo對象const todoObj = {id:nanoid(),title:this.title,done:false}//通知App組件去添加一個todo對象this.addTodo(todoObj)//清空輸入this.title = ''}},}
</script><style scoped>/*header*/.todo-header input {width: 560px;height: 28px;font-size: 14px;border: 1px solid #ccc;border-radius: 4px;padding: 4px 7px;}.todo-header input:focus {outline: none;border-color: rgba(82, 168, 236, 0.8);box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);}
</style>

2.1.2.2. MyList.vue 代碼

<template><ul class="todo-main"><MyItemv-for="todoObj in todos":key="todoObj.id":todo="todoObj":checkTodo="checkTodo":deleteTodo="deleteTodo"/></ul>
</template><script>import MyItem from './MyItem'export default {name:'MyList',components:{MyItem},//聲明接收App傳遞過來的數據，其中todos是自己用的，checkTodo和deleteTodo是給子組件MyItem用的props:['todos','checkTodo','deleteTodo']}
</script><style scoped>/*main*/.todo-main {margin-left: 0px;border: 1px solid #ddd;border-radius: 2px;padding: 0px;}.todo-empty {height: 40px;line-height: 40px;border: 1px solid #ddd;border-radius: 2px;padding-left: 5px;margin-top: 10px;}
</style>

2.1.2.3. MyItem.vue 代碼

<template><li><label><input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"/><!-- 如下代碼也能實現功能，但是不太推薦，因為有點違反原則，因為修改了props --><!-- <input type="checkbox" v-model="todo.done"/> --><span>{{todo.title}}</span></label><button class="btn btn-danger" @click="handleDelete(todo.id)">刪除</button></li>
</template><script>export default {name:'MyItem',//聲明接收todo、checkTodo、deleteTodoprops:['todo','checkTodo','deleteTodo'],methods: {//勾選or取消勾選handleCheck(id){//通知App組件將對應的todo對象的done值取反this.checkTodo(id)},//刪除handleDelete(id){if(confirm('確定刪除嗎？')){//通知App組件將對應的todo對象刪除this.deleteTodo(id)}}},}
</script><style scoped>/*item*/li {list-style: none;height: 36px;line-height: 36px;padding: 0 5px;border-bottom: 1px solid #ddd;}li label {float: left;cursor: pointer;}li label li input {vertical-align: middle;margin-right: 6px;position: relative;top: -1px;}li button {float: right;display: none;margin-top: 3px;}li:before {content: initial;}li:last-child {border-bottom: none;}li:hover{background-color: #ddd;}li:hover button{display: block;}
</style>

2.1.2.4. MyFooter.vue 代碼

<template><div class="todo-footer" v-show="total"><label><!-- <input type="checkbox" :checked="isAll" @change="checkAll"/> --><input type="checkbox" v-model="isAll"/></label><span><span>已完成{{doneTotal}}</span> / 全部{{total}}</span><button class="btn btn-danger" @click="clearAll">清除已完成任務</button></div>
</template><script>export default {name:'MyFooter',props:['todos','checkAllTodo','clearAllTodo'],computed: {//總數total(){return this.todos.length},//已完成數doneTotal(){//此處使用reduce方法做條件統計/* const x = this.todos.reduce((pre,current)=>{console.log('@',pre,current)return pre + (current.done ? 1 : 0)},0) *///簡寫return this.todos.reduce((pre,todo)=> pre + (todo.done ? 1 : 0) ,0)},//控制全選框isAll:{//全選框是否勾選get(){return this.doneTotal === this.total && this.total > 0},//isAll被修改時set被調用set(value){this.checkAllTodo(value)}}},methods: {/* checkAll(e){this.checkAllTodo(e.target.checked)} *///清空所有已完成clearAll(){this.clearAllTodo()}},}
</script><style scoped>/*footer*/.todo-footer {height: 40px;line-height: 40px;padding-left: 6px;margin-top: 5px;}.todo-footer label {display: inline-block;margin-right: 20px;cursor: pointer;}.todo-footer label input {position: relative;top: -1px;vertical-align: middle;margin-right: 5px;}.todo-footer button {float: right;margin-top: 5px;}
</style>

2.1.3. 代碼層次和流程流轉示意圖

2.1.3.1. 控件層次示意圖

在這里插入圖片描述

2.1.3.2. 控件初始化數據與事件綁定示意圖

在這里插入圖片描述

2.2. 事件總線版本

事件總線是一種模式，用于在Vue應用程序中實現組件之間的通信，即使這些組件沒有直接的父子關系。您可以創建一個Vue實例，作為事件總線，用于觸發和監聽事件。

通過事件總線，您可以在任何組件中觸發和監聽事件，實現了組件之間的解耦和通信。請注意，事件總線在大型應用中可能會導致事件管理變得復雜，所以需要慎重使用。

2.2.1. main.js 代碼

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'//關閉Vue的生產提示
Vue.config.productionTip = false//創建vm
new Vue({el:'#app',render: h => h(App),beforeCreate() {Vue.prototype.$bus = this},
})

2.2.2. App.vue 代碼

<template><div id="root"><div class="todo-container"><div class="todo-wrap"><MyHeader @addTodo="addTodo"/><MyList :todos="todos"/><MyFooter :todos="todos" @checkAllTodo="checkAllTodo" @clearAllTodo="clearAllTodo"/></div></div></div>
</template><script>import MyHeader from './components/MyHeader'import MyList from './components/MyList'import MyFooter from './components/MyFooter.vue'export default {name:'App',components:{MyHeader,MyList,MyFooter},data() {return {//由于todos是MyHeader組件和MyFooter組件都在使用，所以放在App中（狀態提升）todos:JSON.parse(localStorage.getItem('todos')) || []}},methods: {//添加一個todoaddTodo(todoObj){this.todos.unshift(todoObj)},//勾選or取消勾選一個todocheckTodo(id){this.todos.forEach((todo)=>{if(todo.id === id) todo.done = !todo.done})},//刪除一個tododeleteTodo(id){this.todos = this.todos.filter( todo => todo.id !== id )},//全選or取消全選checkAllTodo(done){this.todos.forEach((todo)=>{todo.done = done})},//清除所有已經完成的todoclearAllTodo(){this.todos = this.todos.filter((todo)=>{return !todo.done})}},watch: {todos:{deep:true,handler(value){localStorage.setItem('todos',JSON.stringify(value))}}},mounted() {this.$bus.$on('checkTodo',this.checkTodo)this.$bus.$on('deleteTodo',this.deleteTodo)},beforeDestroy() {this.$bus.$off('checkTodo')this.$bus.$off('deleteTodo')},}
</script><style>/*base*/body {background: #fff;}.btn {display: inline-block;padding: 4px 12px;margin-bottom: 0;font-size: 14px;line-height: 20px;text-align: center;vertical-align: middle;cursor: pointer;box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);border-radius: 4px;}.btn-danger {color: #fff;background-color: #da4f49;border: 1px solid #bd362f;}.btn-danger:hover {color: #fff;background-color: #bd362f;}.btn:focus {outline: none;}.todo-container {width: 600px;margin: 0 auto;}.todo-container .todo-wrap {padding: 10px;border: 1px solid #ddd;border-radius: 5px;}
</style>

2.2.3. 各個子組件代碼

2.2.3.1. MyHeader.vue 代碼

<template><div class="todo-header"><input type="text" placeholder="請輸入你的任務名稱，按回車鍵確認" v-model="title" @keyup.enter="add"/></div>
</template><script>import {nanoid} from 'nanoid'export default {name:'MyHeader',data() {return {//收集用戶輸入的titletitle:''}},methods: {add(){//校驗數據if(!this.title.trim()) return alert('輸入不能為空')//將用戶的輸入包裝成一個todo對象const todoObj = {id:nanoid(),title:this.title,done:false}//通知App組件去添加一個todo對象this.$emit('addTodo',todoObj,1,2,3)//清空輸入this.title = ''}},}
</script><style scoped>/*header*/.todo-header input {width: 560px;height: 28px;font-size: 14px;border: 1px solid #ccc;border-radius: 4px;padding: 4px 7px;}.todo-header input:focus {outline: none;border-color: rgba(82, 168, 236, 0.8);box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);}
</style>

2.2.3.2. MyList代碼

<template><ul class="todo-main"><MyItemv-for="todoObj in todos":key="todoObj.id":todo="todoObj"/></ul>
</template><script>import MyItem from './MyItem'export default {name:'MyList',components:{MyItem},//聲明接收App傳遞過來的數據props:['todos']}
</script><style scoped>/*main*/.todo-main {margin-left: 0px;border: 1px solid #ddd;border-radius: 2px;padding: 0px;}.todo-empty {height: 40px;line-height: 40px;border: 1px solid #ddd;border-radius: 2px;padding-left: 5px;margin-top: 10px;}
</style>

2.2.3.3. MyItem.vue 代碼

<template><li><label><input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"/><!-- 如下代碼也能實現功能，但是不太推薦，因為有點違反原則，因為修改了props --><!-- <input type="checkbox" v-model="todo.done"/> --><span>{{todo.title}}</span></label><button class="btn btn-danger" @click="handleDelete(todo.id)">刪除</button></li>
</template><script>export default {name:'MyItem',//聲明接收todoprops:['todo'],methods: {//勾選or取消勾選handleCheck(id){//通知App組件將對應的todo對象的done值取反// this.checkTodo(id)this.$bus.$emit('checkTodo',id)},//刪除handleDelete(id){if(confirm('確定刪除嗎？')){//通知App組件將對應的todo對象刪除// this.deleteTodo(id)this.$bus.$emit('deleteTodo',id)}}},}
</script><style scoped>/*item*/li {list-style: none;height: 36px;line-height: 36px;padding: 0 5px;border-bottom: 1px solid #ddd;}li label {float: left;cursor: pointer;}li label li input {vertical-align: middle;margin-right: 6px;position: relative;top: -1px;}li button {float: right;display: none;margin-top: 3px;}li:before {content: initial;}li:last-child {border-bottom: none;}li:hover{background-color: #ddd;}li:hover button{display: block;}
</style>

2.2.3.4. MyFooter.vue 代碼

<template><div class="todo-footer" v-show="total"><label><!-- <input type="checkbox" :checked="isAll" @change="checkAll"/> --><input type="checkbox" v-model="isAll"/></label><span><span>已完成{{doneTotal}}</span> / 全部{{total}}</span><button class="btn btn-danger" @click="clearAll">清除已完成任務</button></div>
</template><script>export default {name:'MyFooter',props:['todos'],computed: {//總數total(){return this.todos.length},//已完成數doneTotal(){//此處使用reduce方法做條件統計/* const x = this.todos.reduce((pre,current)=>{console.log('@',pre,current)return pre + (current.done ? 1 : 0)},0) *///簡寫return this.todos.reduce((pre,todo)=> pre + (todo.done ? 1 : 0) ,0)},//控制全選框isAll:{//全選框是否勾選get(){return this.doneTotal === this.total && this.total > 0},//isAll被修改時set被調用set(value){// this.checkAllTodo(value)this.$emit('checkAllTodo',value)}}},methods: {/* checkAll(e){this.checkAllTodo(e.target.checked)} *///清空所有已完成clearAll(){// this.clearAllTodo()this.$emit('clearAllTodo')}},}
</script><style scoped>/*footer*/.todo-footer {height: 40px;line-height: 40px;padding-left: 6px;margin-top: 5px;}.todo-footer label {display: inline-block;margin-right: 20px;cursor: pointer;}.todo-footer label input {position: relative;top: -1px;vertical-align: middle;margin-right: 5px;}.todo-footer button {float: right;margin-top: 5px;}
</style>

2.2.4. 代碼流程流轉示意圖

在這里插入圖片描述

2.3. 發布訂閱模式版本

pubsub-js 是一個JavaScript庫，提供了發布-訂閱模式的實現，用于在應用程序中實現組件之間的解耦通信。它允許不同的組件在不直接相互關聯的情況下進行通信。這個庫提供了一個簡單的方式來發送消息并訂閱事件，從而使應用程序的代碼更加模塊化和可維護。

導入pubsub-js

2.3.1. main.js 代碼

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//關閉Vue的生產提示
Vue.config.productionTip = false//創建vm
new Vue({el:'#app',render: h => h(App),
})

2.3.2. App.vue 代碼

<template><div id="root"><div class="todo-container"><div class="todo-wrap"><MyHeader @addTodo="addTodo"/><MyList :todos="todos"/><MyFooter :todos="todos" @checkAllTodo="checkAllTodo" @clearAllTodo="clearAllTodo"/></div></div></div>
</template><script>import pubsub from 'pubsub-js'import MyHeader from './components/MyHeader'import MyList from './components/MyList'import MyFooter from './components/MyFooter'export default {name:'App',components:{MyHeader,MyList,MyFooter},data() {return {//由于todos是MyHeader組件和MyFooter組件都在使用，所以放在App中（狀態提升）todos:JSON.parse(localStorage.getItem('todos')) || []}},methods: {//添加一個todoaddTodo(todoObj){this.todos.unshift(todoObj)},//勾選or取消勾選一個todocheckTodo(id){this.todos.forEach((todo)=>{if(todo.id === id) todo.done = !todo.done})},//刪除一個tododeleteTodo(_,id){this.todos = this.todos.filter( todo => todo.id !== id )},//全選or取消全選checkAllTodo(done){this.todos.forEach((todo)=>{todo.done = done})},//清除所有已經完成的todoclearAllTodo(){this.todos = this.todos.filter((todo)=>{return !todo.done})}},watch: {todos:{deep:true,handler(value){localStorage.setItem('todos',JSON.stringify(value))}}},mounted() {this.addTodoPubId = pubsub.subscribe('addTodo',this.addTodo)this.checkTodoPubId = pubsub.subscribe('checkTodo',this.checkTodo)this.deleteTodoPubId = pubsub.subscribe('deleteTodo',this.deleteTodo)this.checkAllTodoPubId = pubsub.subscribe('checkTodo',this.checkAllTodo)this.clearAllTodoPubId = pubsub.subscribe('deleteTodo',this.clearAllTodo)},beforeDestroy() {pubsub.unsubscribe(this.addTodoPubId)pubsub.unsubscribe(this.checkTodoPubId)pubsub.unsubscribe(this.deleteTodoPubId)pubsub.unsubscribe(this.checkAllTodoPubId)pubsub.unsubscribe(this.clearAllTodoPubId)},}
</script><style>/*base*/body {background: #fff;}.btn {display: inline-block;padding: 4px 12px;margin-bottom: 0;font-size: 14px;line-height: 20px;text-align: center;vertical-align: middle;cursor: pointer;box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);border-radius: 4px;}.btn-danger {color: #fff;background-color: #da4f49;border: 1px solid #bd362f;}.btn-danger:hover {color: #fff;background-color: #bd362f;}.btn:focus {outline: none;}.todo-container {width: 600px;margin: 0 auto;}.todo-container .todo-wrap {padding: 10px;border: 1px solid #ddd;border-radius: 5px;}
</style>

2.3.3. 各個子組件代碼

2.3.3.1. MyHeader.vue 代碼

<template><div class="todo-header"><input type="text" placeholder="請輸入你的任務名稱，按回車鍵確認" v-model="title" @keyup.enter="add"/></div>
</template><script>import pubsub from 'pubsub-js'import {nanoid} from 'nanoid'export default {name:'MyHeader',data() {return {//收集用戶輸入的titletitle:''}},methods: {add(){//校驗數據if(!this.title.trim()) return alert('輸入不能為空')//將用戶的輸入包裝成一個todo對象const todoObj = {id:nanoid(),title:this.title,done:false}//通知App組件去添加一個todo對象//this.$emit('addTodo',todoObj,1,2,3)pubsub.publish('addTodo',todoObj)//清空輸入this.title = ''}},}
</script><style scoped>/*header*/.todo-header input {width: 560px;height: 28px;font-size: 14px;border: 1px solid #ccc;border-radius: 4px;padding: 4px 7px;}.todo-header input:focus {outline: none;border-color: rgba(82, 168, 236, 0.8);box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);}
</style>

2.3.3.2. MyList.vue 代碼

<template><ul class="todo-main"><MyItemv-for="todoObj in todos":key="todoObj.id":todo="todoObj"/></ul>
</template><script>import MyItem from './MyItem'export default {name:'MyList',components:{MyItem},//聲明接收App傳遞過來的數據props:['todos']}
</script><style scoped>/*main*/.todo-main {margin-left: 0px;border: 1px solid #ddd;border-radius: 2px;padding: 0px;}.todo-empty {height: 40px;line-height: 40px;border: 1px solid #ddd;border-radius: 2px;padding-left: 5px;margin-top: 10px;}
</style>

2.3.3.3. MyItem.vue 代碼

<template><li><label><input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"/><!-- 如下代碼也能實現功能，但是不太推薦，因為有點違反原則，因為修改了props --><!-- <input type="checkbox" v-model="todo.done"/> --><span>{{todo.title}}</span></label><button class="btn btn-danger" @click="handleDelete(todo.id)">刪除</button></li>
</template><script>import pubsub from 'pubsub-js'export default {name:'MyItem',//聲明接收todoprops:['todo'],methods: {//勾選or取消勾選handleCheck(id){//通知App組件將對應的todo對象的done值取反// this.checkTodo(id)//this.$bus.$emit('checkTodo',id)pubsub.publish('checkTodo',id)},//刪除handleDelete(id){if(confirm('確定刪除嗎？')){//通知App組件將對應的todo對象刪除// this.deleteTodo(id)// this.$bus.$emit('deleteTodo',id)pubsub.publish('deleteTodo',id)}}},}
</script><style scoped>/*item*/li {list-style: none;height: 36px;line-height: 36px;padding: 0 5px;border-bottom: 1px solid #ddd;}li label {float: left;cursor: pointer;}li label li input {vertical-align: middle;margin-right: 6px;position: relative;top: -1px;}li button {float: right;display: none;margin-top: 3px;}li:before {content: initial;}li:last-child {border-bottom: none;}li:hover{background-color: #ddd;}li:hover button{display: block;}
</style>

2.3.3.4. MyFooter.vue 代碼

<template><div class="todo-footer" v-show="total"><label><!-- <input type="checkbox" :checked="isAll" @change="checkAll"/> --><input type="checkbox" v-model="isAll"/></label><span><span>已完成{{doneTotal}}</span> / 全部{{total}}</span><button class="btn btn-danger" @click="clearAll">清除已完成任務</button></div>
</template><script>import pubsub from 'pubsub-js'export default {name:'MyFooter',props:['todos'],computed: {//總數total(){return this.todos.length},//已完成數doneTotal(){//此處使用reduce方法做條件統計/* const x = this.todos.reduce((pre,current)=>{console.log('@',pre,current)return pre + (current.done ? 1 : 0)},0) *///簡寫return this.todos.reduce((pre,todo)=> pre + (todo.done ? 1 : 0) ,0)},//控制全選框isAll:{//全選框是否勾選get(){return this.doneTotal === this.total && this.total > 0},//isAll被修改時set被調用set(value){// this.checkAllTodo(value)// this.$emit('checkAllTodo',value)pubsub.publish('checkAllTodo',id)}}},methods: {/* checkAll(e){this.checkAllTodo(e.target.checked)} *///清空所有已完成clearAll(){// this.clearAllTodo()// this.$emit('clearAllTodo')pubsub.publish('clearAllTodo')}},}
</script><style scoped>/*footer*/.todo-footer {height: 40px;line-height: 40px;padding-left: 6px;margin-top: 5px;}.todo-footer label {display: inline-block;margin-right: 20px;cursor: pointer;}.todo-footer label input {position: relative;top: -1px;vertical-align: middle;margin-right: 5px;}.todo-footer button {float: right;margin-top: 5px;}
</style>

2.3.4. 代碼流程流轉示意圖

在這里插入圖片描述

3. 發布訂閱模式和事件總線之間的區別優劣

發布-訂閱模式和事件總線都是用于實現組件之間的通信的模式，但它們在一些方面有所不同。下面是它們之間的區別以及各自的優劣勢：

發布-訂閱模式：

定義：

發布-訂閱模式是一種模式，其中有一個調度中心（通常稱為“發布者”），負責管理訂閱者（也稱為“訂閱者”）。訂閱者可以訂閱感興趣的事件，而發布者發布這些事件。當事件被發布時，訂閱者會收到通知并執行相關操作。

優勢：

解耦性強：發布者和訂閱者之間沒有直接關聯，從而實現了松耦合。
可以有多個訂閱者：多個訂閱者可以同時訂閱同一個事件，實現了多對多的通信。
靈活性：允許動態添加和移除訂閱者，以及在不影響其他部分的情況下修改事件的處理邏輯。

劣勢：

調試和追蹤：當訂閱者數量增加時，跟蹤事件的流向和處理變得更加復雜。
維護困難：如果不恰當地使用，可能導致事件的處理分散和難以維護。

事件總線：

定義：

事件總線是一個中央的通信渠道，用于在不同組件之間傳遞消息。在Vue中，通常是通過創建一個Vue實例作為事件總線，允許組件通過該實例來發布和訂閱事件。

優勢：

簡單易用：Vue的事件總線機制非常簡單，適用于小規模的組件通信。
Vue內置：作為Vue框架的一部分，事件總線是原生支持的，無需額外的庫。
組件間通信：可以方便地在任何兩個組件之間進行通信，而不考慮它們的層級關系。

劣勢：

限制：事件總線適用于小型應用，但對于大型應用，可能會導致事件處理邏輯分散且難以追蹤。
耦合性：事件總線可能導致組件之間的耦合性增加，因為事件可以被任何組件訂閱，難以管理。

結論：

發布-訂閱模式和事件總線都有各自的優劣勢，最適合的解決方案取決于您的應用程序的規模和需求。對于小型應用，事件總線可能更加簡便，但對于大型應用，您可能需要考慮更結構化的通信方案，如Vuex狀態管理、單向數據流等，以避免通信變得混亂和難以維護。在使用這些模式時，始終要考慮代碼的清晰性、可維護性和可擴展性。