文章目录
#1.Vue2.的生命周期与Vue3.的生命周期对比图#1.1白色背景图是Vue2.的生命周期，黑色背景图是Vue3.的生命周期.#2.Vue2.与Vue3.的生命周期函数的不同#2.1Vue2.与Vue3.中创建实例#2.2Vue3.中的setup()在哪一个阶段执行?#3. Vue3.中，生命周期函数的各个函数的执行解析。每个阶段都做了什么！#3.1beforecreate()#3.2created()#3.3beforeMount()#3.4mounted()#3.5beforeUpdata(),此函数在修改数据之前触发#3.6updated()此函数在修改数据之后触发#3.7beforeUnmount()此函数在销毁实例之前触发#3.8Unmounted()#4.如果这篇文章对你有帮助，请点个赞吧。有疑问或者写作有误请留言，或者直接评论。博客每天更新。#1.Vue2.的生命周期与Vue3.的生命周期对比图
#1.1白色背景图是Vue2.的生命周期，黑色背景图是Vue3.的生命周期.
我们可以发现，生命周期其实大部分都是相同的。只有很少的不同，Vue3.将Vue2.生命周期最后的销毁实例Destoryed替换成了Unmounted。对应的Vue2.中的两个钩子函数beforeDestroy和Destroy ed替换成beforeUnmount和Unmounted。创建实例的方式不同，下面我们来详细谈谈。
#2.Vue2.与Vue3.的生命周期函数的不同
#2.1Vue2.与Vue3.中创建实例
在Vue2.中:
<div id="app">{{msg}}</div>const app=new Vue({el:"#app",data(){msg:'123'}})
在Vue3.中:
<div id="app">{{msg}}</div>const app=Vue.createapp({data(){msg:'123'}).mount('#app')
通过上面两个例子，我们可以发现。几乎没什么不同。是的，个人感觉也是没什么不同。不过是挂载实例的时候，vue3.更清晰！是的，Vue3.的写法更像是promise的写法。
#2.2Vue3.中的setup()在哪一个阶段执行?
首先，在我发的两幅图片中，Vue3.中的生命周期并没有提到setup()函数，那setup函数到底是什么时候执行的呢?
先说结论: setup是组合api的入口函数。setup()函数在beforecreate()函数执行之前,已经执行。也就是说在setup函数中我们不能够对data和methods进行操作。
代码分析:
<div id="app">{{msg}}</div>const app=Vue.createapp({data(){msg:'123'},methods:{setup(){consolo.log(this.msg) //打印结果undefined}}).mount('#app')
从以上结果中，可以得到结论！
#3. Vue3.中，生命周期函数的各个函数的执行解析。每个阶段都做了什么！
#3.1beforecreate()
实例刚被创建出来，并没有初始化好data和methods，也就是说无法进行数据和方法的使用
#3.2created()
已经进行data数据和methods方法的初始化，但是此时没没有进行编译模板。也就是说此时是最早可以操作data和methods的时候。
#3.3beforeMount()
在created()和beforeMount()之间，已经进行了data数据的渲染,生成了html（此时还是在内存中并没有渲染到真实的页面上。无法在页面看到）
在执行到beforeMount()时，挂载开始之前被调用，相关的render函数首次被调用（虚拟DOM），实例已完成以下的配置： 编译模板，把data里面的数据和模板生成html，完成了el和data 初始化。没有挂载到浏览器。注意此时还没有挂载到真实的页面上，此时还是不能在浏览器看到真实的数据。
#3.4mounted()
已经将编译好的模板挂载到浏览器，此时可以看到真实的数据。
#3.5beforeUpdata(),此函数在修改数据之前触发
发生在虚拟DOM重新渲染和打补丁之前，可以在该钩子中进一步地更改状态，不会触发附加地重渲染过程。此时data中的数据已经是新的，但是界面上的data数据是旧的。
#3.6updated()此函数在修改数据之后触发
此时界面上的数据变成最新修改的值。
在由于数据更改导致地虚拟DOM重新渲染和打补丁只会调用，调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作，然后在大多是情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环，该钩子在服务器端渲染期间不被调用
#3.7beforeUnmount()此函数在销毁实例之前触发
在这个函数中，在这一步，实例仍然完全可用。
我们可以做一些操作。比如：一般在这一步做一些重置的操作，比如清除掉组件中的定时器 和 监听的dom事件
#3.8Unmounted()
在实例销毁之后调用，调用后，所以的事件监听器会被移出，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用.data和methods进行解绑。
#4.如果这篇文章对你有帮助，请点个赞吧。有疑问或者写作有误请留言，或者直接评论。博客每天更新。
如果觉得《Vue2.和Vue3.生命周期的区别 对比。 详解生命周期中的每个钩子函数 setup》对你有帮助，请点赞、收藏，并留下你的观点哦！
