学习vue杂记

组件

组件的生命周期

生命周期 & 生命周期函数

生命周期（Life Cycle）是指一个组件从创建 -> 运行 -> 销毁的整个阶段，强调的是一个时间段。 生命周期函数：是由 vue 框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行。 注意：生命周期强调的是时间段，生命周期函数强调的是时间点

组件之间的关系

1. 父子关系

   1. 父-> 子共享数据 props
   2. 子-> 父共享数据 this.$emit()

2. 兄弟关系 EventBus

   1. 创建eventBus.js 模块，并向外共享一个Vue 的实例对象

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

   2. 在数据发送方，调用bus.$emit('事件名称', 要发送的数据) 方法触发自定义事件
   3. 在数据接收方，调用bus.$on('事件名称', 事件处理函数) 方法注册一个自定义事件

ref 引用

ref 用来辅助开发者在不依赖于jQuery 的情况下，获取DOM 元素或组件的引用。每个 vue 的组件实例上，都包含一个$refs 对象，里面存储着对应的DOM 元素或组件的引用。 默认情况下，组件的$refs 指向一个空对象

this.$nextTick(cb) 方法

组件的$nextTick(cb) 方法，会把cb 回调推迟到下一个DOM 更新周期之后执行。通俗的理解是：等组件的DOM 更新完成之后，再执行cb 回调函数。从而能保证cb 回调函数可以操作到最新的DOM 元素。

动态组件

动态组件指的是动态切换组件的显示与隐藏。 vue 提供了一个内置的 组件，专门用来实现动态组件的渲染。

 <component :is='component'> </component>

使用keep-alive 保持状态

默认情况下，切换动态组件时无法保持组件的状态。此时可以使用 vue 内置的 组件保持动态组件的状态

当组件被缓存时，会自动触发组件的 deactivated 生命周期函数。 当组件被激活时，会自动触发组件的 activated 生命周期函数。

keep-alive 的include 属性

nclude 属性用来指定：只有名称匹配的组件会被缓存。多个组件名之间使用英文的逗号分隔：