created在vue3 script setup中的写法

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