Vue生命周期钩子的理解

组件从创建到销毁的一系列过程叫做组件的声明周期

vue在整个生命周期里面提供了一些函数,可以在内部实现一些业务逻辑,并且这些函数会在一些特定的场合下去执行。(在生命周期的某一个时刻进行触发)。

组件的生命周期钩子函数大致可以分为三个阶段:初始化 、进行中 、 销毁

1、初始化:beforecreate – create – beforeMount - mounted

		// 一个组件或者实例的生命周期都是通过new开始的
	    // 实例化之后,内部会做一些初始化事件与生命周期相关的配置
	    Vue.component("my-component",{
	        template:"#my-component",
	        data(){
	            return {
	                msg:1
	            }
	        },
	
        // 这个钩子函数初始化的时候立马执行,此钩子函数里面是获取不到数据的
        // 同时页面中的真实dom节点也没有挂载出来,null
        beforeCreate(){
            console.log("beforeCreate....")
            console.log(this.msg,document.getElementById("title")) // undefined null
        },

        // created钩子函数内部的数据已经被挂载了,但是真实dom节点还是没有渲染出来
        // 在这个钩子函数里面,如果同步的去更改数据的话,运行中钩子函数是不会执行的。
        // 通常会在此钩子函数里面进入ajax的异步操作,另外还可以做一些初始化事件的绑定
        created(){
            console.log("created...")
            console.log(this.msg,document.getElementById("title")) // undefined null
        },

        // 接下来的过程,就是组件或者实例去查找各自的模板,让后将其编译成虚拟dom,即将放入render函数中做初始化渲染的操作。
        // beforeMount代表dom马上就要被渲染出来了,但是还没有真正的在页面中渲染出来
        // 此钩子函数与created钩子函数基本一致,可以做ajax与初始化事件的绑定操作
        beforeMount(){
            console.log("beforeMount....")
            console.log(this.msg,document.getElementById("title")) // 1 null
        },

        // 生成好了虚拟dom,然后在render函数里面替换对应的el,渲染成真实dom节点
        // 相当于在render函数里面做了一个初始化渲染的操作
		// 相当于把组件内部的render函数覆盖了。自己的render是将虚拟dom渲染成真实dom的操作
        render(){ // 内部执行不需要写这一步
            console.log("render.....")
        },

        // mounted钩子函数是初始化阶段的最后一个钩子函数
        // 数据已经挂载完毕了,真实的dom也已经渲染出来了
        // 这个钩子函数可以用来做一些实例化的相关操作 ===> 拖拽
        mounted(){
            console.log("mounted.....")
            console.log(this.msg,document.getElementById("title")) // 1 dom真实节点
        },
        
	    })
	
	     // 绑定摸板组件
	    new Vue({}).$mount("#app");

2、进行中阶段:beforeUpdate - updated

		// 一个组件或者实例的生命周期都是通过new开始的
	    // 实例化之后,内部会做一些初始化事件与生命周期相关的配置
	    Vue.component("my-component",{
	        template:"#my-component",
	        data(){
	            return {
	                msg:1
	            }
	        },
			
            // 运行时钩子函数初始化阶段是不会主动执行的
            // 只有dom挂载完毕了,然后再去当数据发生变化的时候,beforeUpdate这个钩子函数才会执行
            beforeUpdate(){
                console.log("beforeUpdate....")
            },
			
			// 这个钩子函数是可行的
			// 当数据发生改变的时候,引发虚拟dom的对比,虚拟dom对比完成后,再去渲染真实的dom结构
			// 当真实的dom结构渲染完成后,内部才会执行updated钩子函数
			// 数据改变了,然后swiper-slide这几个真实dom生成好了之后,才会进入到updated这个钩子函数里面去
			updated(){
			    new Swiper(".swiper-container",{
			        loop:true 
			    })
			},
        
	    })
	
	     // 绑定摸板组件
	    new Vue({}).$mount("#app");

3、销 毁:beforeDestroy - destroyed

		// 一个组件或者实例的生命周期都是通过new开始的
    	// 实例化之后,内部会做一些初始化事件与生命周期相关的配置
		Vue.component("my-component",{
           	template:"#my-component",
           	data(){
              	 return {
                  	 msg:1
              	 }
           },
		
		// 当组件销毁时,就会触发,vm.$destroy()的时候,组件就会被销毁
		// 这个钩子函数代表销毁之前,可以做一些善后操作
		// 例如可以做一些清除事件绑定,清除计时器绑定
		beforeDestroy(){
			clearInterval(this.timer) // 清除计时器
			console.log("beforeDestroy...")
		},
		
		// 组件一旦被销毁了,组件的dom结构还是存在的
		// 只是组件的双向绑定
		destroyed(){
			console.log("destroyed...")
		}
		
       })

        // 绑定摸板组件
       new Vue({}).$mount("#app");

注 意:生命周期函数内不能使用箭头函数。

  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值