1. created

 //组件创建之后 🍉
  created() {
      // 可以操作数据，发送ajax请求，并且可以实现
      // vue对页面的影响 应用：发送ajax请求
      console.log('组件创建后：'+this.msg);   //哈哈哈
 }

2. mounted

//装载数据到DOM之后 🥭
 mounted() {
      // 可以操作DOM
      console.log('DOM装载后：'+document.getElementById('app'));  //<div id="app"><div id="test"></div></div>
 }

 mounted() {
   	// 可以通过ref属性获取按钮的DOM对象 🍓
   	console.log(this.$refs.btn);   //<button>按钮</button>
   	console.log(this.$refs.test);  //给组件绑定ref属性，得到组件的Vue对象 	VueComponent {_uid: 2, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
 }

4. this.$nextTick

如果要获取数据更新导致的DOM更新后的新DOM对象需要使用$nextTick回调
假如项目里有一个模态框是用v-i或v-showf控制显示隐藏的，当模态框出现后需要聚焦到input框

mounted() {
    this.isShow = true;
    // this.$refs.fos.focus();  //先更新DOM，然后直接这样写获取不了焦点。
    // 因为实现相应式并不是数据发生变化后DOM立刻发生变化，
    // 而是在$nextTick下次DOM更新结束之后的延迟回调，在回调函数中获取数据更新之后的DOM
    this.$nextTick(function () {
        this.$refs.fos.focus();
    })
}