vue3的生命周期

Posted 2021-12-10 web半晨

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue3的生命周期相关的知识，希望对你有一定的参考价值。

1、父组件

<template>
	<h2>App</h2>
	<button @click="isShow=!isShow">切换</button>
	<hr>
	<Child v-if="isShow"/>
</template>

import Child from './Child.vue';

export default {
  data () {
    return {
      isShow: true
    }
  },
  components: {
    Child
  }
};

2、子组件

<template>
	<div class="about">
		<h2>msg: {{msg}}</h2>
		<hr>
		<button @click="update">更新</button>
	</div>
</template>

import {
  ref,
  onMounted,
  onUpdated,
  onUnmounted, 
  onBeforeMount, 
  onBeforeUpdate,
  onBeforeUnmount
} from "vue";

export default {
  beforeCreate () {
    console.log('2.xbeforeCreate()')
  },

  created () {
    console.log('2.xcreated')
  },

  beforeMount () {
    console.log('2.xbeforeMount')
  },

  mounted () {
    console.log('2.xmounted')
  },

  beforeUpdate () {
    console.log('2.xbeforeUpdate')
  },

  updated () {
    console.log('2.xupdated')
  },

  beforeUnmount () {
    console.log('2.xbeforeUnmount')
  },

  unmounted () {
     console.log('2.xunmounted')
  },
  
  setup() {
    const msg = ref('abc');
    const update = () => {
      msg.value += '--';
    };

    onBeforeMount(() => {
      console.log('3.0--onBeforeMount')
    });

    onMounted(() => {
      console.log('3.0--onMounted')
    });

    onBeforeUpdate(() => {
      console.log('3.0--onBeforeUpdate')
    });

    onUpdated(() => {
      console.log('3.0--onUpdated')
    });

    onBeforeUnmount(() => {
      console.log('3.0--onBeforeUnmount')
    });

    onUnmounted(() => {
      console.log('3.0--onUnmounted')
    });
    
    return {
      msg,
      update
    };
  }
};