一、生命周期图示

在这里插入图片描述

二、常见的生命周期函数

常见的生命周期函数	执行的时间
beforeCreate	Vue初始化
created	Vue初始化
beforeMount	模板未渲染到页面上
mounted	模板已经渲染到页面上
beforeDestroy	只有Vue实例销毁的时候或者调用vm.$destroy()这个方法
destroyed	只有Vue实例销毁的时候或者调用vm.$destroy()这个方法
beforeUpdate	数据发生变化时，先触发beforeUpdate
updated	数据发生变化时，再触发updated
温馨提示	生命周期函数，直接卸载Vue实例中，不写在methods中

三、生命周期函数执行场景

刷新页面，会依次触发以下函数
在这里插入图片描述
Vue销毁时，会依次触发以下函数

当数据发生改变时，会依次触发以下函数

四、测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue实例生命周期函数</title>
    <!--引入vue.js库-->
    <script src="../vue.js"></script>
</head>

<body>
<div id="root"></div>

<script>
    /*生命周期函数就是vue实例在某一个是点会自动执行的函数*/
    var vm = new Vue({
        el: '#root',
        template: "<div>{{content}}</div>",
        data: {
            content: 'hello world'
        },
        beforeCreate: function () {
            console.log("beforeCreate");
        },
        created: function () {
            console.log("created");
        },
        beforeMount: function () {
            console.log("beforeMount");
            /*模板未渲染到页面上*/
            console.log(this.$el);
        },
        mounted: function () {
            console.log("mounted");
            /*模板已经渲染到页面上*/
            console.log(this.$el);
        },
        beforeDestroy: function () {
            console.log("beforeDestroy");
        },
        destroyed: function () {
            console.log("destroyed");
        },
        beforeUpdate: function () {
            console.log(this.$data);
            console.log("beforeUpdate");
        },
        updated: function () {
            console.log(this.$data);
            console.log("updated");
        }

    });
</script>
</body>
</html>