vue-cli vue mounted created 每次 调用_vue-生命周期钩子函数

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

1.生命周期函数

1. beforeCreate 组件没有创建之前触发
2. created 组件创建完成没有渲染时触发
3. beforeMount 组件渲染之前触发
4. mounted 组件渲染之后触发
5. beforeUpdate data改变，组件更新前触发
6. updated data改变，组件更新后触发
7. beforeDestroy 组件销毁之前触发
8. destroyed 组件销毁之后触发

2.生命周期图示

3.生命周期函数基本用法

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(){
          /*
              第三个生命周期函数
              已经在内存中编辑完成，但没有渲染到页面中
          */
          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(){
          /*
               第八个生命周期函数
              当执行了该函数时，组件已经完全被销毁，组件中所有的数据、方法、指令、过滤器都已经不可用
          */
      }
  });