Vue 生命周期

生命周期钩子函数

解释：

• created阶段的ajax请求与mounted请求的区别：前者页面视图未出现，如果请求信息过多，页面会长时间处于白屏状态
• mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick

单个组件生命周期

 <template>
    <div>
        <h3>单组件</h3>
        <el-button @click="dataVar += 1">更新 {{dataVar}}</el-button>
        <el-button @click="handleDestroy">销毁</el-button>
    </div>
</template>

 <script>
 export default {
    data() {
        return {
            dataVar: 1
        }
    },
    beforeCreate() {
        this.compName = 'single'
        console.log(`--${this.compName}--beforeCreate`)
    },
    created() {
        console.log(`--${this.compName}--created`)
    },
    beforeMount() {
        console.log(`--${this.compName}--beforeMount`)
    },
    mounted() {
        console.log(`--${this.compName}--mounted`)
    },
    beforeUpdate() {
        console.log(`--${this.compName}--beforeUpdate`)
    },
    updated() {
        console.log(`--${this.compName}--updated`)
    },
    beforeDestroy() {
        console.log(`--${this.compName}--beforeDestroy`)
    },
    destroyed() {
        console.log(`--${this.compName}--destroyed`)
    },
    methods: {
        handleDestroy() {
            this.$destroy()
        }
    }
}
</script>

总结：

• 初始化组件时，会执行beforeCreate/Created/beforeMount/mounted四个钩子函数
• 当改变data中定义的变量（响应式变量）时，会执行beforeUpdate/updated钩子函数
• 当切换组件（当前组件未缓存）时，会执行beforeDestory/destroyed钩子函数
• 初始化和销毁时的生命钩子函数均只会执行一次，beforeUpdate/updated可多次执行

父子组件生命周期