Vue-11-生命周期

一、知识点部分

1. 生命周期钩子 = 生命周期函数 = 生命周期事件
   1.生命周期函数分为：
   1.1创建期间:
   1.1.1 beforeCreat
   1.1.2 created
   1.1.3 beforeMonute
   1.1.4 monuted
   1.2运行期间:
   1.2.1beforeUpdate
   1.2.2updated
   1.3销毁期间:
   1.31 beforeDestory
   1.32 destoryed
2. created阶段的ajax请求与mounted请求的区别：前者页面视图未出现，如果请求信息过多，页面会长时间处于白屏状态；mounted 不会承诺所有的子组件也都一起被挂载。
3. 如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick。
4. 2.vue2.0之后主动调用$destroy()不会移除dom节点，不推荐直接destroy这种做法，如果实在需要这样用可以在这个生命周期钩子中手动移除dom节点。

二、代码部分

Vue.component("test",{
				data(){
					return{
						msg:'这节课讲的是生命周期'
					}
				},
				template:`
					<div>
						<h5>{{msg}}</h5>
						<button @click="changeBtn">按钮</button>
					</div>
				`,
				methods:{
					changeBtn(){
						this.msg = this.msg + "开始变得复杂了";
					}	
				},
				beforeCreat:function(){
					//组件创建之前,此时Vue对象已经被创建出来了，只是数据属性没有还没有被创建，所以此方法中取this.msg为undefined。
					console.log(this.msg);//undefined ,在这个方法里赋值this.msg赋值不上，因为还没有被创建

				},
				created:function(){
					//组件创建之后
					/*
						在created这个方法中可以操作后台返回的数据，驱动视图
						使用methods或者data最早也是在created
						应用：发起ajax请求
					*/
				},
				beforeMount:function(){
					//在此阶段，模板已经在内存中生成完毕了，但是并未将模板挂载到页面中,页面中的元素还是原来的模板字符串 比如｛｛msg｝｝
				},
				mounted:function(){
					//创建阶段的最后一个阶段，表示实例已经被创建完成
					console.log(document.getElementById("app").innerHTML)
				},
				beforeUpdate:function(){

					//在更新DOM之前调用 应用：获取原始DOM
					console.log(document.getElementById("app"))
				},
				updated:function(){

					//在更新DOM之前调用 应用：获取原始DOM
					console.log(document.getElementById("app"))
				}
			})
			

			var App ={
				data(){
					return{
					}

				},
				template:`
					<div class="app">
						<test />	
					</div>
				`
			}

			new Vue({
				el:"#app",
				data(){
					return{
					
					}
				},
				template:`<App/>`,
				components:{
					App
				}
			})