created()和mounted()的区别及其用法

在Vue.js中，created()和mounted()是两个常见的生命周期钩子函数，它们分别用于在Vue实例被创建之后和挂载到DOM之后执行一些逻辑。

具体区别和用法如下：

created()：

在Vue实例被创建之后立即执行。在这个阶段，Vue实例的数据观测和事件配置已完成，但尚未挂载到DOM上。通常在这个阶段执行一些数据初始化、事件监听、异步请求等逻辑，但不涉及DOM操作。

mounted()：

在Vue实例挂载到DOM之后执行。在这个阶段，Vue实例已经完成了数据观测、编译渲染、创建虚拟DOM和真实DOM等所有过程，可以进行DOM操作。通常在这个阶段执行一些需要依赖DOM元素的逻辑，如获取元素尺寸、绑定事件、设置定时器等。

例子：

<script>
export default {
  data() {
    return {
      message: 'Hello, World!'
    }
  },
  created() {
    console.log('created:', this.message); // 'created: Hello, World!'
    // 执行一些数据初始化、事件监听等逻辑
  },
  mounted() {
    console.log('mounted:', this.$el.textContent); // 'mounted: Hello, World!'
    // 执行一些需要依赖DOM元素的逻辑，如获取元素尺寸、绑定事件、设置定时器等
  }
}
</script>

总结

需要注意的是，created()和mounted()只有在Vue实例被成功创建和挂载后才会执行，如果中间发生了错误或中止，那么这两个函数也不会执行。在使用这两个函数时，要避免过多的依赖全局状态或其他模块，以保证逻辑的灵活性和可重用性。