首页 > 其他分享 >Vue3生命周期

Vue3生命周期

时间:2022-12-27 21:23:21浏览次数:41  
标签:生命周期 console log 钩子 onBeforeMount --- Vue3

Vue3.0中可以继续使用Vue2.x中的生命周期钩子,但有有两个被更名:

  • beforeDestroy改名为 beforeUnmount
  • destroyed改名为 unmounted

Vue3.0也提供了 Composition API 形式的生命周期钩子,与Vue2.x中钩子对应关系如下:

    • beforeCreate===>setup()
    • created=======>setup()
    • beforeMount ===>onBeforeMount
    • mounted=======>onMounted
    • beforeUpdate===>onBeforeUpdate
    • updated =======>onUpdated
    • beforeUnmount ==>onBeforeUnmount
    • unmounted =====>onUnmounted
<template>
    <h2>当前求和为:{{sum}}</h2>
    <button @click="sum++">点我+1</button>
</template>

<script>
    import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'
    export default {
        name: 'Demo',
        
        setup(){
            console.log('---setup---')
            //数据
            let sum = ref(0)

            //通过组合式API的形式去使用生命周期钩子
            onBeforeMount(()=>{
                console.log('---onBeforeMount---')
            })
            onMounted(()=>{
                console.log('---onMounted---')
            })
            onBeforeUpdate(()=>{
                console.log('---onBeforeUpdate---')
            })
            onUpdated(()=>{
                console.log('---onUpdated---')
            })
            onBeforeUnmount(()=>{
                console.log('---onBeforeUnmount---')
            })
            onUnmounted(()=>{
                console.log('---onUnmounted---')
            })

            //返回一个对象(常用)
            return {sum}
        },
        //通过配置项的形式使用生命周期钩子
        //#region 
        beforeCreate() {
            console.log('---beforeCreate---')
        },
        created() {
            console.log('---created---')
        },
        beforeMount() {
            console.log('---beforeMount---')
        },
        mounted() {
            console.log('---mounted---')
        },
        beforeUpdate(){
            console.log('---beforeUpdate---')
        },
        updated() {
            console.log('---updated---')
        },
        beforeUnmount() {
            console.log('---beforeUnmount---')
        },
        unmounted() {
            console.log('---unmounted---')
        },
        //#endregion
    }
</script>

 

  

标签:生命周期,console,log,钩子,onBeforeMount,---,Vue3
From: https://www.cnblogs.com/anjingdian/p/17009028.html

相关文章

  • Vue3之watchEffect函数
    watchEffect函数watch的套路是:既要指明监视的属性,也要指明监视的回调。watchEffect的套路是:不用指明监视哪个属性,监视的回调中用到哪个属性,那就监视哪个属性。wat......
  • vue3 项目中设置组件name
    在开发vue3项目时,如果使用的是setup语法,那么想要给组件设置name属性。可以通过下面的两种形式。在组件中额外创建一个script脚本,在其中采用选项式api的写法,设置name属性......
  • Vue3 企业级优雅实战 - 组件库框架 - 9 实现组件库 cli - 上
    上文搭建了组件库cli的基础架子,实现了创建组件时的用户交互,但遗留了cli/src/command/create-component.ts中的createNewComponent函数,该函数要实现的功能就是上文开......
  • vue3传值
    https://blog.csdn.net/H_114/article/details/122420402?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERat......
  • 贯穿汽车用户全生命周期,火山引擎数智平台能帮车企做这些事!
    更多技术交流、求职机会,欢迎关注字节跳动数据平台微信公众号,并进入官方交流群汽车行业的数字化,远不止是从传统汽车产品到新能源智能科技产品的转型。在营销领域,汽车企......
  • 【Vue2.0与Vue3.0区别总结】
    vue2.0和vue3.0区别结构部分程序主入口文件main.jsvue2.0vue3.0-暴露出createApp方法组件语法部分(vue3.0主要针对api的优化,vue3.0兼容vue2.0写法)vue3.0使用​​组......
  • Vue3之watch
     watch监视ref函数<template><h2>当前求和为:{{sum}}</h2><button@click="sum++">点我+1</button><hr><h2>当前的信息为:{{msg}}</h2><button......
  • Vue3之computed计算属性
    计算属性  computed函数与Vue2.x中computed配置功能一致写法<template><h1>一个人的信息</h1>姓:<inputtype="text"v-model="person.firstName">......
  • vue3_05使用reactive来处理复杂数据
    vue3中除了提供了ref函数以为还提供了reactive函数来操作数据,一般情况下我们使用ref函数来操作简单类型数据,reactive函数来操作复杂类型数据<template><div>{{objRet.na......
  • vue3_03ref操作复杂类型
    ref也可以将复杂类型的数据转换为响应式数据,使用方法和处理简单类型数据一样leta=ref(复杂类型数据)a.value.xxx<template><p>{{objref.num}}</p><button@c......