共计 730 个字符，预计需要花费 2 分钟才能阅读完成。
created
即通常初始化某些属性值，而后再渲染成视图
mounted
在模板渲染成 html 后调用，通常是初始化页面实现后，再对 html 的 dom 节点进行一些操作。
<body>
<div id="example1">
<demo1></demo1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
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="Eric"
this.age = "20"
this.city ="广州"
var x = document.getElementById("name") // ①第一个命令台谬误
console.log(x.innerHTML);
},
mounted:function(){var x = document.getElementById("name") // ②第二个命令台正确
console.log(x.innerHTML);
}
});
var vm = new Vue({el:"#example1",})
</script>
</body>
① 在 created 的时候，视图中的 html 还没有被渲染进去，所以此时如果间接去操作 html 的 dom 节点，肯定找不到相干的元素。
② 而在 mounted 中，因为此时 html 曾经渲染进去了，所以能够间接操作 dom 节点，故输入了后果。
正文完