Vue2.x 和 Vue3.x 生命周期对比

Vue2.x 和 Vue3.x 生命周期对比

Vue3 的生命周期和 Vue2.X 生命周期对比多了两个钩子函数：

1、onRenderTriggered 跟踪虚拟 DOM 重新渲染时调用

2、onRenderTracked 当虚拟 DOM 重新渲染被触发时调用

在Vue3中，on开头的 生命周期需要 通过 import 导入，在 setup 函数中使用。

实例：

<template>
  <div>
    <h1>{{ msg }}</h1>
    <button @click="currCount.count++">count is: {{ currCount.count }}</button>
  </div>
</template>
<script>
// 先导入生命周期模块
import { reactive, onBeforeMount, onMounted, onUnmounted, onUpdated, onBeforeUpdate, onActivated, onDeactivated, defineComponent, onBeforeUnmount } from 'vue';

export default defineComponent({
  setup () {
    msg: "Hello World，this is test page"
    let currCount = reactive({ count: 0 });
    // 使用的时候需要放在setup里边
    onBeforeMount(() => {
      console.log('组件即将挂载。。。')
    })

    onMounted(() => {
      console.log('组件挂载结束。。。')
    })

    onBeforeUpdate(() => {
      console.log('组件将要更新。。。')
    })

    onUpdated(() => {
      console.log('组件更新。。。')
    })

    onBeforeUnmount(() => {
      console.log('组件即将卸载。。。')
    })

    onUnmounted(() => {
      console.log('组件卸载。。。')
    })

    onActivated(() => {
      console.log('keepAlive 组件 激活')
    })

    onDeactivated(() => {
      console.log('keepAlive 组件 非激活')
    })
    return {
      currCount
    }
  }
})
</script>

页面效果：

如上图所示，进入test 页面会打印：

点击按钮更新数据会打印：

离开当前页面返回index 会打印：