vue2与vue3的区别

239 阅读2分钟

一、生命周期的区别

1.vue2的生命周期图 vue3.jpg 2.vue3的生命周期图

vue2.png

二、vue2与vue3生命周期相对应得API

beforeCreate -> 使用 setup()

created -> 使用 setup()

beforeMount -> onBeforeMount

mounted -> onMounted

beforeUpdate -> onBeforeUpdate

updated -> onUpdated

beforeDestroy -> onBeforeUnmount

destroyed -> onUnmounted

errorCaptured -> onErrorCaptured

三、vue2与vue3创建实例

1、vue2创建实例 屏幕截图 2022-04-06 103743.png 2、vue3创建实例

setup是组合api的入口函数。setup()函数在beforecreate()函数执行之前,已经执行。也就是说在setup函数中我们不能够对data和methods进行操作。 image.png 四、 Vue3.中,生命周期函数执行

1.beforecreate()

实例刚被创建出来,并没有初始化好data和methods,也就是说无法进行数据和方法的使用

2.created()

已经进行data数据和methods方法的初始化,但是此时没有进行编译模板。也就是说此时是最早可以操作data和methods的时候。

3.beforeMount()

created()和beforeMount()之间,已经进行了data数据的渲染,生成了html(此时还是在内存中并没有渲染到真实的页面上。无法在页面看到)

在执行到beforeMount()时,挂载开始之前被调用,相关的render函数首次被调用(虚拟DOM),实例已完成以下的配置: 编译模板,把data里面的数据和模板生成html,完成了el和data 初始化。没有挂载到浏览器。注意此时还没有挂载到真实的页面上,此时还是不能在浏览器看到真实的数据。

4.mounted()

已经将编译好的模板挂载到浏览器,此时可以看到真实的数据。

5.beforeUpdata()

此函数在修改数据之前触发
发生在虚拟DOM重新渲染和打补丁之前,可以在该钩子中进一步地更改状态,不会触发附加地重渲染过程。此时data中的数据已经是新的,但是界面上的data数据是旧的。

6.updated()

此函数在修改数据之后触发
此时界面上的数据变成最新修改的值。
在由于数据更改导致地虚拟DOM重新渲染和打补丁只会调用,调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作,然后在大多是情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环,该钩子在服务器端渲染期间不被调用

7.beforeUnmount()

此函数在销毁实例之前触发
在这个函数中,在这一步,实例仍然完全可用。
我们可以做一些操作。比如:一般在这一步做一些重置的操作,比如清除掉组件中的定时器 和 监听的dom事件

8.Unmounted()

在实例销毁之后调用,调用后,所以的事件监听器会被移出,所有的子实例也会被销毁,该钩子在服务器端渲染期间不被调用.data和methods进行解绑。

五、代码显示生命周期

NYS~0{P8A1HGLGYXOX2$$U6.png