vue 中动态触发子组件，父子组件加载顺序。

vue 中在子组件中触发，父组件或其他组件 ？

---

解决思路：在所触发的组件上绑定  :key="timer" ，更新 timer 值，从而动态触发所有已绑定的子组件。

实例解析：再此实例中组件  Progress 和  HjcqTable 绑定 :key="timer" 属性，当改变日期值时如何重新加载组件（重发请求，数据变更）。

具体实现：在改变日期值的 getDate 函数中，this.timer = new Date().getTime()  动态触发所有已绑定的子组件。

<template>
    <div>
        <Date-Picker  @getDate="getDate($event)"></Date-Picker>
        <demo></demo>
        <Progress   :prmData="prmData" :key="timer"></Progress>
        <Hjcq-Table :prmData="prmData" :key="timer"></Hjcq-Table>
    </div>
</template>

import DatePicker from '@/components/DatePicker.vue'
import HjcqTable from '@/components/jkyj/hjcq/HjcqTable.vue'
import demo from '@/views/jkyj/demo.vue'
import Progress from '@/components/jkyj/hjcq/Progress.vue'

export default {
    data(){
        return{
            prmData:{
                startDate:'',
                endDate:''
            },
            timer:''
        }
    },
    components:{
        DatePicker,
        HjcqTable,
        demo,
        Progress
    },
    methods:{
         getDate($event){
            this.prmData.startDate = this.$formatDate(String($event[0]))
            this.prmData.endDate = this.$formatDate(String($event[1]))
            // 组件 :key="timer" 绑定, 动态触发所有已绑定的子组件
            this.timer = new Date().getTime()
        }
    }
}

---

vue 中父子组件加载顺序 ？

---

<-- 组件创建和挂载 !-->
<p>父 ：beforeCreate</p>
<p>父 ：created</p>
<p>父 ：beforeMount</p>
<p>子 ：beforeCreate</p>
<p>子 ：created</p>
<p>子 ：beforeMount</p>
<p>子 ：mounted</p>
<p>父 ：mounted</p>

<-- 组件更新 !-->
<-- 子组件若有 props 的话更新顺序是四步，若没有的话，两步不触发父亲的钩子 !-->
<p>父 ：beforeUpdate</p>
<p>子 ：beforeUpdate</p>
<p>子 ：updated</p>
<p>父 ：updated</p>

<-- 父组件更新顺序 !-->
<p>父 ：beforeUpdate</p>
<p>子 ：deactivated</p>
<p>父 ：updated</p>

<-- 销毁过程是 !-->
<p>父 ：beforeDestroy</p>
<p>子 ：beforeDestroy</p>
<p>子 ：destroyed</p>
<p>父 ：destroyed</p>

基础的生命周期钩子：beforeCreate、created、beforeMonted、mounted、beforUpdate、update、beforDestroy、destroyed

当组件之间切换时：通常都会请求一些请求过的数据，每次请求都会导致重复渲染影响性能。使用 keep-alive 将组件包裹起来，来缓存重复请求的数据。此时以上八种生命周期钩子将失效。取而代之的时 activate 和 deactivated。

activate：是在被包裹组建被激活的状态下使用的生命周期钩子。

deactivated：在被包裹组件停止使用时调用。