这是我参与「第五届青训营 」伴学笔记创作活动的第 17 天
生命周期
组件的生命周期
生命周期：一个组件从创建——运行——销毁的整个过程，强调的是一个时间段
生命周期函数：是由vue框架提供的内置函数，会伴随组件的生命周期，自动按次序执行
组件之间的数据共享
组件之间的关系
①父子关系 ②兄弟关系
父组件向子组件共享数据
通过自定义属性实现：
子组件向父组件————通过自定义事件实现
兄弟组件之间的数据共享——在vue2.x，用EventBus
EventBus使用步骤：
- 创建 eventBusjs 模块，并向外共享一个 Vue 的实例对象
- 在数据发送方，调用 bus.$emit事件名称要发送的数据)方法触发自定义事件
- 在数据接收方，调用 bus.son(事件名称事件处理函数)方法注册一个自定文事件
<h1 ref="myh1"></h1>
methods:{showThis(){this.$refs.myh1.style.color='red'}}
//$refs:h1——所以，我们可以通过此方法获取到h1,从而对他进行操作，比如这里就是改变了颜色
this.$nextTick(cb)方法
组件的 $nextTick(cb)方法，会把 cb 回调推迟到下一个 DOM 更新周期之后执行。通俗的理解是: 等组件的DOM 更新完成之后，再执行 c 回调函数。从而能保证 cb 回调函数可以操作到最新的 DOM 元素。
例如：
this.$nextTick(()=>{ this.$refs.iptRef.focus() })
数组方法 arr.some：some为数组中的每一个元素执行一次 callback 函数，直到找到一个使得 callback 返回一个true。如果找到了这样一个值，some 将会立即返回 true。否则，some 返回 false。
arr.every:如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。如果所有元素都满足条件，则返回 true。
注意：every() 不会对空数组进行检测。 every() 不会改变原始数组。
arr.reduce:reduce 为数组中的每一个元素依次执行回调函数。接受函数作为一个累加器。注意reduce无法调用空数组，会报错
//arr.reduce((累加的结果，当前循环项）=>{},初始值）
例：arr.reduce((amt，item）=>{
amt+=item.price*item.count
},0）
动态组件
动态组件
定义
动态组件是指动态切换组件的显示与隐藏
实现动态组件渲染component
component标签（位置：写在template要渲染的位置）时vue内置的，作用：组件占位符；is属性的值，表示要渲染的组件的名字。
使用keep-alive保持状态
在动态渲染的时候，隐藏的会被销毁，我们想要保持，就使用这个方法
使用方法：component标签用<keep-alive></keep-alive>包裹起来
keep-alive 对应生命周期函数
当组件第一次被创建的时候，既会执行created生命周期，也会执行activated生命周期；被激活的时候只会触发activated生命周期，因为组件没有被重新创建
当组件被缓存时，会自动触发组件的deactivated生命周期函数； 当组件被激活时，会自动触发组件的activated生命周期函数 （这两个周期只有加了keep-alive才使用）
keep-alive的incude属性
如果不加的话就会默认全部缓存
使用exclude可以指定那些组件不需要被缓存。**注意！！！两个属性不能同时使用
