Vue生命周期详解

作者: Lee_YJ | 来源:发表于2019-03-01 15:19 被阅读0次

vue生命周期
入门
Vue生命周期
2.vue生命周期钩子
学习链接
vue 生命周期详解
Vue的生命周期和钩子函数
2020-02-11
vue1.0和2.0的生命周期详解
Vue实例详解与生命周期

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

lifecycle.png

beforeCreate

编写以下代码：

<--index.html-->
<div id="app">
    {{msg}}
</div>

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的值，得到以下结果：