vue生命周期

vue创建到销毁有八个步骤

<div id="app">
    <button @click="click">按钮</button>
    <div id="box">{{msg}}</div>
    <button id="count" @click="add">{{count}}</button>
  </div>

  <script src="vue.js"></script>
  <script>
    const vm = new Vue({
      el: "#app",
      data: {
        msg: "hhhhh",
        count: 1
      },
      methods: {
        click(){
          console.log(this.msg);
        },
        add(){
          this.count++;
        }
      }
    }
  </script>

beforeCreate
       刚实例化vm对象，这里拿不到data里面的数据和methods里面的方法，都还没创建

	beforeCreate(){
        console.log(this.msg);
    }

created
       data里面的数据和methods里面的方法都已经初始化完毕，但是还没渲染到页面上

	created(){
        console.log(this.msg);
        console.log(document.getElementById("box"));
    }

beforeMount
       此时模板已经在内存中加载好，但是还没渲染到页面上

	beforeMount(){
        console.log(document.getElementById("box"));
    }

mounted
       整个vue实例已经初始化完成，进入运行阶段

mounted(){
    console.log(document.getElementById("box"));
}

beforeUpdate
       状态更新之前执行此函数，此时data中的状态值是最新的，但是界面上显示的数据还是旧的

beforeUpdate(){
	console.log("页面变化了");
}

updated
       实例更新完毕之后调用此函数，此时data中的状态值和界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了

updated(){
	console.log("页面更新之后");
}

beforeDestroy
       实例销毁之前调用，但是实例在这里还是可以用的

beforeDestroy(){
	console.log("组件销毁之前");
}

vm.$destroy();

destroyed
       实例销毁之后调用，调用后vue实例指示的所有的东西都会解除绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
       经过测试，vm.$destroy() 之后methods里面的方法输出仍可以输出，但是不能对里面的数据做任何改变，所以相当于事件监听器被移除

destroyed(){
	console.log("组件销毁之后");
}
vm.$destroy();
console.log(document.getElementById("app"));