【已解决】 Vue实例中生命周期created和mounted的区别详解
最佳答案 2025-01-04 00:00
在Vue.js中，生命周期钩子函数是用于在Vue实例的不同阶段执行代码的函数。created和mounted是两个常用的生命周期钩子，它们之间有一些显著的区别。
created?钩子
- 时机:?created钩子在实例被创建之后立即调用。在这个阶段，Vue实例已经完成了数据观测（data observation），也就是说，数据已经可以被访问和修改。
- 特点:
- 在created阶段，模板还没有被编译，DOM还没有被挂载（即还没有生成对应的DOM元素）。
- 适合进行数据初始化、获取数据、设置数据属性等操作。
- 不能进行与DOM相关的操作，因为DOM还没有被渲染。
- 可以访问实例的data、computed、methods等属性。
mounted?钩子
- 时机:?mounted钩子在模板被编译并挂载到DOM上之后调用。在这个阶段，Vue实例已经将模板渲染成了真实的DOM节点。
- 特点:
- 在mounted阶段，DOM已经被渲染完成，可以进行与DOM相关的操作。
- 适合进行DOM操作、访问DOM元素、初始化与DOM相关的第三方库等。
- 通常用于需要在DOM加载完成后执行的任务。
使用场景对比
created:
- 适合初始化数据，例如从服务器获取初始数据。
- 设置定时器或初始化一些不依赖DOM的插件。
mounted:
- 适合操作DOM元素，例如获取元素的尺寸、绑定事件监听器。
- 初始化依赖于DOM的插件或库。
示例代码
new Vue({ data() { return { message: 'Hello, Vue!' }; }, created() { console.log('Created: ', this.message); // 可以访问数据属性 // 不能进行DOM操作 }, mounted() { console.log('Mounted: ', this.$el); // 可以访问DOM元素 // 可以进行DOM操作 } });
总结
- 在created钩子中，实例已经创建，可以访问和修改数据，但不能进行DOM操作。
- 在mounted钩子中，DOM已经准备就绪，可以进行各种DOM操作。
感谢您的支持，请随意打赏。您的赞赏将鼓励我继续创作！
Excel搬运工
- Excel大神
扫码关注微信公众号
