Vue的生命周期（学习心得加面试经验）

前言：相对三个框架而言，Vue确实是最容易上手的一个轻量级框架，只要有相关的基础即可轻松入门，但是很多细节的知识点不仅工作中有用，面试中也会问到，今天我来分享的我的心得和经验。

生命周期就是以一个宏观的视角来审视Vue，理解一个Vue实例的生老病死，即创建到销毁的过程。下面是我的理解和记忆过程：
1.整体来看Vue实例有三个大过程，创建、挂载和销毁,这个很好理解，就好像一个机器的器件，生产完成，组装到机器，使用生命结束被销毁的过程。

之后对应的每个周期调用之前的又有一个before状态位，来方便开发者进一步对于Vue实例进行监听和操作。

这就是一个Vue实例的主要生命周期，单单了解生命周期是没有太多意义，更多是需要了解与生命周期相关的数据和方法在不同生命周期阶段的状态，这个也是文章的重点。

1. 属性
2. 方法
3. dom

（一） 先看一下属性与生命周期的关联，现在data中声明一个a

	data:function(){
		return {
			 a:1,
	    }
	},
    beforeCreate:function () {
      console.log("这是beforecreate"+this.a);
    },
    created:function(){
      console.log("这是created"+this.a);
    },
    beforeMount:function(){
      console.log("这是beforeMount"+this.a);
    },
    mounted:function() {
      console.log("这是Mounted"+this.a);
    },
    beforeDestroy:function(){
      console.log("这是beforeDestroy"+this.a);
    },
    destroyed:function(){
      console.log("这是destroyed"+this.a);
    }

下面是运行结果

说明只有在beforecreate生命钩子中无法访问Vue实例中的属性值，注意在destoryed中依然可以访问Vue实例中的值，Medhods与属性同理，不再一一演示

（二）$el的表现

同样先上代码

   beforeCreate:function () {
     console.log("这是beforecreate"+this.$el);
   },
   created:function(){
     console.log("这是created"+this.$el);
   },
   beforeMount:function(){
     console.log("这是beforeMount"+this.$el);
   },
   mounted:function() {
     console.log("这是Mounted"+this.$el);
   },
   beforeDestroy:function(){
     console.log("这是beforeDestroy"+this.$el);
   },
   destroyed:function(){
     console.log("这是destroyed"+this.$el);
   },

这是运行结果

可以看出虚拟节点$el是在调用Mounted函数之前已经挂载到了实例，并在之后一直可以访问到destroyed。

（三）面试时会问什么

1. 在create函数中能不能用this.访问属性
   可以访问
2. $el什么时候挂载到实例，又或者什么时候可以获取组件的dom元素
   在mounted函数之后都可以

就这么多啦，如有错误，欢迎指正~