Vue.js（三）Vue实例的生命周期钩子

参考： https://cn.vuejs.org/v2/guide/instance.html#生命周期图示

---

生命周期函数就是vue实例在某一个时间点会自动执行的函数，下图展示了Vue实例的生命周期：

注意： vue实例的生命周期函数并不放在methods对象中，而是直接单独放在vue的实例中即可。

以下代码介绍上图所示的8个生命周期钩子函数，其他几个函数详： https://cn.vuejs.org/v2/api/#选项-生命周期钩子 ，里面有其余三个activated、deactivated和errorCaptured的介绍。

<div id="root">
   {{value}}
</div>

<script>
    var vm = new Vue({
        el: '#root',
        data: {
            value: "hello world"
        },
        beforeCreate: function () {
            console.log('run: beforeCreate');
        },
        created: function () {
            console.log("run: created");
        },
        beforeMount: function () {
            console.log(this.$el);
            console.log("run: beforeMount")
        },
        mounted: function () {
            console.log(this.$el);
            console.log("run: mounted");
        },

        // 以下两个生命周期钩子函数在vue实例被销毁时执行
        beforeDestroy: function () {
            console.log("run: beforeDestroy");
        },
        destroyed: function () {
            console.log("run: destroyed");
        },

        // 以下两个方法当数据发生改变的时候这两个钩子才会被执行
        beforeUpdate: function () {
            console.log("run: beforeUpdate");
        },
        updated: function () {
            console.log("run: updated");
        }
    })
</script>

执行：

改变数据：

销毁对象：

---

再来介绍一下template：

询问实例中是否有template属性，如果没有则将el外层的html当做模板，有template则使用此模板，即下面两段代码的功能一样：

<div id="root">
    {{value}}
</div>

<script>
    var vm = new Vue({
        el: '#root',
        data: {
            value: "hello world"
        }
    })
</script>

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

<script>
    var vm = new Vue({
        el: '#root',
        template: "<div>{{value}}</div>",
        data: {
            value: "hello world"
        }
    })
</script>