Vue.js 实例的生命周期

发表于 分类于 ，

  Vue 实例有一个完整的生命周期，先上一段 Vue.js 官网对 Vue 实例生命周期的解释：

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。

  同时，在这个过程中，会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

vue实例生命周期图

  上面这张图是 Vue.js 官网 Vue 实例章节 中给出的 Vue 实例生命周期图示，下面我来逐项解释图中的每一步当中生命周期钩子函数的用法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
var test = new Vue({
    el: '#app',
    data: {
        message: 'Hello'
    },
    /*   结合上面的生命周期图来看，首先是第一步创建一个vue对象new Vue(),然后vue实例进行
    基础的初始化操作(Init Events & Lifecycle)之后，就会进入到beforeCreate函数，这时
    控制台会输出“undefined beforeCreate"，这是因为此时vue还没有监控data对象数据的变化，
    所以this.message会输出“undefined”   */
    beforeCreate: function() {
        console.log(this.message + ' beforeCreate')
    },
    /*   beforeCreated函数执行完毕后，vue实例会初始化剩下的部分，接着执行created函数，
    下面的函数会在控制台输出“Hello created”,此时vue实例都已初始化完毕，this.message可以被输出   */
    created: function() {
        console.log(this.message + ' created')
    },
    /*   created函数执行完毕后，会询问实例中是否有"el"选项，本test实例中有el实例，接着会询问是否有
    "template"模板，本实例中没有定义，所以会走No分支，会把当前el的整体内容当做模板。
    那么此时的模板，就是当前HTML文件内，id为"app"标签的所有内容。如果实例中有"template"，
    模板即为"template"属性中的内容。

    接着往下走到了beforeMount函数，下面的函数会在控制台输出"Hello beforeMount"，此时
    页面还没有将编译出的HTML文件渲染到页面上，beforeMount函数正是此时执行的函数。   */
    beforeMount: function() {
        console.log(this.message + ' beforeMount')
    },
    // 到了mounted函数执行的时候，此时模板已经挂载完成，HTML内容已经被渲染到了页面上。
    mounted: function() {
        console.log(this.message + ' mounted')
    },
    beforeDestroy: function() {
        console.log(this.message + ' beforeDestroy')
    },
    destroyed: function() {
        console.log(this.message + ' destroyed')
    },
    /*   beforeDestroy和destroyed分别是在实例销毁之前和实例销毁之后执行的函数，
    此时如果我们在控制台使用"test.$destroy()"方法来销毁该实例的话，控制台会输出

    Hello beforeDestroy
    Hello destroyed
    undefined

    说明beforeDestroy()和destroyed()两个函数分别先后得到了执行，同时销毁了test实例   */

    beforeUpdate: function() {
        console.log(this.message + ' beforeUpdate')
    },
    updated: function() {
        console.log(this.message + ' updated')
    }
    /*   beforeUpdate和updated函数分别是当数据改变时，会在 DOM 更新前和更新后分别执行的两个函数，
    此时如果我们在控制台执行"test.message = 'Hi'"，控制台会输出

    Hi beforeUpdate
    Hi updated
    "Hi"

    说明beforeUPdate()和updated()两个函数分别在数据改变前后得到了执行   */
})

  生命周期函数就是 Vue 实例在某一个时间点会自动执行的函数，我们可以通过在 Vue 实例运行过程中的不同时间点来嵌入不同的函数，以此来实现相应的功能。