vue基础第四天
组件通信
Event-Bus 事件总线
常用于跨组件通信时使用
两个组件的关系非常的复杂，通过父子组件通讯是非常麻烦的。这时候可以使用通用的组件通讯方案：事件总线（event-bus)
语法：
- src/EventBus/index.js – 创建空白Vue对象并导出
- 在要传递值的组件(a.vue) eventBus.$emit('事件名', 值)
- 在要接收值的组件(b.vue) eventBus.$on('事件名', 函数体)
例：
生命周期
目标：从创建 到销毁的整个过程就是 – Vue实例的 - 生命周期
钩子函数
Vue 框架内置函数，随着组件的生命周期阶段，自动执行
-
作用: 特定的时间点，执行特定的操作
-
场景: 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据
-
分类: 4大阶段8个方法
| 阶段 | 方法名 | 方法名 |
|---|---|---|
| 初始化 | beforeCreate | created |
| 挂载 | beforeMount | mounted |
| 更新 | beforeUpdate | updated |
| 销毁 | beforeDestroy | destroyed |
初始化阶段
beforeCreate / created
\1. new Vue() – Vue实例化(组件也是一个小的Vue实例)
\2. Init Events & Lifecycle – 初始化事件和生命周期函数
\3. beforeCreate – 生命周期钩子函数被执行
\4. Init injections&reactivity – Vue内部添加data和methods等
\5. created – 生命周期钩子函数被执行, 实例创建
\6. 接下来是编译模板阶段 –开始分析
\7. Has el option? – 是否有el选项 – 检查要挂到哪里
没有. 调用$mount()方法
有, 继续检查template选项
created函数触发能获取data, 不能获取真实DOM
挂载阶段
beforeMount / mounted
\1. template选项检查
有 - 编译template返回render渲染函数
无 – 编译el选项对应标签作为template(要渲染的模板)
\2. 虚拟DOM挂载成真实DOM之前
\3. beforeMount – 生命周期钩子函数被执行
\4. Create … – 把虚拟DOM和渲染的数据一并挂到真实DOM上
\5. 真实DOM挂载完毕
\6. mounted – 生命周期钩子函数被执行
更新阶段
\1. 当data里数据改变, 更新DOM之前
\2. beforeUpdate – 生命周期钩子函数被执行
\3. Virtual DOM…… – 虚拟DOM重新渲染, 打补丁到真实DOM
\4. updated – 生命周期钩子函数被执行
\5. 当有data数据改变 – 重复这个循环
当数据发生变化并更新页面后 执行updated钩子函数，可以获取到更新后的DOM元素
销毁阶段
\1. 当$destroy()被调用 – 比如组件DOM被移除(例v-if)
\2. beforeDestroy – 生命周期钩子函数被执行
\3. 拆卸数据监视器、子组件和事件侦听器
\4. 实例销毁后, 最后触发一个钩子函数
\5. destroyed – 生命周期钩子函数被执行
一般在beforeDestroy/destroyed里手动消除计时器/定时器/全局事件
