生命周期 & 数据共享

目录

组件的生命周期 

生命周期和生命周期函数

组件生命周期函数分类

生命周期图示

组件创建阶段

beforeCreate 和 created

beforeMount 和 mounted

组件的运行阶段

beforeUpdate 和 update

组件销毁阶段

beforeDestroy 和 destroyed

总结

组件之间的数据共享

组件之间的关系

父子组件之间的数据共享

父向子传递数据

子向父传递数据

兄弟组件之间的数据共享

---

组件的生命周期 

生命周期和生命周期函数

生命周期：指一个组件从创建 ---> 运行 ---> 销毁的整个阶段，强调的是一个时间段

生命周期函数：由 vue 框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行

注意：生命周期强调的是时间段，生命周期函数强调的是时间点

组件生命周期函数分类

生命周期图示

组件创建阶段

beforeCreate 和 created

beforeCreate 阶段：组件的 props/data/methods 尚未被创建，仍处于不可用状态

created 阶段：组件的 props/data/methods 已创建好，都处于可用状态，但是组件的模板结构尚未生成

• beforeCreate 较少使用
• created 生命周期函数，非常常用。
• 经常在此函数中调用 methods 中的方法，请求服务器的数据。
• 并且把请求道的数据转存到 data 数据中，供 template 模板渲染的时候使用

beforeMount 和 mounted

beforeMount 阶段：将要把内存中编译好的 HTML 结构渲染到浏览器中。此时浏览器中还没有当前组件的 DOM 结构

mounted 阶段：已经把内存中的 HTML 结构，成功渲染到浏览器。此时浏览器中已经包含了当前组件的 DOM 结构

在 created 阶段发起 Ajax 请求

最早操作 DOM 元素是在 mounted 阶段

以上四个生命周期函数结束后，组件创建阶段正式结束

组件的运行阶段

beforeUpdate 和 update

beforeUpdate阶段：将要根据变化过后、最新的数据，重新渲染组件的模板结构

update阶段：已经根据最新的数据，完成了组件 DOM 结构的重新渲染

• 每次数据发生改变，都会触发 beforeUpdate 生命周期函数
• 执行到 beforeUpdate 阶段时，data 中的数据是改变之后的
• 但 UI 结构中数据还是改变之前的 data 数据
• beforeUpdate 和 update 生命周期函数最少执行一次，最多执行很多次

组件销毁阶段

beforeDestroy 和 destroyed

极少用

beforeDestroy 阶段：将要销毁此组件，此时尚未销毁，组件还处于正常工作的状态

destroyed 阶段：组件已被销毁，此组件在浏览器中对应的 DOM 结构已被完全移除

总结

组件创建和组件销毁阶段都只执行一次

组件执行阶段最少执行 0 次，最多执行 n 次

生命周期函数中常用的有：created、mounted、updated

在 created 阶段，data、props、methods 处于可用状态，可以发送 Ajax 请求

在 mounted 阶段，可以执行 DOM 操作

在 updated 阶段，已经根据最新的数据，完成了组件 DOM 结构的重新渲染

组件之间的数据共享

组件之间的关系

在项目开发阶段，组件之间最常见的关系分为以下两种：

• 父子关系
• 兄弟关系

父子组件之间的数据共享

父向子传递数据

父组件向子组件共享数据需要使用自定义属性

在父组件中通过 v-bind 绑定自定义属性

在子组件中通过 props 声明自定义属性

将父组件中 data 数据赋值给子组件中的 props 声明的自定义属性即可

对于普通数据类型而言，父组件向子组件传递数据是直接将父组件中的 data 数据复制一份传递给子组件中的 props 声明的自定义属性

对于复杂数据类型而言，父组件向子组件传递数据是将父组件中的 data 数据的引用复制一份传递给子组件中的 props 声明的自定义属性

父向子传递数据的过程中，不要修改 props 的值 

props 是只读的

子向父传递数据

子组件向父组件共享数据使用自定义事件

• 在子组件中，调用 this.$emit('事件名称', 要发送的数据) 方法触发自定义事件
• 在父组件中，调用 <子组件标签 @事件名称 = 事件处理函数> 接收子组件传递过来的数据

兄弟组件之间的数据共享

在 vue2.x 中，兄弟组件之间数据共享的方案是 EventBus

EventBus 的使用步骤：

• 创建 eventBus.js 模块，并向外共享一个 Vue 实例对象
• 在数据发送方，调用 bus.$emit('事件名称', 要发送的数据) 方法触发自定义事件
• 在数据接收方，调用 bus.$on('事件名称', 事件处理函数) 方法注册一个自定义事件

import Vue from 'vue'
export default new Vue();