Vue.js created和mounted生命周期钩子区别：DOM操作时机详解
在Vue.js开发中，生命周期钩子是控制组件初始化、渲染、更新和销毁的关键手段。很多新手容易混淆created和mounted这两个钩子，尤其是在进行DOM操作或初始化插件时遇到报错。本文通过实际代码示例，梳理created和mounted的执行时机与应用场景，帮助开发者准确选择。## 一、生命周期钩子概述
Vue实例会经历一系列初始化过程：配置data观测、编译模板、挂载实例到DOM，并在数据变化时更新DOM。每个阶段都会调用对应的生命周期钩子，方便开发者插入自定义逻辑。例如，created在实例创建完成后调用，mounted在模板渲染到DOM后调用。
## 二、created与mounted的核心区别
根据官方生命周期图示，可以归纳两点：
- created：在模板渲染成HTML之前调用。此时数据观测已完成，可以操作data，但HTML尚未生成，因此无法获取真实DOM节点。
- mounted：在模板渲染成HTML之后调用。此时DOM已挂载，可以访问和操作真实DOM元素。
## 三、典型问题：在created中操作DOM报错
下面是一个常见错误示例。定义一个组件，在created中尝试通过document.getElementById获取DOM元素，会抛出“找不到元素”的错误；而在mounted中则能正常获取。
Vue.component("demo1", {
data: function() {
return {
name: "",
age: "",
city: ""
};
},
template: "<ul><li id='name'>{{name}}</li><li>{{age}}</li><li>{{city}}</li></ul>",
created: function() {
this.name = "唐浩益";
this.age = "12";
this.city = "杭州";
var x = document.getElementById("name");// 报错：x为undefined
console.log(x.innerHTML); // 抛出TypeError
},
mounted: function() {
var x = document.getElementById("name");// 正常获取元素
console.log(x.innerHTML); // 输出“唐浩益”
}
});
new Vue({
el: "#example1"
});
运行后，页面成功渲染三个列表项，但控制台在created阶段报错：“Uncaught TypeError: Cannot read property 'innerHTML' of null”。这是因为created时模板尚未渲染到DOM，document.getElementById找不到id为“name”的元素。而mounted时模板已经挂载，可以顺利获取DOM元素并输出内容。
## 四、实际应用场景
- created：常用于初始化数据、调用接口获取页面初始数据（如axios请求），此时可以安全设置data中的属性值，因为数据会驱动后续模板渲染。
- mounted：常用于需要操作真实DOM的场景，比如初始化第三方图表库（如Chart.js、ECharts）、绑定事件、获取元素尺寸等。例如使用Chart.js时，必须在mounted中调用var ctx = document.getElementById('myChart')，否则元素不存在。
## 五、总结
- created钩子在实例创建后、模板渲染前调用，适合处理数据初始化。
- mounted钩子在模板渲染完成、DOM挂载后调用，适合执行需要DOM的操作。
- 不要在created中直接操作DOM节点，否则会因元素未渲染而报错。
- 理解两者区别，能有效避免开发中的常见坑点，提高Vue项目代码的健壮性。
Re: Vue.js created和mounted生命周期钩子区别：DOM操作时机详解
感谢楼主分享的这篇详解！例子很直观，created里拿不到DOM那个报错确实是新手常见坑，用console.log把报错展示出来特别有帮助。我补充一点小经验：有时在mounted里操作DOM如果依赖子组件渲染，可能还需要配合$nextTick或者updated，不过绝大多数情况用mounted就够了。楼主的总结很清晰，已收藏。Re: Vue.js created和mounted生命周期钩子区别：DOM操作时机详解
感谢楼主分享，这个对比太清晰了！特别是那个报错示例，简直是我刚学Vue时的翻版，在created里写document.getElementById然后一脸懵逼。看了你的总结才知道，其实created适合搞数据初始化、发请求，mounted才适合碰DOM。另外如果非要在created之后、DOM挂载前做点跟DOM相关的事，也可以用$nextTick兜一下底。总之这篇对新手很友好，收藏了！Re: Vue.js created和mounted生命周期钩子区别：DOM操作时机详解
楼主的讲解很清晰，created和mounted的区别确实是新手容易踩的坑。补充一个实用思路：在created里初始化数据（比如发请求拿到列表），然后在mounted里用$nextTick或者watch来操作更新后的DOM，这样能兼顾数据加载和DOM可用性。感谢分享，对理解Vue生命周期很有帮助。
页:
[1]