1.生命周期就是vue实例在某一个时间点会自动执行的函数

官网：
https://vue.docschina.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E7%A4%BA%E6%84%8F%E5%9B%BE

2.钩子函数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>5.Vue实例生命周期函数</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">{{message}}</div>
    <script>
        // 通过new加Vue这个修饰符创建出来的
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'hello'
            },
            beforeCreate() {
                console.log('beforeCreate el', this.$el);  //undefined
                console.log('beforeCreate data', this.$data);  //undefined
            },
            created() {
                console.log('created el', this.$el); //undefined
                console.log('created data', this.$data);  //{__ob__: Observer}
            },
            beforeMount() {
                // 页面还没有被完全渲染
                console.log('beforeMount el', this.$el);//{{message}}
                console.log('beforeMount data', this.$data); //{__ob__: Observer}
            },
            mounted() {
                // 页面被渲染完毕
                console.log('mounted el', this.$el); //hello
                console.log('mounted data', this.$data); //{__ob__: Observer}
            },
            beforeDestroy() {
                //vm.$destroy()
                //beforeDestroy
                //destroyed
                // 组件即将被销毁时执行
                console.log('beforeDestroy');
            },
            destroyed() {
                // 当组件被完全销毁之后执行
                console.log('destroyed');
            },
            beforeUpdate() {
                // vm.$data.message='2'
                // beforeUpdate
                // updated
                // "2"
                // 数据发生改变，还没有重新渲染之前执行
                console.log('beforeUpdate');
            },
            updated() {
                // 重新渲染之后
                console.log('updated');
            },
        })

    </script>
</body>

</html>