vue生命周期和钩子函数的理解

发表于   |   分类于   |     |    阅读次数

由于暑假团队用vue做项目时，用到的钩子函数也只有mounted，(部分如下)，主要是用来向后台请求数据。 其他的也没用到，而且当初对vue的生命周期也不理解，所以最近看了一些相关的文档，总结一下自己的收获，方便日后再次查阅。

1
2
3
4
5
6
7
8
9
10
11
12
mounted () {
        // 向后台请求创建智能视图的限制条件
        this.$store.dispatch('getSearchConditions').then(() => {
          this.$store.dispatch('openFile').then(() => {
            // 向后台请求创建智能视图的限制条件
            this.$store.dispatch('getSearchConditions').then(() => {
              // 获取导入 Excel 表格的可选择磁盘
              this.$store.dispatch('getImportTargetDisks')
            })
          })
        })
      }

首先放上vue官方的描述生命周期的一张图。
image.png
总结起来就是分为如下几个阶段（vue 2.0）

image.png
了解了这些之后，我就试着用代码测试一下各个钩子函数的执行。

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
<div id="app-15">
        <p>{{ a }}</p>
        <button @click="change">点我更新</button>
</div>
new Vue({
  el: '#app-15',
  data: {
      a: 'haha'
  },
  methods: {
    change: function () {
      this.a='xixi';
    }
  },
  beforeCreate: function() {
    console.log("创建前")
    console.log(this.a)
    console.log(this.$el)
  },
  created: function() {
    console.log("创建之后");
    console.log(this.a)
    console.log(this.$el)
  },
  beforeMount: function() {
    console.log("mount之前")
    console.log(this.a)
    console.log(this.$el)
  },
  mounted: function() {
    console.log("mount之后")
    console.log(this.a)
    console.log(this.$el)
  },
  beforeUpdate: function() {
    console.log("更新前");
    console.log(this.a)
    console.log(this.$el)
  },
  updated: function() {
    console.log("更新完成");
    console.log(this.a);
    console.log(this.$el)
  },
  beforeDestroy: function() {
    console.log("销毁前");
    console.log(this.a)
    console.log(this.$el)
    console.log(this.$el)
  },
  destroyed: function() {
    console.log("已销毁");
    console.log(this.a)
    console.log(this.$el)
  }
})

##一. create 和 mounted 相关
运行之后，输出如下。

由结果可以看出

beforeCreate：el 和 data 并未初始化
created:完成了 data 数据的初始化，el没有
beforeMount：完成了 el 和 data 初始化 ，但el中的的值还没有渲染
mounted ：完成挂载，渲染成haha。.

二. update相关

点击按钮。内容由haha变为xixi，从而触发update操作。


输出如下，由此可见，在更新视图时，beforeUpdate和updated钩子函数已经执行。

三. destory相关

在终端输入 app15.$destory()
输出如下

销毁完成后，我们再重新改变a的值，vue不再对此动作进行响应了。但是原先生成的dom元素还存在，可以这么理解，执行了destroy操作，后续就不再受vue控制了。

##四.生命周期总结
网上提供了一些钩子函数的用法
beforecreate : 可以在这加个loading事件
created ：在这结束loading，还做一些初始化，实现函数自执行
mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情（这个用法在项目中比较常见，用的较多）
beforeDestory： 可以弹出一个警告框，用于警告
destoryed ：当前组件已被删除，清空相关内容