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

欢迎一起讨论
零一的世界博客：https://vtzw.com/
什么是生命周期？ 用浅显的言语来讲，就是Vue中实例或许组件从建立到祛除中心经由的一系列历程。虽然不太严谨，然则也基本上能够明白。 经由过程一系列实践，如今把一切碰到的问题整顿一遍，本日纪录一下created和mounted的区分：

观察代码

 data:(){ 
   return { 
    name:"", 
    age:"", 
    city:""
   } 
  }, 
  
  created :(){ 
   this.name= "Vtzw"
   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节点，故输出了结果“Vtzw”。