vue组件化
一、什么是vue组件化
Vue组件化是指将一个应用划分为多个独立、可复用的模块，每个模块都包含了自己的HTML模板、样式和JavaScript逻辑。组件化的设计使得开发人员可以更好地管理应用的复杂度，提高代码的可维护性和重用性。
Vue组件化的核心是Vue组件，它是Vue框架中的基本构建块。一个Vue组件可以封装一些特定的功能，例如一个登录表单组件、一个轮播图组件等，它们可以被其他组件多次使用。
Vue组件化的特点包括：
可复用性：每个Vue组件都是独立的，可以在不同的地方多次使用。
单一职责：每个Vue组件只负责实现一个特定的功能，使得代码更加清晰和易于维护。
模块化开发：每个Vue组件可以独立开发、测试和维护，提升开发效率和团队协作能力。
组件通信：Vue组件之间可以通过props和事件进行通信，实现信息的传递和共享。
使用Vue组件化可以带来很多好处，如提高代码复用性、可维护性和可测试性，减少开发时间和维护成本，提升开发效率和用户体验等。
二、vue生命周期
Vue的生命周期就是vue实例从创建到销毁的全过程，也就是new Vue() 开始就是vue生命周期的开始。Vue 实例有⼀个完整的⽣命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程，称这是Vue的⽣命周期。钩子函数是Vue生命周期中每个阶段对外开放让程序员操作Vue的接口。Vue有8个钩子函数。
钩子函数
1、beforeCreate( 创建前 )
这个时候，在实例被完成创建出来，el和data都没有初始化，不能访问data、method，一般在这个阶段不进行操作。
2、created( 创建后 )
这个时候，vue实例中的data、method已被初始化，属性也被绑定，但是此时还是虚拟dom，真是dom还没生成，$el 还不可用。这个时候可以调用data和method的数据及方法，created钩子函数是最早可以调用data和method的，故一般在此对数据进行初始化。
3、beforeMount( 挂载前)
此时模板已经编译完成，但还没有被渲染至页面中（即为虚拟dom加载为真实dom），此时el存在则会显示el。在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取。
4、Mounted( 挂载后)
此时模板已经被渲染成真实DOM，用户已经可以看到渲染完成的页面，页面的数据也是通过双向绑定显示data中的数据。 这实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的躺在我们的内存中，一动不动。
5、beforeUpdate
更新前状态（view层的数据变化前，不是data中的数据改变前），重新渲染之前触发，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染。只有view上面的数据变化才会触发beforeUpdate和updated，仅属于data中的数据改变是并不能触发。
6、updated
数据已经更改完成，dom也重新render完成。
7、beforeDestroy
销毁前执行（$destroy方法被调用的时候就会执行）,一般在这里善后:清除计时器、清除非指令绑定的事件等等…’)
8、destroyed
销毁后 （Dom元素存在，只是不再受vue控制）,卸载watcher，事件监听，子组件。
三、组件之间的通信
1、父传子
当父组件要向子组件传递数据时，可以通过props来实现。
父组件：
子组件：
{{ message }}
在这个例子中，父组件通过props将数据message传递给子组件。子组件通过在props中定义message来接收父组件传递的数据，并在模板中进行渲染。
这样子组件就可以显示父组件传递的数据了。
2、子传父
在Vue中，可以通过使用自定义事件来实现子组件向父组件传递数据。
首先，在子组件中定义一个事件，并在合适的时机触发该事件，将需要传递的数据作为参数传递给事件。
然后，在父组件中监听子组件触发的事件，并在事件处理函数中接收传递的数据。
接收到的数据: {{ receivedData }}
在父组件中，使用子组件的标签时，通过 @data-passed 监听子组件触发的 data-passed 事件，并在 handleData 方法中接收传递的数据。最后，在父组件的模板中可以直接使用接收到的数据 receivedData。
3、兄弟组件
使用事件总线可以实现兄弟组件之间的通信，以下是一种常见的实现方式：
1、创建一个事件总线对象
在 Vue.js 中，我们可以使用一个空的 Vue 实例作为事件总线对象。可以在 main.js 文件中创建一个全局的事件总线对象：
// main.js
import Vue from 'vue'
// 创建事件总线对象
export const eventBus = new Vue()
2、发送事件
在发送方组件中，通过事件总线对象发送事件。可以使用 $emit 方法来触发事件，并传递需要传递的数据。
// Sender.vue
import { eventBus } from './main.js'
export default {
methods: {
sendData() {
// 发送事件，并传递数据
eventBus.$emit('data-updated', this.data)
}
}
}
3、接收事件
在接收方组件中，通过事件总线对象监听事件。可以使用 $on 方法来监听事件，当事件触发时，执行相应的回调函数。
// Receiver.vue
import { eventBus } from './main.js'
export default {
data() {
return {
receivedData: ''
}
},
mounted() {
// 监听事件
eventBus.$on('data-updated', data => {
// 接收到数据后执行的逻辑
this.receivedData = data
})
}
}
通过以上步骤，发送方组件可以通过事件总线对象发送事件，并传递数据。接收方组件可以通过事件总线对象监听事件，并执行相应的逻辑来处理接收到的数据。这样就实现了兄弟组件之间的通信。
4、祖先与后代
在Vue中，可以使用依赖注入来实现祖先与后代组件的通信。Vue提供了provide和inject两个选项来实现这个功能。
首先，在祖先组件中使用provide选项来提供需要共享的数据或方法，例如：
export default {
provide: {
sharedData: '这是共享的数据',
sharedMethod: function() {
console.log('这是共享的方法');
}
},
// ...
}
然后，在后代组件中使用inject选项来注入共享的数据或方法，例如：
export default {
inject: ['sharedData', 'sharedMethod'],
created() {
console.log(this.sharedData); // 输出 '这是共享的数据'
this.sharedMethod(); // 调用共享的方法
},
// ...
}
通过inject选项可以直接将祖先组件提供的数据或方法注入到后代组件中，然后就可以在后代组件中使用了。
需要注意的是，provide和inject选项是在 Vue 2.2.0+ 版本中引入的，如果使用的是旧版本的 Vue，可以考虑使用 Vuex 或事件总线等其他方式来实现组件通信。