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

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

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元素。

例子:




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

你可能感兴趣的:(前端,javascript,vue.js)