Vue 3.0 组合式API 生命周期钩子

Vue 3.0 的组合式 API 中引入了一系列新的生命周期钩子，用于在组件的不同阶段执行逻辑。这些生命周期钩子函数都可以在 setup 函数中调用，提供了更灵活和直观的组件生命周期管理。

以下是一些常用的生命周期钩子：

onBeforeCreate

在组件实例创建之前调用。此时，组件的响应式数据、方法等尚未初始化。

<script>
export default {
  setup() {
    onBeforeCreate(() => {
      console.log('Before Create');
    });
  }
};
</script>

onCreated

在组件实例创建完成后调用。此时，组件的响应式数据已初始化，但尚未挂载到 DOM。

<script>
export default {
  setup() {
    onCreated(() => {
      console.log('Created');
    });
  }
};
</script>

onBeforeMount

在组件挂载到 DOM 之前调用。此时，组件已经初始化，但尚未渲染到页面上。

<script>
export default {
  setup() {
    onBeforeMount(() => {
      console.log('Before Mount');
    });
  }
};
</script>

onMounted

在组件挂载到 DOM 后调用。此时，组件已经渲染到页面上。

<script>
export default {
  setup() {
    onMounted(() => {
      console.log('Mounted');
    });
  }
};
</script>

onBeforeUpdate

在组件更新之前调用。在此时，虚拟 DOM 已经生成，但尚未应用到实际 DOM。

<script>
export default {
  setup() {
    onBeforeUpdate(() => {
      console.log('Before Update');
    });
  }
};
</script>

onUpdated

在组件更新完成后调用。在此时，虚拟 DOM 已经应用到实际 DOM。

<script>
export default {
  setup() {
    onUpdated(() => {
      console.log('Updated');
    });
  }
};
</script>

onBeforeUnmount

在组件卸载之前调用。此时，组件实例仍然可用，但 DOM 将被卸载。

<script>
export default {
  setup() {
    onBeforeUnmount(() => {
      console.log('Before Unmount');
    });
  }
};
</script>

onUnmounted

在组件卸载后调用。此时，组件实例和 DOM 都不再可用。

<script>
export default {
  setup() {
    onUnmounted(() => {
      console.log('Unmounted');
    });
  }
};
</script>

这些生命周期钩子的引入使得在组合式 API 中更容易管理组件的生命周期逻辑。请注意，这些钩子函数是在 setup 中调用的，因此可以直接在同一个函数体内编写生命周期逻辑，提高了代码的可读性和维护性。

转载请注明出处：http://www.zyzy.cn/article/detail/519/Vue 3.0