当前位置：首页 > news >正文

created在vue3 script setup中的写法

news 来源：原创 2025/5/12 6:43:39

在 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 钩子。