在 Vue.js 中，created 和 mounted 是组件生命周期钩子的两个不同阶段：

  1. created：

    • created 钩子在组件实例被创建之后被调用。
    • 此时，组件的数据 data 已经被设置，methods 方法也已经可以使用，但组件模板尚未渲染，$el 属性目前不可见。
    • 这个阶段是初始化组件数据的好时机，比如从后端API获取数据。
    • 因为它在模板渲染之前被调用，所以不能在 created 钩子中直接访问 $el 属性或者使用 nextTick。

  2. mounted：

    • mounted 钩子在组件模板被渲染成 HTML 之后被调用。
    • 此时，组件已经创建了相应的 DOM 元素，可以执行 DOM 操作或者执行依赖于 DOM 的操作，比如使用 this.$refs 访问子组件或者 DOM 元素。
    • 如果你有需要 DOM 的操作或者执行某些副作用（例如，基于真实DOM的测量或动画），那么应该在这个阶段进行。

使用场景：

  • 如果你需要在组件创建时就获取数据，比如从服务器获取数据，并且不依赖于 DOM，那么应该在 created 钩子中进行。
  • 如果你需要访问或操作 DOM，比如初始化第三方库，或者需要 DOM 元素来计算位置和尺寸，那么应该在 mounted 钩子中进行。

示例：

export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    // 组件创建后立即获取数据
    this.fetchData();
  },
  mounted() {
    // 组件挂载后执行的操作
    console.log('Component is mounted.');
    this.doSomethingWithDOM();
  },
  methods: {
    fetchData() {
      // 获取数据的逻辑
      axios.get('/api/data').then(response => {
        this.message = response.data;
      });
    },
    doSomethingWithDOM() {
      // 需要 DOM 的操作
      console.log(this.$el); // 可以访问组件的根元素
    }
  }
};

在 Vue 3 中，生命周期钩子的工作方式与 Vue 2 类似，但引入了 Composition API 后，你可以使用 onMounted 和 onCreated 函数来替代 mounted 和 created 钩子。