Vue实例的生命周期

简介

　　每个 Vue 实例在被创建之前都要经过一系列的初始化过程，在这个过程中，实例会调用一些生命周期钩子，这就给我们提供了执行自定义逻辑的机会。

 

beforeCreate

　　在实例初始化之后，数据绑定之前会调用这个函数。

示例：

　　var vm = new Vue({
        el: '#app',
        data: function() {
            return {
                message: 'Hello Vue'
            }
        },
        beforeCreate: function() {
            console.log(this.message);    // undefind
            console.log(this.$options.data().message);    // Hello Vue
        }
    });

注：1、在 Vue 中，所有生命周期钩子函数中使用的“this”都是指向调用它的 Vue 实例，即 vm；2、Vue 实例同时也代理了选项中“data”下的所有属性，也就是说 vm.message = vm.$data.message = “Hello Vue”。但是，在这个阶段数据还没有绑定到 Vue 实例上面，所以输出 “undefind”。如果需要在这个阶段获取数据，可以使用 vm.$options.data() 返回“data”对象，或者通过 vm.$options.data().message 返回对应的值。

在这个阶段可以做一些不需要数据的工作。

 

created

　　在数据绑定之后会调用这个函数。

示例：

    var vm = new Vue({
        el: '#app',
        data: function() {
            return {
                message: 'Hello Vue'
            }
        },
        created: function() {
            console.log(this.message);    // Hello Vue
        }
    });

在这个阶段数据已经初始化为选项中的默认值，可以对数据进行操作，如向后端发请求获取服务器上的数据并绑定到响应式系统上。

之后，判断有无“el”选项（作为 Vue 实例的挂载目标），如果没有则需要手动调用 vm.$mount() 指定挂载目标，才会进行后面的步骤。

接着，判断有无“template”选项，如果没有则直接使用“el”选项指定的挂载目标，如果有则使用“template”选项中的字符串模板替换挂载目标，挂载目标中的所有内容都将被忽略。

注：在渲染页面的过程中，由于 html 是从上到下依次解析的，所以会先看到 Mustache 标签一闪而过，等到 Vue 实例创建完成之后才被替换为对应的值。这个问题的解决办法是：为 “el”指定的挂载元素添加 “v-cloak”指令，并在 css 中指定“[v-cloak] {display:none}”样式，关联实例编译结束后会自动移除这个指令。

 

beforeMount

　　在 Vue 实例挂载之前会调用这个函数。

 

mounted

　　在 Vue 实例挂载之后会调用这个函数。

示例：

    var vm = new Vue({
        el: '#app',
        data: function() {
            return {
                message: 'Hello Vue'
            }
        },
        beforeMount: function() {
            console.log(this.$el);    
            /* <div id="app" v-cloak><span>{{message}}</span></div> */
        },
        mounted: function() {
            console.log(this.$el);
            /* <div id="app"><span>Hello Vue</span></div> */
        }
    });

在这个阶段可以对 DOM 进行操作。

 

beforeUpdate

在数据更新之前会调用这个函数。

在这个阶段可以访问数据更新前的 DOM。

 

updated

在数据更新之后会调用这个函数。

在这个阶段可以访问数据更新后的 DOM。

 

beforeDestroy

在 Vue 实例销毁之前会调用这个函数。

 

destroyed

在 Vue 实例销毁之后会调用这个函数。