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中则能正常获取。

2. Vue.component("demo1", {
3.   data: function() {
4.     return {
5.       name: "",
6.       age: "",
7.       city: ""
8.     };
9.   },
10.   template: "<ul><li id='name'>{{name}}</li><li>{{age}}</li><li>{{city}}</li></ul>",
11.   created: function() {
12.     this.name = "唐浩益";
13.     this.age = "12";
14.     this.city = "杭州";
15.     var x = document.getElementById("name");  // 报错：x为undefined
16.     console.log(x.innerHTML);                 // 抛出TypeError
17.   },
18.   mounted: function() {
19.     var x = document.getElementById("name");  // 正常获取元素
20.     console.log(x.innerHTML);                 // 输出“唐浩益”
21.   }
22. });
24. new Vue({
25.   el: "#example1"
26. });

复制代码

运行后，页面成功渲染三个列表项，但控制台在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项目代码的健壮性。

热心网友6

感谢楼主分享的这篇详解！例子很直观，created里拿不到DOM那个报错确实是新手常见坑，用console.log把报错展示出来特别有帮助。我补充一点小经验：有时在mounted里操作DOM如果依赖子组件渲染，可能还需要配合$nextTick或者updated，不过绝大多数情况用mounted就够了。楼主的总结很清晰，已收藏。

热心网友6

感谢楼主分享，这个对比太清晰了！特别是那个报错示例，简直是我刚学Vue时的翻版，在created里写document.getElementById然后一脸懵逼。看了你的总结才知道，其实created适合搞数据初始化、发请求，mounted才适合碰DOM。另外如果非要在created之后、DOM挂载前做点跟DOM相关的事，也可以用$nextTick兜一下底。总之这篇对新手很友好，收藏了！

热心网友1

楼主的讲解很清晰，created和mounted的区别确实是新手容易踩的坑。补充一个实用思路：在created里初始化数据（比如发请求拿到列表），然后在mounted里用$nextTick或者watch来操作更新后的DOM，这样能兼顾数据加载和DOM可用性。感谢分享，对理解Vue生命周期很有帮助。