Vue3中的生命周期

1.什么是生命周期

    其实我们通过vue.js框架来开发页面的时候，每一个页面并是不我们所想的那样，通过终端npm run serve运行成功后，在点击链接然后就可以看到所书写的页面了。其实每一个展示在用户视野中的页面都大致经过了如下四个过程，创建 - 挂在 - 更新 - 销毁(卸载)。每一个过程中所执行的相关流程各不相同，就如同人的生老病死一样， 销毁后的组件就无法访问。这就是生命周期

2.vue3和vue2的生命周期函数的不同

虽然vue3是vue2的升级版，但对于生命周期的使用上，vue3还是几乎保留了vue2中的大部分的生命周期函数，就只是不再使用销毁这一说法，而是使用卸载来代替销毁，且卸载的钩子也变化为了了如下的一组钩子，beforeUnmount和unmounted。但与之不同的是，在vue3中存在着两种生命周期函数，一种是组合式API，另一种是选项式API，那么这这两种写法到底有什么不同呢？

3.选项式Api

  选项式Api的写法和Vue2中的生命周期的写法一模一样，如下所示

<template>
  <div>{{ number.count }}</div>
  <button @click="AddNumber">点我 +1</button>
</template>

<script>
// import { reactive, onMounted, onBeforeMount, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'
import { reactive } from 'vue'
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'showView',
  setup() {
    const number = reactive({
      count: 0,
      countTime: null
    })
    const AddNumber = function () {
      number.count++
    }
    return {
      number,
      AddNumber
    }
  },

  beforeCreate() {
    console.log('beforeCreate')
  },
  created() {
    console.log('beforeCreate')
  },
  beforeMount() {
    console.log('我是onbeforeMount', this.number.count);
  },
  mounted() {
    this.number.countTime = setInterval(() => {
      console.log(this.number.count);
      this.number.count++
    }, 1000)
    console.log('我是onMounted钩子', this.number.count);
  },
  beforeUpdate() {
    console.log('我是onBeforeUpdate', this.number.count);
  },
  updated() {
    console.log('我是onUpdated', this.number.count);
  },
  beforeUnmount() {
    clearInterval(this.number.countTime)
    console.log('我是页面销毁前,将计时器销毁');
  },
  unmounted() {
    console.log('我是页面销毁时');
  }
}
</script>

<style>

</style>

 

     从上面的结果中我们可以看出，在页面挂在的时候也进行了四个流程，也都触发了前4个钩子，beforeCreate,created,beforeMount,mounted。

    那么其实在beforeCreate中我们还无法访问到相关数据和方法此时的数据代理和监测还没有开始，只是对生命周期和时间进行了初始化，因此这是一个重要的时间节点。在这个生命周期中我们无法通过vue实例访问到data中的数据。那你肯定又会说，上面不是打印了this，this也指向了vue的实例了嘛？不是可以访问到相关数据吗？但实际上这里还暗藏了一个小的知识点。那就是setup和data的区别。

    在vue3中我们经常把所有的响应式数据，方法，计算属性，watch放在setup里面。到底是为什么呢？是规定吗，还是我们可以放到其他地方？其实在setup里面的所有东西，vue3都默认是在created这一个钩子阶段之前全部创建了。如下，我们在setup中打印一句，然后再查看中，我们会发现，setup执行竟让要比beforeCreate还要早？难道这是一个新的生命周期函数？其实setup确实是属于生命周期函数，但不是一个新的生命周期函数，而是组合式Api，且在vue3中的组合式Api的加载会比选项式Api的加载要快。那就是为什么我们在选项式Api中的beforeCreate里面可以访问到相关数据和方法的原因。

 4.选项式Api的运用

<template>
  <div>{{ number.count }}</div>
  <button @click="AddNumber">点我 +1</button>
</template>

<script>
// import { reactive, onMounted, onBeforeMount, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'
import { reactive } from 'vue'
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'showView',
  setup() {
    const number = reactive({
      count: 0,
      countTime: null
    })
    console.log('我是setup创建的东西');
    const AddNumber = function () {
      number.count++
    }
    return {
      number,
      AddNumber
    }
  },

  beforeCreate() {
    console.log('beforeCreate')
    console.log(this.number)
  },
  created() {
    console.log('Create')
    console.log(this.number)
    // debugger;
  },
  beforeMount() {
    console.log('我是onbeforeMount', this.number.count);
  },
  mounted() {
    this.number.countTime = setInterval(() => {
      console.log(this.number.count);
      this.number.count++
    }, 1000)
    console.log('我是onMounted钩子', this.number.count);
  },
  beforeUpdate() {
    console.log('我是onBeforeUpdate', this.number.count);
  },
  updated() {
    console.log('我是onUpdated', this.number.count);
  },
  beforeUnmount() {
    clearInterval(this.number.countTime)
    console.log('我是页面销毁前,将计时器销毁');
  },
  unmounted() {
    console.log('我是页面销毁时');
  }
}
</script>

<style>

</style>

在这个例子中我们就将生命周期的所有用途大致的使用了一遍，原理是，当页面加载的时候启动一个计时器，然后页面销毁的时候关闭计时器，也可以经常用来监听后端是否响应某些数据把，就类似于页面挂在就一直发请求，但销毁后就停止请求。

4.总结

   本文是一些关于vue生命周期的内容，由于vue2和vue3的生命周期变化并不算太大，最大的改动就是vue3的生命周期更加智能，准备工作更加充分，整个流程更加简洁易懂。因此在分析vue生命流程时多采用的是对vue2的分析过渡到vue3，指出vue3改动的地方。总的来说每个步骤分析都尽可能详细易懂。 且后续会继续更新其中每个周期的常用用法以及页面挂在的详细信息