在 Vue 2 里,created 是一个生命周期钩子函数,会在实例已经创建完成之后被调用,主要用于在实例初始化之后、数据观测和 event/watcher 事件配置之前执行代码。而在 Vue 3 的 <script setup> 语法糖里,不再有像 Vue 2 那样直接使用 created 钩子的写法,不过可以借助 onBeforeMount 或者 onMounted 来达到类似的效果。
替代 created 的生命周期钩子
- onBeforeMount:在组件挂载到 DOM 之前触发,和 created 比较接近,因为此时组件实例已经创建好,数据也已经初始化,但还未挂载到 DOM 上。
- onMounted:在组件挂载到 DOM 之后触发,在这个钩子中可以访问到挂载后的 DOM 元素。
-
<template> <div> <p>{{ message }}</p> </div> </template> <script setup> import { ref, onBeforeMount, onMounted } from 'vue'; // 定义响应式数据 const message = ref('Hello, Vue 3!'); // 模拟 created 钩子的功能,在组件实例创建后执行 onBeforeMount(() => { console.log('onBeforeMount: 组件实例已创建,数据已初始化,但还未挂载到 DOM'); // 这里可以进行一些数据初始化操作 message.value = 'Data initialized in onBeforeMount'; }); // 如果需要在挂载后执行操作,可以使用 onMounted onMounted(() => { console.log('onMounted: 组件已挂载到 DOM'); // 这里可以访问挂载后的 DOM 元素 const element = document.querySelector('p'); console.log('Element content:', element.textContent); }); </script>
总结
在 Vue 3 的 <script setup> 里,虽然没有直接的 created 钩子,但可以使用 onBeforeMount 来模拟 created 钩子的功能。若需要在挂载后执行操作,则可以使用 onMounted 钩子。