Vue3的生命周期

发布时间:2024-01-23 09:30

vue2的生命周期图

 

\"vue2的生命周期图\"

vue3的生命周期图

\"\"

vue3中可以继续使用vue2.x中的生命周期钩子,但是有两个被改名:

beforeDestroy改名为beforeUnmount

destroyed改名为unmounted

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

beforeCreate =====setup()

created =========setup()

beforeMount=====onBeforeMount

mounted========onMounted

beforeUpdate====onBeforeUpdate

updated========onUpdated

beforeUnmount==onBeforeUnmount

unmounted=====onUnmounted

<script>
import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'
export default {
  name: 'Demo',
  setup() {
    //数据
    let sum = ref(0)
    //通过配置项的形式使用生命周期钩子
    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,
    }
  }
}
</script>

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号