vue中的生命周期

生命周期(指虚拟dom的整个生命周期)
    1.创建前的生命周期--beforeCreate()
    2.创建后的生命周期--created()
        完成页面的初始赋值
        created中赋值不会触发更新生命周期

    3.挂载前的生命周期--beforeMount()
    4.挂载后的生命周期--mounted()
        可以获取到页面的节点(对节点进行处理)发送ajax请求、启动定时器、绑定自定义事件、订阅消息等
        只有数据被虚拟dom进行绑定以后的触发才会执行更新生命周期
        多次对虚拟dom绑定的数据进行修改,只会更新一次
    5.更新前的生命周期--beforeUpdata()
    6.更新后的生命周期--updated()
    7.销毁前的生命周期--beforeDestroy()
            用于清除定时器,时间解绑等
    8. 销毁后的生命周期--destroyed()

// 创建前的生命周期 -- 了解即可
        beforeCreate() {
            console.log('--------------------------- beforeCreate start')
            console.log('--------------------------- beforeCreate end')
        },

        // 创建后生命周期 -- 非常重要,以后页面的初始赋值都应该在这个生命周期完成
        // created中赋值不会触发更新生命周期
        created() {
            console.log('--------------------------- created start')
            console.log('--------------------------- created end')
        },

        // 挂载前生命周期
        beforeMount() {
            console.log('--------------------------- beforeMount start')
            console.log('--------------------------- beforeMount end')
        },

        // 挂载后生命周期 -- 非常重要,可以获取到页面的节点,如果需要对节点进行处理

        // 生命周期实际上是指虚拟dom的整个生命周期
        mounted() {
            console.log('--------------------------- mounted start')
            // 只有数据被虚拟dom进行绑定以后的触发才会执行更新生命周期
            // 多次对虚拟dom绑定的数据进行修改,只会更新一次
            console.log('--------------------------- mounted end')
        },

        // 更新前生命周期
        beforeUpdate() {
            console.log('--------------------------- beforeUpdate start')
        }
        updated() {
            console.log('--------------------------- updated start')
        }
        //销毁前的生命周期
        beforeDestroy() {
            console.log('--------------------------- beforeDestroy start')
        }
        //销毁后的生命周期
        destroyed() {
            console.log('--------------------------- destroyed start')
        }
    }

常用的生命周期钩子:
    1.created:完成页面的初始赋值,created中赋值不会触发更新生命周期
    2.mounted:发送ajax请求、启动定时器、绑定自定义事件等。
    3.beforeDestroy:清除定时器、解绑自定义事件等。
关于销毁Vue实例
    1.销毁后借助Vue开发者工具看不到任何信息。
    2.销毁后自定义事件会失效,但原生DOM事件依然有效。
    3.一般不会再beforeDestroy操作数据。因为即便操作数据。也不会再触发更新流程了-

created和mounted有什么区别?

        created不能获取dom节点,mounted能获取到dom节点 

什么时候用created、mounted?

        如果不需要对dom进行操作用created,反之用mounted;并且mounted中的数据更新会引起更新生命周期,created不会引起更新生命周期

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue生命周期函数包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed。beforeCreate是在Vue实例被创建之前调用的,此data和methods还未初始化,不能访问DOM,可以在此函数进行一些初始化的操作。created是在Vue实例被创建之后调用的,此data和methods已经初始化完成,可以访问DOM,可以在此函数请求数据、更新数据等操作。beforeMount是在Vue实例挂载到DOM之前调用的,此模板还未编译成DOM,可以在此函数进行一些准备工作。mounted是在Vue实例挂载到DOM之后调用的,此模板已经编译成DOM,可以进行DOM操作。beforeUpdate是在数据更新之前调用的,可以在此函数进行一些更新前的操作。updated是在数据更新之后调用的,可以在此函数进行一些更新后的操作。beforeDestroy是在Vue实例销毁之前调用的,可以在此函数进行一些清理工作。destroyed是在Vue实例销毁之后调用的,此Vue实例已经完全销毁,可以进行一些最终的清理工作。123 #### 引用[.reference_title] - *1* *3* [Vue生命周期函数详解](https://blog.csdn.net/wen110898/article/details/120520844)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item] - *2* [Vue 生命周期函数](https://blog.csdn.net/xyfck/article/details/126909930)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值