Vue 中 created 和 mounted 的区别？

在 Vue 生命周期中，created 和 mounted 都是钩子函数，但它们在组件生命周期中的执行时机和作用有所不同。

1. created

created 是 Vue 实例被创建后调用的钩子函数，在这个阶段，Vue 实例的数据已经初始化，但 DOM 元素尚未生成，也未挂载到页面上。在 created 钩子中，你可以访问实例的数据、方法，进行一些数据初始化的操作，但是无法访问到 $el 属性。

export default {
  created() {
    console.log('Component created');
    console.log('Data is initialized:', this.data); // 数据已初始化
    // this.$el 仍然为 undefined
  },
};

2. mounted

mounted 是在 Vue 实例挂载到页面上之后调用的钩子函数。在这个阶段，Vue 实例的 DOM 元素已经生成，并且挂载到页面上，此时你可以访问到 $el 属性。通常在 mounted 钩子中执行需要访问 DOM 元素的操作、发送网络请求、初始化第三方库等操作。

export default {
  mounted() {
    console.log('Component mounted');
    console.log('DOM is ready:', this.$el); // 可以访问到 DOM 元素
  },
};

区别总结：

• created 在实例初始化后，数据已准备好但尚未挂载到页面前执行。
• mounted 在实例挂载到页面后执行，此时可以访问到 DOM 元素。

一般来说，如果需要进行一些初始化操作、对数据进行处理，但并不依赖于 DOM 的情况，可以使用 created 钩子；而如果需要对已生成的 DOM 元素进行操作、调用第三方库的 DOM 操作方法等，则使用 mounted 钩子更合适。