vue生命周期钩子函数介绍及实践

生命周期概念

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

直接看图：

上代码：

分别调用生命周期各阶段的钩子函数：

<template>
    <header @click="changeTitle" class="header">
        <h1>{{title}}{{sendTitle}}</h1>
    </header>
</template>

<script>
export default {
    props:{
        sendTitle: {
            type: String
        }
    },
    data(){
        return {
            title:'Vue Component Demo!'
        }
    },
    methods: {
        changeTitle(){
            //注册事件，参数1:事件名称； 参数2:值
            this.$emit("titleChange","chaix通过emit到app.vue修改title值")
        }
    },
    //生命周期函数
    beforeCreate() {
        alert('这时实例还没有被创建，所以你无法知道data，也不能用watch监听');
    },
    created() {
        alert('这时实例还没有被创建，可以得到data，调用watch监听，但页面是空白的');
    },
    beforeMount() {
        alert('页面挂载前，此时页面依然是空白的。这时render函数首次被调用');
    },
    mounted() {
        alert('页面挂载了，这时你可以看到页面的内容了，也可以访问到dom');
    },
    beforeUpdate() {
        alert('数据更新前，也就是虚拟DOM打补丁之前');
    },
    updated() {
        alert('数据已经更新完毕');
    },
    beforeDestroy() {
        alert('页面离开之前被调用，清除定时器或者三方的一些DOM结构');
    },
    destroyed() {
        alert('实例已经完全被销毁');
    }
}
</script>

<style scoped>
.header {
    background: lightgreen;
    padding: 10px;
}
h1 {
    color: #222;
    text-align: center;
}
</style>