vue学习：生命周期钩子函数

生命周期钩子函数

代码如下：

<div id="app">
    <span id="num">{{num}}</span>
    <button @click="num++">赞！</button>
    <h2>{{name}}，有{{num}}个人点赞</h2>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data:{
            name:"张三",
            num:100
        },
        methods: {
            show() {
                return this.name;
            },
            add(){
                this.num++;
            }
        },

        beforeCreate() {
            console.log("====================beforeCreate==================");
            console.log("数据模型未加载："+ this.name,this.num);
            console.log("方法未加载："+ this.show());
            console.log("html模版未加载："+ document.getElementById("num"));
        },
        created() {
            console.log("====================created==================");
            console.log("数据模型已加载："+ this.name,this.num);
            console.log("方法已加载："+ this.show());
            console.log("html模版已加载："+ document.getElementById("num"));
            console.log("html模版未渲染："+document.getElementById("num").innerHTML);
        },
        beforeMount() {
            console.log("====================beforeMount=================="); 
            console.log("html模版未渲染："+document.getElementById("num").innerHTML);
        },
        mounted() {
            console.log("====================mounted=================="); 
            console.log("html模版已渲染："+document.getElementById("num").innerHTML);
        },
        beforeUpdate() {
            console.log("====================beforeUpdat==================");
            console.log("数据模型已更新："+ this.num);
            console.log("html模版未更新："+ document.getElementById("num").innerHTML);
        },
        updated() {
            console.log("====================updated==================");
            console.log("数据模型已更新："+ this.num);
            console.log("html模版已更新："+ document.getElementById("num").innerHTML);
        },
                  
        
    });
</script>

当页面加载时：

当点击页面中的按钮时：