vue.js中mounted和created生命周期钩子的区别

在Vue.js中，mounted和created是两个生命周期钩子函数，用于在组件不同阶段执行代码。

1.created:

• created生命周期钩子函数在组件实例被创建之后立即执行，这时候组件的数据观测 (data observation) 和事件/生命周期钩子事件初始化都已完成。
• 适合用于执行一些初始化的操作，例如数据的获取、事件的订阅等。
• 但在这个阶段，组件还未挂载到DOM中，因此无法进行DOM操作。

created() {
  console.log('Component created');
  // 初始化数据、订阅事件等
}

2.mounted:

• mounted生命周期钩子函数在组件被挂载到DOM后执行。
• 这是执行DOM操作、调用外部API等任务的好时机，因为此时组件已经在页面上可见。
• 如果你需要访问DOM元素，最好在mounted钩子中进行。

mounted() {
  console.log('Component mounted');
  // 执行DOM操作、调用外部API等
}

总结：

• created用于在组件实例创建时进行一些初始化操作，但此时DOM尚未挂载。
• mounted用于在组件挂载到DOM后执行操作，可以访问和操作DOM元素。

例子：

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

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  created() {
    console.log('Component created');
    // 在这里可以进行数据初始化、事件订阅等
    // 但DOM尚未挂载
  },
  mounted() {
    console.log('Component mounted');
    // 在这里可以进行DOM操作，访问DOM元素等
    // 组件已挂载到DOM
  }
};
</script>

在上述例子中，created阶段用于数据的初始化，而mounted阶段可以用于执行一些需要访问DOM的操作。