vue.js中created和mounted的区别

Vue.component("demo1",{ 
  data:function(){ 
   return { 
    name:"", 
    age:"", 
    city:""
   } 
  }, 
  template:"
{{name}}
{{age}}
{{city}}
", 
  created:function(){ 
   this.name="唐浩益"
   this.age = "12"
   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"
 })

可以看到第一个报了错，实际是因为找不到id，getElementById(ID) 并没有找到元素，原因如下：

在created的时候，视图中的html并没有渲染出来，所以此时如果直接去操作html的dom节点，一定找不到相关的元素

而在mounted中，由于此时html已经渲染出来了，所以可以直接操作dom节点，故输出了结果“唐浩益”。

以上就是我自己总结的mounted和mounted的区别，写的比较简陋，记录下来，加深印象。

输出结果：

唐浩益

12

杭州