Vue生命周期函数（钩子函数）自动执行的函数

每个阶段对应两个钩子函数

<div id="app">
        <h2>{{title}}</h2>
        <button @click="count--">-</button>
        <span>{{count}}</span><button @click="count++">+</button>
    </div>

    <script src="../utils/vue.js"></script>


    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                title: '钩子函数演示',
                count: 100
            },
            // 创建阶段
            beforeCreate() {
                console.log('beforeCreate：', this.count); //此时还不能使用data数据以及调用methods方法
            },
            created() {
                console.log('created:', this.count); //此时可以使用data数据，可以调用methods方法
            },
            // 挂在阶段
            beforeMount() {
                console.log('beforeMount:', document.querySelector('h2'));

            },
            mounted() {
                console.log('beforeMount:', document.querySelector('h2'));
            },
            // 更新阶段（数据更新才触发）
            beforeUpdate() {
                // 数据更新了但是页面还没有更新
                console.log('beforeUpdated:', this.count, document.querySelector('span').innerHTML);
            },
            updated() {
                // 数据、页面都更新
                console.log('updated:', this.count, document.querySelector('span').innerHTML);
            }
        })


    </script>