【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);
}
});
执行后可看到第一个命令是报错误的,第二个命令能运行
原理解释:
- created 在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图
- mounted在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。
过程解释
可以看到第一个报了错,实际是因为找不到id getElementById(ID) 并没有找到元素,原因如下:
在created的时候,视图中的html并没有渲染出来,所以此时如果直接去操作html的dom节点,一定找不到相关的元素
mounted,由于此时html已经渲染出来了,所以可以直接操作dom节点,故输出了结果“Geooo”。
作者:gtea
博客地址:https://www.cnblogs.com/gtea