在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实例被成功创建和挂载后才会执行,如果中间发生了错误或中止,那么这两个函数也不会执行。在使用这两个函数时,要避免过多的依赖全局状态或其他模块,以保证逻辑的灵活性和可重用性。

Logo

前往低代码交流专区

更多推荐