vue生命周期

Vue2版本中的生命周期。

    常用生命周期按顺序排列如下：

        1.    beforeCreate(){ …}

        2.    created(){ … }

        3.    beforeMount(){ …}

        4.    mounted(){ … }

        5.    beforeUpdate(){ …}

        6.    updated(){ … }

        7.    beforeDestory(){… }

        8.    destroyed(){ … }

 开头的beforeCreate和结尾的destroyed象征着Vue页面的进入和退出，在这两个瞬间，Vue对象及Vue对象中的一切都访问不到。created象征着Vue对象及Vue对象中除el以外的一切都已就绪，可以访问。beforeMount的时候，在页面中会显示Vue原先的样子，比如Vue的代码，beforeMount时还没有显示在页面上的html，还是原来的样子，显然这样显示在页面上是不行的，于是乎，Vue源码中就把这段代码解析为新的html，把#app里面的html换成新的html，那Vue怎么知道我是要把新的html拿给#app呢？这时，el派上了用场，Vue源码中就会拿到el，Vue发现el是#app，就把document.querySelector(‘#app’).innerHTML换成新的html

beforeMount时还没有显示在页面上的html。

mounted时，页面已经变成新的html。

beforeUpdate是在页面上发生变化之前执行。何为页面上发生变化：比如Vue实例中的data里面有个num变量，是一个数字，然后我在#app里面使用 {{ num }} 把他展示在页面上；那么当我们改变这个数字的时候，页面上显示的数字也会随之改变，我们就把----页面上显示的数字随之改变----的这一个过程称作 页面上发生变化。

页面上发生变化之前会调用beforeUpdate；页面上更新完毕(页面发生改变之后)时，调用updated。

beforeDestroy与我们文章一开始介绍的destroyed中都是在页面退出时调用，都可以使用JavaScript，区别是：beforeDestroy时还能访问到Vue实例中的东西，destroyed时已经无法访问到Vue中的东西。

Vue3中的生命周期

1、setup() : 开始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 method

2、onBeforeMount() : 组件挂载到节点上之前执行的函数；

3、onMounted() : 组件挂载完成后执行的函数；

4、onBeforeUpdate(): 组件更新之前执行的函数；

5、onUpdated(): 组件更新完成之后执行的函数；

6、onBeforeUnmount(): 组件卸载之前执行的函数；

7、onUnmounted(): 组件卸载完成后执行的函数；

8、onActivated(): 被包含在 <keep-alive> 中的组件，会多出两个生命周期钩子函数，被激活时执行；

9、onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行；

10、onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数。

 

Vue2.X和Vue3.X对比

vue2 -------> vue3

beforeCreate --------> setup(()=>{})
created --------> setup(()=>{})
beforeMount --------> onBeforeMount(()=>{})
mounted --------> onMounted(()=>{})
beforeUpdate --------> onBeforeUpdate(()=>{})
updated --------> onUpdated(()=>{})
destroyed --------> onBeforeUnmount(()=>{})
activated --------> onActivated(()=>{})
deactivated --------> onDeactivated(()=>{})
errorCaptured --------> onErrorCaptured(()=>{})
————————————————

总结： Vue2和Vue3钩子变化不大，删除了beforeCreate 、created  两个钩子使用setup()钩子来替代。