重磅知识，Vue3.0 生命周期（变化不止一点）

Posted 2022-12-10 欧阳呀

Vue3.0生命周期

• • 1. 与 2.x 版本生命周期相对应的组合式 API
  • 2. 新增的钩子函数

1. 与 2.x 版本生命周期相对应的组合式 API

• beforeCreate -> 使用 setup()
• created -> 使用 setup()
• beforeMount -> onBeforeMount
• mounted -> onMounted
• beforeUpdate -> onBeforeUpdate
• updated -> onUpdated
• beforeDestroy -> onBeforeUnmount
• destroyed -> onUnmounted
• errorCaptured -> onErrorCaptured

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

<script lang="ts">
import 
  ref,
  onMounted,
  onUpdated,
  onUnmounted, 
  onBeforeMount, 
  onBeforeUpdate,
  onBeforeUnmount
 from "vue"

export default 
  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')
  ,
  

  setup() 
    
    const msg = ref('abc')

    const update = () => 
      msg.value += '--'
    

    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 
      msg,
      update
    
  

</script>

2. 新增的钩子函数

• onRenderTracked：直译过来就是状态跟踪，它会跟踪页面上所有响应式变量和方法的状态，也就是我们用return返回去的值，它都会跟踪。只要页面有update的情况，它就会跟踪，然后生成一个event对象，我们通过event对象来查找程序的问题所在。
• 引用进来，在 setup() 中使用即可

onRenderTracked((event) => 
  console.log("状态跟踪组件----------->");
  console.log(event);
);

• onRenderTriggered：直译过来是状态触发，它不会跟踪每一个值，而是给你变化值的信息，并且新值和旧值都会给你明确的展示出来
• 使用的时候依然要先引入
• 在使用onRenderTriggered前，记得注释相应的onRenderTracked代码，这样看起来会直观很多。 然后把onRenderTriggered()函数，写在setup()函数里边

onRenderTriggered((event) => 
  console.log("状态触发组件--------------->");
  console.log(event);
);

属性介绍

• key：那边变量发生了变化
• newValue：更新后变量的值
• oldValue：更新前变量的值
• target ：目前页面中的响应变量和函数

1. 希望本文能对大家有所帮助，如有错误，敬请指出

2. 原创不易，还请各位客官动动发财的小手支持一波（关注、评论、点赞、收藏）
3. 拜谢各位！后续将继续奉献优质好文
4. 如果存在疑问，可以私信我