Vue生命周期详解

Vue生命周期是面试中经常被问到的问题，在实际项目中很多坑都是关于生命周期的，所以理解Vue实例的生命周期很有必要。笔者参考了一些文章，对Vue实例的生命周期做了总结，既是总结笔记以便以后参考，也是供大家一起学习交流。
以下这张图是Vue官网上的，我会利用钩子函数一步一步讲解Vue实例生命周期中发生了什么。

lifecycle.png

beforeCreate

beforeCreate

编写以下代码：

<--index.html-->

    {{msg}}

var app = new Vue({
  el:'#app',
  data: {
    msg: 'hello world!'
  },
  beforeCreate(){
    console.log('beforeCreate:');
    console.log('el:', this.$el);
    console.log('msg:', this.msg);
  }
})

运行代码，在后台得到以下输出：

beforeCreate-demo.png

由此可以得到，钩子函数beforeCreate()运行时，Vue实例还在初始化过程中，但是el选项和data数据并没有被初始化。所以此时无法获得data数据，如果偏要在此时获取data的之呢？可参考这个回答。

created

created.png

同样的html代码，更换钩子函数：

var app = new Vue({
  el:'#app',
  data: {
    msg: 'hello world!'
  },
  created(){
    console.log('created:');
    console.log('el:', this.$el);
    console.log('msg:', this.msg);
  }
})

运行代码，得到一下结果：

created-demo.png

所以，当created()函数运行时el选项并没有被初始化，data数据被初始化了，可以通过created()获得data对象里的值。

beforeMount

beforeMount.png

html代码不变，更换钩子函数：

var app = new Vue({
  el:'#app',
  data: {
    msg: 'hello world!'
  },
  beforeMount(){
    console.log('beforeMount:');
    console.log('el:', this.$el);
    console.log('msg:', this.msg);
  }
})

在后台得到以下输出结果：

deforeMount-demo

所以，beforeMount钩子函数被调用时，el和data都被初始化了，但是此时el还是虚拟Dom节点。

mounted

mounted.png

更改代码：

var app = new Vue({
  el:'#app',
  data: {
    msg: 'hello world!'
  },
  mounted(){
    console.log('mounted:');
    console.log('el:', this.$el);
    console.log('msg:', this.msg);
  }
})

运行代码，得到一下结果：

mounted-demo.png

所以，mounted钩子函数运行时，值已经被渲染在了页面上。

beforeUpdate和Updated

update.png

修改代码：

var app = new Vue({
  el:'#app',
  data: {
    msg: 'hello world!'
  },
  beforeUpdate(){
    console.log('beforeUpdate:');
    console.log('el:', this.$el);
    console.log('msg:', this.msg);
  },
  updated(){
    console.log('updated:');
    console.log('el:', this.$el);
    console.log('msg:', this.msg);
  }
})

在控制台修改msg的值，得到以下结果：

update-demo.png

发现两个钩子函数没有任何区别，其实beforeUpdate函数被调用时，data里msg的值已经改变了，但是没有渲染到页面上，所以那时的页面显示的还是旧值，页面渲染完毕之后才会调用Updated，这就是两个钩子函数调用时的区别。

beforeDestroy和destroyed

beforeDestroy钩子函数在实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed钩子函数在Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

参考文章：
https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA
https://segmentfault.com/a/1190000008010666?utm_source=tag-newest
https://segmentfault.com/a/1190000011381906?utm_source=tag-newest