记录我的Vue学习 --- 钩子函数从上图（Vue的生命周期图）里可以看出有beforeCreate、created、b

生命周期和钩子函数在Vue的学习的里是很重要的，这篇文章里我浅显地说说钩子函数（￣︶￣）

Vue的生命周期图

从上图（Vue的生命周期图）里可以看出有beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed八个钩子函数，下面用代码简单测试一下。

简单代码测试

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="vue.js"></script>
    </head>
    <body>
        <div id="a">
            <p>{{ num }}</p>
            <button @click="updateNum">update</button>
        </div>
        <button id="destroy">destroy</button>
        
        <script>
            var vm = new Vue({
                el : '#a',
                data : {
                    num : 0
                },
                methods : {
                    updateNum : function(){
                        this.num ++;
                    }
                },
                beforeCreate : function(){
                    console.log("beforeCreate的num:",this.num);
                      console.log("beforeCreate的$el:",this.$el);
                },
                created : function(){
                    console.log("created的num:",this.num);
                      console.log("created的$el:",this.$el);
                },
                beforeMount : function(){
                    console.log("beforeMount的$el:",this.$el);
                },
                mounted : function(){
                    console.log("mounted的$el:",this.$el);
                },
                beforeUpdate : function(){
                    console.log("beforeUpdate的$el:",this.$el.querySelector('p').innerText);
                },
                updated : function(){
                    console.log("updated的$el:",this.$el.querySelector('p').innerText);
                },
            })
            
            document.getElementById('destroy').addEventListener('click',function(){
                vm.$destroy();
            })
        </script>
    </body>
</html>