标签：console log -- Child HOOK vue3 msg ref defineComponent

1、父组件

<template>
    <h2>APP父级组件</h2>
    <button @click="isShow=!isShow">切换显示</button>
    <hr/>
    <Child v-if="isShow"/>
</template>
<script lang="ts">
import Child from './components/Child.vue'
import { defineComponent, ref} from 'vue'
export default defineComponent({
  name: 'App',
  components:{
    Child
  },
  setup(){
    const isShow = ref(true)
    return{
      isShow
    }
  }
})
</script>
<style>
</style>

2、子组件

<template>
    <h2>Child子级组件</h2>
    <h4>msg:{{msg}}</h4>
    <button @click="update">更新数据</button>
</template>
<script lang="ts">
import { defineComponent, onBeforeMount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref} from 'vue'
export default defineComponent({
    name: 'Child',
    //vue2.x中的生命周期钩子
    beforeCreate(){
        console.log('2.x中的beforecreate')
    },
    created(){
        console.log('2.x中的created')
    },
    beforeMount(){
        console.log('2.x中的beforeMount')
    },
    mounted(){
        console.log('2.x中的mounted')        
    },
    beforeUpdate(){
        console.log('2.x中的beforeUpdate')        
    },
    updated(){
        console.log('2.x中的updated')        
    },
    beforeUnmount(){
        console.log('2.x中的beforeUnmount')  
    },
    unmounted(){
        console.log('2.x中的unmounted')  
    },
    // beforeDestroy(){
    //     console.log('2.x中的beforeDestroy')        
    // },
    // destroyed(){
    //     console.log('2.x中的destroyed')        
    // },

    setup(){
        console.log("3.x中的setup")
        const msg = ref('abc')
        // const update = ()=> {
        //     msg.value += '==='
        // }
        onBeforeMount(()=>{
            console.log('3.x中的onBeforeMount')
        })
        onMounted(()=>{
            console.log('3.x中的onMounted')
        })
        onBeforeUpdate(()=>{
            console.log('3.x中的onBeforeUpdate')
        })
        onUpdated(()=>{
            console.log('3.x中的onUpdated')
        })
        onUnmounted(()=>{
            console.log('3.x中的onUnmounted')
        })

        function update(){
            msg.value += '==='
        }
        return{
            msg,
            update
        }

    }

})
</script>
<style>
</style>

3、显示结果

标签：console,log,--,Child,HOOK,vue3,msg,ref,defineComponent
来源： https://blog.csdn.net/chencaw/article/details/119913370

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。