Vue3.0生命周期 VS Vue2.0生命周期

一、生命周期是什么?

Vue实例从创建到销毁的过程,就是Vue实例的生命周期。

这个过程包括数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。

二、生命周期有哪些?

生命周期主要包括创建阶段挂载阶段运行阶段销毁阶段。每一个阶段包含两个生命周期钩子函数。

生命周期函数(也叫钩子函数):某一个时刻自动执行的函数。

image.png

总结: Vue3相比原有的生命周期,基本都是存在的,Vue3只不过有了新的命名:beforeDestroy变成了beforeUnmounted;destroy变成了unmounted,名字变了但是原理还是没变的;

三、生命周期的整体流程图示

Vue2的生命周期图示:

Vue3的生命周期图示:

四、Vue3和Vue2生命周期有什么区别?

image.png

五、Vue3为什么要使用组合式API?

1、组合式API是什么?

组合式API,简单来说就是将同一逻辑关注点的代码配置在一起。

如果需要了解组合式API,我们需要先了解Vue2的以下局限性:

  • 代码的可读性问题:如果组件越来越大,代码难于理解和维护。
  • 组件逻辑复用问题:相同的逻辑代码,很难在多个组件里面进行复用。

举个例子:

创建一个studentInfo对象,并获取它的name和age,并对相关的业务逻辑进行颜色区分,如下:

每一个相同色块都表示相关业务逻辑的代码,黄色色块表示name相关的代码,红色色块表示age相关的代码。

以上只是简单的组件例子,如果是同时涉及到props、data、computed、methods、watch等的复杂组件代码呢?我们的代码也会增长,这可能导致组件难以阅读和理解。你的组件可能变成这样(下图来源于官网):

各个业务逻辑的代码互相穿插,我们需要不断地跳转到相应模块代码进行逻辑处理,这使得组件的代码理解和维护越来越难。

为了解决这个问题,Vue3引入了组合式API,将同一个逻辑关注点的代码配置在一起,增强代码的可读性和可维护性,这也是Vue3引入组合式API的主要目的。

比如我们前面写的例子,使用Vue3组合式API可以将相同逻辑关注点的代码写在一起,如下:

但是以上方式我们可以还可以通过功能分组进行更简便的处理:

创建两个独立方法,通过展开运算符在setup函数中番薯相关的变量和函数。

而且同样逻辑的代码可以在不同的组件进行复用。

在子组件Test1中直接复用Test2组件的studentName和studentAge两个方法中的业务逻辑:

综上所诉:

Vue3组合式API的主要目的:①增加代码的可读性和可维护性;②允许相同逻辑代码在不同组件中进行完整复用;

参考资料:

Vue3官网-组合式API

猜你喜欢

转载自juejin.im/post/7019692533240299550