vue入门笔记体系（二）vue生命周期

vue生命周期

这是vue生命周期的图示具体内容：

全部的生命周期钩子函数以下：

beforeCreate() {
    console.log(this, "beforeCreate");
    console.log('el:'+this.$el)
    console.log('data:'+this.$data)
    console.log('text:'+this.text)
  },
  created() {
    console.log(this, "created");
    console.log('el:'+this.$el)
    console.log('data:'+this.$data)
    console.log('text:'+this.text)
  },
  beforeMount() {
    console.log(this, "beforeMount");
    console.log('el:'+this.$el)
    console.log('data:'+this.$data)
    console.log('text:'+this.text)
  },
  mounted() {
    console.log(this, "beforeMount");
    console.log('el:'+this.$el)
    console.log('data:'+this.$data)
    console.log('text:'+this.text)
  },
  beforeUpdate() {
    console.log(this, "beforeUpdate");
  },
  updated() {
    console.log(this, "updated");
  },
  activated() {
    console.log(this, "activated");
  },
  deactivated() {
    console.log(this, "deactivated");
  },
  beforeDestroy() {
    console.log(this, "beforeDestroy");
  },
  destroyed() {
    console.log(this, "destroyed");
  },

打开控制台能够看出：

一个实例被建立后上面的这四个钩子函数按顺序执行，这四个函数在这个过程只会被调用一次；
beforeUpdate、updated是数据更新的先后执行的；
beforeDestroy、destroyed是组件销毁后执行的；
activated、deactivated是组件使用<keep-alive></keep-alive>执行的，下面针对每一个过程进行详解：

1.beforeCreate

beforeCreate前面是初始化一个vue实例，此时，Events初始化完成，但data还未完成，因此此时不要修改数据；

2.created

created时，数据已经和data属性进行绑定，这是最先进行ajax数据请求的地方。此时还未有el选项；

3.created钩子函数和beforeMount间的生命周期

created完成后，会有一个判断过程，判断对象是否有el选项。若是有的话就继续向下编译，若是没有el选项，则中止编译，也就意味着中止了生命周期，直到在该vue实例上调用vm.$mount(el)。
若是有el选项后，会再次判断是否有templete选项：
若是有的话中有template参数选项，则将其做为模板编译成render函数。
若是没有template选项，则将外部HTML做为模板编译。
能够看到template中的模板优先级要高于outer HTML的优先级。

4.beforeMount和mounted 钩子函数间的生命周期

此时已经挂载el选项，能够操做dom,至此，vue实例前四个生命周期执行完成。

5.beforeUpdate钩子函数和updated钩子函数间的生命周期

当vue发现data中的数据发生了改变，会触发对应组件的从新渲染，前后调用beforeUpdate和updated钩子函数。

6.beforeDestroy和destroyed钩子函数间的生命周期

beforeDestroy钩子函数在实例销毁以前调用。在这一步，实例仍然彻底可用。
destroyed钩子函数在Vue 实例销毁后调用。调用后，Vue 实例指示的全部东西都会解绑定，全部的事件监听器会被移除，全部的子实例也会被销毁。

另：activated：keep-alive组件激活时调用。该钩子在服务器端渲染期间不被调用。

deactivated：keep-alive组件停用时调用。该钩子在服务端渲染期间不被调用。