Vue.js中 created( ) 与 mounted( )的区别

欢迎一起讨论

Geooo的个人博客：https://geooo.gitee.io/geoooblog/

观察代码

  data:(){ 
   return { 
    name:"", 
    age:"", 
    city:""
   } 
  }, 
  
  created :(){ 
   this.name= "Geooo"
   this.age = "21"
   this.city ="东莞"
   var x = document.getElementById("name")//第一个命令台错误 
   console.log(x.innerHTML); 
  }, 
  
  mounted: (){ 
   var x = document.getElementById("name")//第二个命令台输出的结果
   console.log(x.innerHTML); 
  } 
 }); 
 

执行后可看到第一个命令是报错误的，第二个命令能运行

原理解释：

1. created 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
2. mounted在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

过程解释

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

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

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