vue生命周期学习

vue实例从创建到销毁的过程就是生命周期，它总共分为8个阶段，分别是：

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestory
destoryed
下面是vue官网上的一张生命周期图，我们借助它来分析在不同时期都做了什么操作。

闲话少说，直接上代码，通过打印的log来分析各个钩子函数

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
	
<div class="app">
  <div id="my">{{msg}}</div>
  <button @click="changeMsg">
    Change the Message
  </button>

</body>
<script type="text/javascript">
  var vm = new Vue({
  el: '.app',
  data: {
    msg: 'Hello Vue'
  },
  beforeCreate:function(){
      console.group('=====beforeCreate创建前状态======');
      console.log('el   :',this.$el);
      console.log('data   :',this.$data);
      console.log('msg   :',this.msg);
  },
  created:function(){
      console.group('=====created创建完毕状态======');
      console.log('el   :',this.$el);
      console.log('data   :',this.$data);
      console.log('msg   :',this.msg);
  },
  beforeMount:function(){
    console.group('=====beforeMount挂载前状态======');
      console.log('el   :',this.$el);
      console.log('data   :',this.$data);
      console.log('msg   :',this.msg);
  },
  mounted:function(){
    console.group('=====mounted过载结束状态======');
      console.log('el   :',this.$el);
      console.log('data   :',this.$data);
      console.log('msg   :',this.msg);
  },
  beforeUpdate:function(){
    console.group('=====beforeUpdate更新前状态======');
      console.log('el   :',this.$el);
      console.log('data   :',this.$data);
      console.log('msg   :',this.msg);
  },
  updated:function(){
     console.group('=====updated更新完毕状态======');
      console.log('el   :',this.$el);
      console.log('data   :',this.$data);
      console.log('msg   :',this.msg);
  },  
  beforeDestory:function(){
      console.group('=====beforeDestory销毁前状态======');
      console.log('el   :',this.$el);
      console.log('data   :',this.$data);
      console.log('msg   :',this.msg);
  },
  destoryed:function(){
      console.group('=====destoryed销毁完毕状态======');
      console.log('el   :',this.$el);
      console.log('data   :',this.$data);
      console.log('msg   :',this.msg);
  },
  methods: {
    changeMsg() {
      this.msg = "Hello world."
    }
  }
})

</script>
</html>

运行代码，打印结果如下图
vue生命周期学习
由此可知，
1、第一次加载页面时触发了beforeCreate、created、beforeMount、mounted四个钩子函数。
2、在created的时候数据已经和data属性进行了绑定，但此时还没有el选项。

我们继续向下看created到beforeMount
vue生命周期学习
这一阶段首先判断对象是否有el选项。如果有的话继续向下编译，如果没有则停止编译，也就意味着停止了生命周期，直到在该vue实例上调用vm.$mount(el).
此时注释掉代码中
el:’#app’
然后运行可以看到created的时候就停止了
vue生命周期学习
如果我们在后面加上