vue中的生命周期钩子函数

生命周期
组件从创建到销毁的一系列过程叫做生命周期
而vue在生命周期里面提供了一些函数（钩子函数），可以在内部实现一些业务逻辑
组件的生命周期钩子函数大概可以分为三个阶段
1.初始化阶段 beforeCreate created beforeMount mounted
2.正在运行阶段 beforeUpdate updated
3.销毁的阶段 beforeDestroy destroyed

1.初始化阶段
组件或这实例在new 之后开始他的生命周期,实例化之后，内部会做一些初始化事件和生命周期相关的配置

//创建一个新的全局组件
Vue.component('hello',{
	template:"#hello"
	data(){
		return {
		  msg:'helloworld'
		}
	}
})

上面是初始化的组件
同时初始化的时候会立马执行 beforeCreate 这个钩子函数`

beforeCreate(){
	console.log(this.msg) 
	//在这个函数里面是获取不到组件中的数据 同时也获取不到页面中的真实dom节点
	//因为在这个阶段还没有挂载出来
}

下一个阶段就是 created 钩子函数

created(){
                 this.msg =“你好世界“
                console.log(this.msg)
//在这个函数内部的数据已经被挂载了 但是真实dom还没有被挂载 所以还是没有渲染出来 获取不到
//在这个函数里面如果同步的修改数据 则正在运行周期的钩子函数不会执行
//但是通常会在这里放入ajax的异步操作  还可以做一些初始化事件的绑定
//比如绑定定时器
            }

到这里的时候 实例会有一个分支判断是否指向了el选项

new Vue({//这个是指定的
	el:"#xxx"
})

如果没指定就会从 vm.$mount(el)中找指定的el

new Vue().mount(el)

当找到指定的el后 就会判断是否指定template选项
如果指定了 就会把template选项编译到render函数中
如果没指定 就会将el外部的html当作template进行编译
也就是说组件或者实例去查找各自的模板，然后将其编译成虚拟dom，即将放入render函数中做初始化渲染的操作。
编译完就会进入到

beforeMount 这个钩子函数里面

beforeMount(){
	//这个就是在dom马上就要渲染出来了但是还没有在页面上真正的渲染出来，
	//这个钩子函数与created钩子函数基本一致，可以做ajax与初始化事件的绑定操作
	//他也只能获取到数据但是获取不到dom节点
}

在此已经生成好了虚拟的dom 然后在render函数里面替换对应的el 渲染成真实的dom节点
相当于在render函数里面做了一个初始化渲染的操作

接下来就是mounted的阶段

mounted(){
	//在这个里面数据已经挂在完毕  真实的dom也已经渲染完毕
	//这个钩子函数可以用来做一些实例化的相关操作
	//在这里面可以获取到数据  和页面上的dom节点
}

2.此时初始化阶段就已经完成接下来，就到了运行的阶段

beforeUpdate(){
	//这个钩子函数在初始化阶段是不会主动执行的
	//只有当dom挂载完毕。数据发生改变的时候 会立刻执行这个钩子函数
	//在这里获取真实dom的值是原来的数据
	//而内存中的数据是更新的数据
}

然后这里就会生成新的虚拟dom 与原来的 虚拟dom通过diff算法进行对比 然后有不一样的地方就会进行重新渲染真实dom
进入到下一个钩子函数

update（）{
 //在这个钩子函数里面可以获取dom节点更新后的内容
 //这里面的update中dom里面的值 与 内存中的data里面的值是一致的
}

3.销毁的阶段
一旦触发了this.$destroy() 就会触发销毁阶段的函数

beforeDestroy(){
	//这个函数是在销毁之前
	//在这里我们可以做一些业务逻辑  如清除在created钩子函数上绑定的定时器的一些操做 
},
destroyed(){
	//这个函数是在销毁后
	//组件的dom是存在的  但是他的双向绑定 监听watch 都不存在了 
}
methods:{
	destroy(){
			this.$destroy()//组件被销毁了
	}
}