vue生命周期：vue实列在创建之前都要经过一些列初始化的过程，就是vue的生命周期。首先看一张官方的关于生命周期的图
在vue进行初始化的过程中经历了：
1、beforeCreate
2、created
3、beforeMount
4、mounted
5、beforeUpdate
6、updated
7、beforeDestroy
8、destroyed
等八个过程。。。。。。。。。。。。
//index.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><body> <div id="app"> <button @click="btn">click</button> <h3>{{msg}}-----外部html</h3> </div></body></html><script src="./build.js"></script>
//app.js
import Vue from 'vue';new Vue({ //el:"#app", //render:h=>h(App), //template: "<h1>{{msg +'这是在template中的'}}</h1>", data:{ msg:'333333333333' }, methods:{ btn(e){ this.msg = "9999999999999999"; } }, beforeCreate(){ console.log('beforeCreate ============>'); console.log(this.msg); console.log(this.$data); console.log(this.$el); }, created(){ console.log('Created ============>'); console.log(this.msg); console.log(this.$data); console.log(this.$el); }, beforeMount(){ console.log('beforeMount ============>'); console.log(this.msg); console.log(this.$data); console.log(this.$el); }, mounted(){ console.log('mounted ============>'); console.log(this.msg); console.log(this.$data); console.log(this.$el); }, beforeUpdate(){ console.log('beforeUpdate ============>'); console.log(this.msg); console.log(this.$data); console.log(this.$el); }, updated(){ console.log('updated ============>'); console.log(this.msg); console.log(this.$data); console.log(this.$el); }, beforeDestroy(){ console.log('beforeDestroy ============>'); console.log(this.msg); console.log(this.$data); }, destroyed(){ console.log('destroyed ============>'); console.log(this.msg); console.log(this.$data); console.log(this.$el); }}).$mount("#app");在初始化阶段可以看到如下图的结果：
1、在beforeCreate 和 created 的生命周期中间进行初始化事件、进行数据的观测。可以看到created的时候数据已经和data属性进行绑定（放在data中的属性当值发生改变时视图也会发生改变）
2、在created 和 beforeMount 的生命周期中判断对象是否存在el，存在则继续向下执行，不存在则中止编译，停止生命周期。
注释点文件中的挂载点 （$mount("#app")）,则文件中止了编译。{{msg}} 占位符无法解析。
3、在beforeMount 和 mounted 之间是给vue实例对象添加$el成员，并且替换掉挂在的DOM元素。因为在之前console中打印的结果可以看到beforeMount之前el上还是undefined
4、mounted : 在mounted之前元素中还是通过{{msg}}进行占位的，因为此时还没有挂载到页面上，还是JavaScript中的虚拟DOM形式存在的。在mounted之后可以看到h1中的内容发生了变化。
5、在beforeUpdate 和 updated 周期中当vue发现data中的数据发生了改变，会触发对应组件的重新渲染，先后调用beforeUpdate和updated钩子函数。
6、在beforeDestory 和 destoryed
beforeDestroy钩子函数在实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed钩子函数在Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
