Vue组件生命周期和组件之间通讯知识点

一、生命周期

在Vue中，组件的生命周期包括以下几个阶段：

1. 创建阶段（Creation）：组件实例被创建并初始化，包括以下钩子函数：

   • beforeCreate：组件实例化之前调用。
   • created：组件实例化之后调用，可以在这里进行数据初始化、事件监听等操作。

2. 挂载阶段（Mounting）：组件实例被挂载到DOM中，包括以下钩子函数：

   • beforeMount：组件挂载之前调用。
   • mounted：组件挂载之后调用，可以在这里进行DOM操作、数据请求等操作。

3. 更新阶段（Updating）：组件的props或state发生变化时，组件会重新渲染，包括以下钩子函数：

   • beforeUpdate：组件更新之前调用。
   • updated：组件更新之后调用，可以在这里进行DOM操作、数据请求等操作。

4. 卸载阶段（Unmounting）：组件从DOM中移除时调用，包括以下钩子函数：

   • beforeDestroy：组件卸载之前调用，可以在这里进行资源释放、事件解绑等操作。
   • destroyed：组件卸载之后调用。

在父子组件的情况下，组件的生命周期函数调用顺序为： 父组件：

• beforeCreate
• created
• beforeMount
• mounted

子组件：

• beforeCreate
• created
• beforeMount
• mounted

当父组件的props或state发生变化时，会触发子组件的更新阶段，调用以下钩子函数：

• beforeUpdate
• updated

当父组件被卸载时，会先卸载子组件，调用以下钩子函数：

• beforeDestroy
• destroyed

然后再调用父组件的以下钩子函数：

• beforeDestroy

二、组件之间通信方式

Vue组件之间通信可以通过以下几种方式实现：

1. 父子组件通信：父组件可以通过props向子组件传递数据，子组件可以通过$emit触发事件向父组件传递数据。

2. 兄弟组件通信：可以通过一个共同的父组件作为中介，将数据通过props和$emit传递到兄弟组件中。

3. 跨级组件通信：可以通过provide和inject实现跨级组件通信，父组件通过provide提供数据，子组件通过inject注入数据。

4. 事件总线：可以创建一个空的Vue实例作为事件总线，任何组件都可以通过$emit触发事件，其他组件通过$on监听事件并接收数据。

5. Vuex：如果组件之间的通信比较复杂，可以使用Vuex来管理组件之间的共享状态，通过Vuex的store来存储和管理数据，组件通过dispatch和commit来触发和修改状态。