vue生命周期

一、生命周期

        1、概念

           每个组件从创建到销毁都会经历一系列特定的过程，称为生命周期。把过程执行的回调函数称为生命周期钩子函数

        2、作用

           创建后  发起ajax请求；
           挂载后操作dom；
           添加监听事件；
           销毁前移除间隔调用，事件监听；

        说明：并不是每个生命周期都必须使用

        3、案例：

           created 请求数据；

           mounted  监听事件  查找dom节点

           beforeDestroy  移除事件监听

           先 网络请求 axios 用来请求数据  像jquery中的$.ajax()   npm i axios

           通过网络请求到数据,在页面展示出来

二、生命周期的4大阶段8大钩子函数

        1、创建前后

           1.beforeCreate  创建前
        特点：有this，没有data与methods方法

           2.created  创建后
        特点：有data，没有$el,dom节点
        用处：ajax请求，定时器，事件监听

        2、挂载前后

           3.beforeMount  挂载前
        特点：有$el,数据没有渲染

           4.mounted 挂载后
        特点：有dom节点，数据也渲染
        用处：操作节点，ajax请求

        3、更新前后

           5.beforeUpdate 更新前
        特点：会执行多次，数据更新，dom节点没有更新

           6.updated  更新完毕
        特点：会执行多次，数据更新，dom节点也更新

        4、销毁前后

           7.beforeDestroy 销毁前
        特点：数据可以更新，视图已经不更新
        用处：移除监听事件，停止定时器

           8.destroyed  销毁完毕
        特点：没有this，切换视图与vue实例的联系

<script>
	export default {
		data() {
			return {

			}
		},
		methods:{
			showWin(){

			}
		},
		// 创建前后
		beforeCreate() {
			// 创建前,有this，没有data，mothods  dom节点
		},
		craeted() {
			// 创建完毕，有data没有el
		},
		// 挂载前后
		beforeMount() {
			// dom挂载前,有$el,没有渲染效果
		},
		mounted() {
			// 组件挂载完毕
		},
		// 更新前后
		beforeUpdate(){
			// 组件更新后,数据更新,视图没有更新
		},
		updated(){
			// 组件更新后,数据更新，视图已经更新
		},
		// 卸载前后
		beforeDestroy(){	
			// 数据可以更新,视图已经不响应
		},
		destroyed(){
			// 切断视图与vue实例的联系
		}
	}
</script>