vue生命周期

生命周期

1.vue有哪些生命周期函数

有8个

 beforeCreate

 created

 beforeMount

 mounted 

 beforeUpdate

 updated

 beforeDestroy

 destroyed

2.一旦进入组件或页面会执行哪些生命周期、顺序

 beforeCreate 

 created

 beforeMount

 mounted

3.添加了keep-alive后，会增加哪些生命周期

 activated、deactivated

4.在哪个阶段有$el,在哪个阶段有$data

 beforeCreate  都没有

 created  有$data,无$el（即还没有dom节点）

 beforeMount 有$data,无$el

 mounted 都有（所以到了mounted中才有dom节点）

 (补充：$el表示组件的根节点，$data表示下面代码中的data

<div id=‘app’>

  new Vue({

    el:’#app’,

    data(){

      return {

        str:’123’

      }

    }

//这里的生命周期函数的写法先后顺序不会影响生命周期函数的执行顺序

    beforeCreate(){

     console.log(‘beforeCreate’,this.$el,this.$data);

   }

 created(){

   console.log(‘created’);

}

 beforeMount(){

   console.log(‘beforeMount’);

}

 mounted(){

  console.log(‘mounted’);

}

  })

  class Vue{

     constructor(option) {

          //这里的生命周期函数的顺序决定了函数的执行顺序

         option.beforeCreate.bind(this)();//改变this的指向，最后的（）表示执行

          this.$data = options.data;// 实现在created之后有data

         option.created.bind(this)();

         option.beforeMount.bind(this)();

          this.$el = document.querySelector(options.el);//实现在beforeMount之后有el

     }

  }

5.如果加了keep-alive，第一次进入组件会执行哪些生命周期函数

 beforeCreate 

 created

 beforeMount

 mounted

 activated

（补充：keep-alive用于缓存组件）

6.如果加了keep-alive，第2次 或 第n次 进入组件会执行哪些生命周期函数

 activated

 (补充：因为这时候页面已经被缓存了）