第十六节:带你梳理Vue2: 生命周期与钩子函数

前沿:
通过前面几节的学习,我们已经对vue有了初步的了解,大致了解了vue可以帮我们干什么,
那么接下来我们就来看看vue的生命周期和它常用的钩子函数,

1. 理解生命周期的含义

生命周期:就是一个组件从实例化创建并添加到DOM树开始 ,一直到组件被销毁的整个过程 。

生命周期函数(钩子函数): 就是在Vue生命周期的整个过程的不同阶段被调用的函数


2. 生命周期图

首先来看一下官网对于vue生命周期的图解, 官网上目前有8个生命周期函数,
还有两个我们之后再看. 先看看基本的8个钩子函数

生命周期图.png


3. 钩子函数的理解

通过打断点的方式,让我们好好理解生命周期的钩子函数, 你们也可以自己复制代码进行测试好好理解Vue的钩子函数

<script>
    new Vue({
     
        el: "#app",
        data:{
     },
        methods:{
     },
        
        // 1. 在实例化之前被调用 
        beforCreate: function(){
     
            // 这个方法的时候data还没有加载,所以此方法用不到
            // 一般不会在这里处理什么事情
            alert("组件实例化之前执行的函数");
            debugger;
        }// 2. 实例化初始之后,被添加到DOM元素之前触发
        created: function(){
     
        	// 可以在这里发送ajax,初始化操作
            alert("组件实例化完毕,但页面还未显示");
        	debugger;
    	}// 3. 在元素(虚拟DOM)已经准备好被添加到DOM,但是还没有添加时触发
        beforeMount: function(){
     
            // 要保证有el,或者vm.$mount() 否则这里不会执行
            alert("组件挂载前,但页面还未显示,但是虚拟DOM已经配置");
            debugger;
    	}// 4. 会在元素创建后触发
        mounted: function(){
     
            //  如果有template属性模板,会用模板替换外部的el,只要有此属性,直接卸载外部el找中的内
            // 这将没有任何意义了
       		//  template只能有一个更元素,不能是文本节点, 
       		// 真实的dom渲染完了,可以操作dom了
            alert("组件挂载后,此方法执行后,页面显示");
            debugger;
    	}// 5. 在数据更新将要对DOM做一些修改时触发
        beforeUpdate: function(){
     
            //  当页面依赖的数据发生变化时才执行,一般用watch来替换,这个方法不好用
        	// 页面依赖的数据发生变化,数据已变化,页面还没有渲染
            alert("组件更新前,但页面还未显示,但是虚拟DOM已经配置");
            debugger;
    	}// 6. 后在DOM的更新已经完成后触发
        updated: function(){
     
            // 重新渲染页面后执行, 可以操作DOM了
            alert("组件更新后,此方法执行后,页面显示");
            debugger;
    	},
            
         // 7. 在组件即将被销毁并且从DOM上移出时触发
    	beforeDestroy: function(){
     
            //没什么意义,死了就什么都干不了了
            alert("组件销毁前");
            debugger
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员付杰

欢迎投喂, 一起共享知识的盛宴

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值