Vue生命周期中mounted和created的区别

 

这张是vue官方提供的生命周期的示例图，官网是这么说的，你不需要着急全部弄明白，你越学vue越觉得这张图有用。（大概是这意思哈）

转正题~怎么区分created和mounted呢，我们通过一段代码了解一下

<template>
  <div class="container">
      <ul>
        <li id='name'>{{name}}</li>
        <li id='age'>{{age}}</li>
        <li id='city'>{{city}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      name:'',
      age:'',
      city:'',
    }
  },
  created () {
   this.name='张三'
   this.age='24'
   this.city='北京'
   let name = document.getElementById("name")
   console.log(name.innerHTML);//第一个控制台打印
  },
  mounted:function(){
    let name = document.getElementById("name")
    console.log(name.innerHTML);//第二个控制台打印
  }
}
</script>

控制台打印很明确

明显第一个错误 为什么  因为dom都没加载出来你怎么打印innerHtml对吧~so  很明显的  created和mounted的区分就是dom加载的完成。

dom加载完成则为mounted,dom没加载就是created。