Vue生命周期

简介 

总体划分：

        创建、运行、销毁
生命周期钩子=生命周期函数=生命周期事件

 执行流程图

创建周期的生命函数
    init（Events&Lifecycle）表示刚初始化了一个空的Vue实例对象，这时候只有一些默认的生命周期函数和事件，其他都未创建
     |--------》beforeCreate()
    init（Injections&Reactivity）
     |-------》created
    Has el option---N---when vm.$mount(el) is called
     |Y                        |    
    Has            template     option----N---Compile el's outerHtml as template
     |Y                                                |
    compile template into render function           |
     |----------------------------------------------|-------------》beforeMount  尚未挂在到界面
    create vm.$el and replace el with it  将内存中编译好的模板，真是替换到页面中
     |---------------------》mounted 
    mounted  如果使用插件操作DOM操作，最早也得到该阶段，到这里脱离了创建阶段，进入运行阶段
运行周期的生命函数
               /when data changes ------->beforeUpdate--->virtual dom re-render and patch -->updated--->Mounted
     mounted
               \when vm.$destroy() is called---->如果没有数据更新，这里就到了销毁周期的生命函数了
     beforeUpdate updated 会根据data的数据改变会被触发0次或者无穷次
销毁周期的生命函数
    mounted
     |--------》beforeDestroy（就已经从运行阶段，实例就进入了销毁阶段了，实例身上所有的data和methods等都处于可用状态，还没有真正执行销毁）
    destroyed-----》destroyed（当执行到这里，组件完全被销毁了，组件中所有的就被销毁了）

这里只是针对知识点的总结，具体可以参考下图，可能思路更清楚一些。

<div id="app">
	<input type="button" value="修改msg" @click="msg='no'">
	<p id="h3">{{ msg }}</p>
</div>
<script>
	 var vm = new Vue({
		el: '#app',
		data: {
			msg: 'ok'
		},
		methods: {
			show(){
				console.log('执行了show方法');
			}
		},
		//表示实例完全创建之前，执行他
		beforeCreate() {//这是第一个生命周期函数
		// 在这里调用的时候，data和methods中的数据都还没被初始化
		//    console.log(this.msg);
		//    this.show();
		},
		created() {//这是第二个生命周期函数
			// 这里data和methods中的数据已经被初始化好了
			console.log(this.msg);
			this.show();
		},
		beforeMount() {//这是第三个生命周期函数
			//表示模板已经在内存中编译完成，尚未渲染到页面中
			console.log(document.getElementById('h3').innerText);
			//在该方法执行的时候，页面的元素还未被真正替换回来，只是之前的模板字符串
		},
		mounted() {//第四个生命周期函数
			//是实例创建的最后一个函数，此时已经创建好了，如果没有其他操作，那么这里就创建完成了
			//表示内存中的数据已经渲染到页面中
			console.log(document.getElementById('h3').innerText);
		},

		//接下来是运行中的两个数据
		beforeUpdate() {//数据肯定被更新了
			//当执行该方法的时候页面中显示的数据还是旧的，页面还未和最新的数据保持同步
			console.log('beforeUpdate-界面上元素',document.getElementById('h3').innerText);
			console.log('beforeUpdate-data.msg:',this.msg);
		},
		updated() {
			//当执行该方法的时候页面中显示的数据还是旧的，页面还未和最新的数据保持同步
			console.log('updated-界面上元素',document.getElementById('h3').innerText);
			console.log('updated-data.msg:',this.msg);
		},
	 });
</script>

以上是针对VueJs的生命周期知识点的介绍以及示例代码。