vue3 created

// Vue 3 中的 created 钩子示例

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { ref, onMounted, onBeforeMount } from 'vue';

export default {
  name: 'CreatedHookExample',
  setup() {
    // 定义一个响应式变量
    const message = ref('Hello Vue 3!');

    // 使用 created 钩子（在 Vue 3 中可以通过 setup 函数来替代）
    // 在组件实例创建完成后立即执行
    console.log('Component is created!');

    // 模拟异步数据获取
    setTimeout(() => {
      message.value = 'Data fetched!';
    }, 1000);

    return {
      message,
    };
  },
};
</script>

<style scoped>
/* 样式部分可以根据需要添加 */
</style>

解释说明：

• setup 函数：Vue 3 引入了 Composition API，setup 函数可以替代 Vue 2 中的生命周期钩子。它在组件实例创建之前执行，并且可以返回响应式状态和其他属性。
• ref：用于定义响应式变量。在这个例子中，message 是一个响应式字符串。
• console.log：模拟 created 钩子的行为，在组件实例创建后立即输出一条消息。
• setTimeout：模拟异步操作（例如从服务器获取数据），并在 1 秒后更新 message 的值。

如果你希望更严格地使用 Vue 2 风格的 created 钩子，你可以这样做：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'CreatedHookExample',
  data() {
    return {
      message: 'Hello Vue 3!',
    };
  },
  created() {
    // 这里是 created 钩子
    console.log('Component is created!');

    // 模拟异步数据获取
    setTimeout(() => {
      this.message = 'Data fetched!';
    }, 1000);
  },
};
</script>

<style scoped>
/* 样式部分可以根据需要添加 */
</style>

这段代码展示了如何在 Vue 3 中使用传统的 created 钩子。