【vue学习】Vue.js中 created( ) 与 mounted( )的区别

mounted是vue中的一个钩子函数，一般在初始化页面完成后，再对dom节点进行相关操作。官方文档的解释如下，钩子函数的官方链接为 https://cn.vuejs.org/v2/api/#mounted ，生命周期函数图示链接为 https://cn.vuejs.org/v2/guide/instance.html#生命周期图示

观察代码

  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”。

 

 

分类: Vue相关 , JavaScript相关

标签: JS , Vue