Vue生命周期函数

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。

生命周期图示

可以从生命周期图示中看出，虽然vue在运行过程中是将整个模板统一的编写好，统一的渲染到页面中去，看起来会降低性能，降低效率，但是他们都会 before*** 时来做处理，也就是说在内存中做处理，之后统一的将其放到浏览器上，所以这样并不会造成影响，反而在性能上有了很大的提升。

基本使用：

var vm = new Vue({
     el: '#app',
      data: {
          msg:'ok'
      },
      methods: {
          show:function () {
              console.log("执行了show方法");
          },
          //调用钩子函数destroy
          destroy(){
			 //通过this来调用，this表示全局对象
			 this.$destroy();
		 }
      },
      beforeCreate(){
          /*
              这是一个生命周期函数，表示在实例完全创建出来之前会执行他
              在执行beforeCreate时，data和methods中的数据还没有初始化
          */
          console.log(this.msg);    //undefined
      },
      created(){
          /*
              第二个生命周期函数
              在created中，data和methods都已经初始化好
              如果要调用methods中的方法或者data中的数据，最早只能在created中操作
          */
          console.log(this.msg);   //ok
          this.show();   //执行了show方法
      },
      beforeMount(){
          /*
              这是第三个生命周期函数，
              此时模板已经在内存中编辑完成了，但尚未把模板渲染到页面中
              也就是在 beforeMount 执行的时候，页面中的元素还没有真正替换过来，只是之前写的模板字符串
          */
          console.log(document.getElementById("h3").innerText);   //{{ msg }}
      },
      mounted(){
          /*
              这是第四个生命周期函数，
              表示内存中的模板已经真实的挂载带页面中去了，用户可以看到渲染好的页面
              注意：mounted是实例创建期间的最后一个生命周期函数，当执行完mounted后，表示实例别完全创建好了
              如果要操作元素的DOM操作，最早在mounted中操作
          */
          console.log(document.getElementById("h3").innerText);   //ok
      },
      //接下来的是运行中的两个事件
      beforeUpdate(){
          /*
              表示 我们的界面还没有更新，但是数据已经更新了
              也就是执行beforeUpdate时，页面中显示的数据还是旧的，此时，data中的数据已经更新了
          */
          console.log("页面中的值：" + document.getElementById("h3").innerText);   //ok
          console.log("data中msg的值" + this.msg);   //No
      },
      updated(){
          /*
              执行时，页面中的数据与data中的数据已经同步了
          */
          console.log("页面中的值：" + document.getElementById("h3").innerText);   //No
          console.log("data中msg的值" + this.msg);   //No
      },
      beforeDestroy() {
          /*
              当执行该函数时，Vue实例已经从执行阶段进入了销毁阶段，
              但是实例上所有的data和methods、过滤器、指令都还可用，此时还没有真正的销毁
          */
          //注意：当时用了定时器时，需要我们在该函数下手动的销毁定时器，否则会造成内存泄漏
      },
      destroyed(){
          /*
              当执行了该函数时，组件已经完全被销毁，组件中所有的数据、方法、指令、过滤器都已经不可用了
          */
      }
  });