何时使用生命周期钩子 `created()` 和 `mounted()`?
时间: 2024-06-22 09:02:34 浏览: 173
Vue实例中生命周期created和mounted的区别详解
在Vue.js中,`created()` 和 `mounted()` 是两个关键的生命周期钩子,它们在组件实例的创建和挂载过程中分别被调用,用于执行特定的任务。
1. **created()**:
- 这个钩子在组件实例被创建(但还未挂载到DOM上)的时候执行。
- 主要用于初始化数据和执行一些异步操作,如获取API数据,因为此时DOM还未加载完毕,对DOM的操作尚未生效。
- 由于DOM还未插入文档中,所以在这个阶段你不能直接操作DOM元素。
2. **mounted()**:
- 当组件实例已挂载到DOM,并且所有的属性和数据已经绑定到元素上时,`mounted()` 钩子会被调用。
- 这是执行DOM操作、进行事件监听或初始化交互效果的理想时机,因为你有了真实的DOM节点可以操作。
- 你可以在`mounted()`钩子里添加对DOM的修改,执行动画效果,或者是绑定用户交互事件等。
相关问题:
1. Vue.js的生命周期分为几个阶段?
2. 除了`created()`和`mounted()`,还有哪些常见的生命周期钩子?
3. 如果我在`mounted()`钩子里发现数据还没有准备好,应该怎么做?
阅读全文