Vue的生命周期

Vuejs

前言

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。

Vue生命周期图解

vue生命周期图解

Vue2.x中的生命周期

生命周期钩子 描述
beforeCreate 组件实例刚被创建，组件属性计算之前，如data属性等
官网解释：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
created 组件实例创建完成，属性已绑定，但DOM还未生成，$el属性还不存在
官网解释：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
beforeMount 模板编译/挂载之前
官网解释：在挂载开始之前被调用：相关的render函数首次被调用。 该钩子在服务器端渲染期间不被调用。
mounted 模板编译/挂载之后
官网解释：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。 该钩子在服务器端渲染期间不被调用。
beforeUpdate 组件更新之前
官网解释：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。 该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。
updated 组件更新之后
官网解释：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。 该钩子在服务器端渲染期间不被调用。
activated keep-alive组件激活时调用。 该钩子在服务器端渲染期间不被调用。
deactivated keep-alive组件停用时调用。 该钩子在服务器端渲染期间不被调用。
beforeDestroy 组件销毁前调用
官网解释：在这一步，实例仍然完全可用。 该钩子在服务器端渲染期间不被调用。
destroyed 组件销毁后调用
官网解释：调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。 该钩子在服务器端渲染期间不被调用。
errorCaptured 2.5.0+ 新增。当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

代码实例

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
62
63
64
<body>
<div id="app"></div>
<script>
   let vm = new Vue({
        el: "#app",
        data: {
            test: "hello world"
        },
        template: "<div id='test' ref='test'>{{test}}</div>",
        beforeCreate: function () {
            console.log("此时为beforeCreate");
        },
        created: function () {
            console.log("此时为created，this.$refs.test为",this.$refs.test);
             // undefined
            let test = document.getElementById("test");
            console.log(test.innerHTML);
            // 报错
        },
        beforeMount: function () {
            console.log("此时为beforeMount，this.$refs.test为",this.$refs.test);
            // undefined
            let test = document.getElementById("test");
            console.log(test.innerHTML);
            // 报错
        },
        mounted: function () {
            console.log("此时为mounted，this.$refs.test为",this.$refs.test);
             // <div id='test'>hello world</div>
            let test = document.getElementById("test");
            console.log(test.innerHTML);
            // hello world
        },
        beforeUpdate: function () {
            console.log("此时为beforeUpdate，this.$refs.test为",this.$refs.test);
            // <div id='test'>hi</div>
            let test = document.getElementById("test");
            console.log(test.innerHTML);
            // hello world
        },
        updated: function () {
            console.log("此时为updated，this.$refs.test为",this.$refs.test);
            // <div id='test'>hi</div>
            let test = document.getElementById("test");
            console.log(test.innerHTML);
            // hi
        },
         beforeDestroy: function () {
            console.log("此时为beforeDestroy，this.$refs.test为",this.$refs.test);
            // <div id='test'>hello world</div>
            let test = document.getElementById("test");
            console.log(test.innerHTML);
             //hi
        },
        destroyed: function () {
            console.log("此时为destroyed，this.$refs.test为",this.$refs.test);
            // undefined
            let test = document.getElementById("test");
            console.log(test.innerHTML);
            //hi
        }
    })
</script>
</body>

打印结果如图

打印结果

  • 第一个黄框内的内容，此时created，this.$refs.test为undefined，获取Dom节点报错，说明此时dom没有生成，挂载还没开始，beforeMount同理。
  • 红框时为mounted，此时页面打印结果可以看到this.$refs.test已经有值，Dom内的hello world也正常打印出来，说明此时Dom以生成，挂载已完成。
  • 改变test的值，beforeUpdate时，this.$refs.test已经改变，Dom节点内的hello world并未改变。说明beforeUpdate发生在虚拟 DOM 重新渲染之前，实例的更新发生在Dom重新渲染之前。updated时，this.$refs.test保持更新后的值，Dom节点内的hello world更新为hi。说明updated发生在虚拟 DOM 重新渲染之后。
  • 调用vm.$destroy()，beforeDestroy时，this.$refs.test值依旧存在，说明在这一步，实例仍然完全可用。destroyed时，this.$refs.test值为undefined，说明此时实例已经被完全销毁。

created与mounted

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

参考

Vue2.0 探索之路——生命周期和钩子函数的一些理解

关于Vue实例的生命周期created和mounted的区别

本文标题:Vue的生命周期

文章作者:Sanakey

发布时间:2018-08-01, 15:33:19

最后更新:2018-08-15, 16:45:44

原始链接:https://sanakey.github.io/2018/08/01/Vue的生命周期/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。


感谢打赏，错误之处欢迎指正交流(`・ω・´) !~~



文章目录
  1. 1. 前言
  2. 2. Vue生命周期图解
  3. 3. Vue2.x中的生命周期
  4. 4. 代码实例
    1. 4.1. created与mounted
  5. 5. 参考
|