前端开发-Vue生命周期钩子

vue从创建到销毁过程中，会执行的一些回调函数

每一个生命周期钩子中的this都是指向vue实例, 生命周期钩子不能是箭头函数

vue的生命周期钩子分为四大阶段,8个方法

初始化阶段:

beforeCreate:初始化vue实例,但是还没有创建data

 export default {
      data() {
          return {
                      name:'ikun',
                      age:'18'                 
          };
      },

      //1.初始化阶段
      //beforeCreate:初始化vue实例,但是还没有创建data
    beforeCreate(){
      console.log(1);
      console.log(this);
      console.log(this.name);//undefined
    }
}

created: 创建了data,但是还没有创建挂载点

常用(最早可以操作data的钩子):页面加载渲染数据,在这个钩子里面发送ajax

created() {
      console.log(2);
      console.log(this);
      console.log(this.name);//ikun
      console.log(this.$el);
    },

挂载阶段:

beforeMount: 创建了el,但是还没有把data渲染到el上

beforeMount(){
      console.log(3);
      console.log(this);
      console.log(this.$el);//脚手架$el是undefined,html中$el是dom元素
      console.log(document.querySelector('p'));//null
      console.log(this.$refs.p);//undefined
      }

mounted: 把data渲染到el上

常用(完成初始渲染): 最早可以操作dom

mounted(){
      console.log(4);
      console.log(this);
      console.log(document.querySelector('p'));//p
      console.log(this.$refs.p);//p
    },

更新阶段:

beforeUpdate:当前data数据发生变化,但是还没有更新DOM

  beforeUpdate(){
      console.log(5);
      console.log(this);
    },

updated:完成dom更新(把变化之后的data渲染到页面)

销毁阶段:

beforeDestroy: vue开始销毁,会移除监听器,子组件,绑定事件等

有两种情况可以触发beforeDestroy钩子

1,组件自己v-if为false

2,调用组建自己$destroy()方法

 应用: 移除setInterval定时器

 beforeDestroy(){
      console.log(7);
      console.log(this);
    },

destroyed:组件完成销毁

destroyed(){
      console.log(8);
      console.log(this);
    }