为什么会有生命周期?生命周期怎么用?

212 阅读2分钟

为什么会有生命周期?

万物皆为对象,一个对象,有它的诞生、渲染(也就是画出来)、消亡的过程,就和生物的生命一样,这就是生命周期,两个不同的生命,其生命周期肯定不同。

  • 举例:
  • 吃饭的步骤:找食物—做饭-吃饭-洗碗
  • 洗衣服的步骤:找衣服-放洗衣机-晾晒-收到衣柜
  • 当我在做事情的时候,发现每一件事件都有一个相同的执行步骤,创造-加工-制作-完成收工,所以这个过程就是生命周期
  • 为了我们少写点代码,所以封装了生命周期的框架,我们在写代码的时候不用再去写第一步要干嘛,第二步要干嘛,我们直接在生命周期的每一个不同的阶段写对应的需要执行的函数,其它都交给生命周期框架。

Vue中的生命周期

1019981-20200602161556262-1528029320.png

beforeCreate

此时,组件的data和methods以及页面DOM结构都还没有初始化,所以这里什么都做不了

created

此时,组件的data和methods可用。但页面还没被渲染出来,在该函数中,我们经常会发起ajax请求

beforeMount

此时,模板结构已经在内存中编译完成,但还没有真正渲染到页面上。页面上看不到真实的数据,能看到的只是一个模板而已

mounted

组件创建阶段的最后一个生命周期。此时,页面已经真正渲染好了,用户可以看到真实页面数据。

以上执行完,组件就离开了创建阶段,进入运行阶段。如果用到了一些第三方UI插件,必须在mounted中来初始化插件。

运行中的生命周期函数,会根据data数据的变化有选择性的触发0次或n次

beforeUpdate

此时数据是最新的,但页面上呈现的数据还是旧的

updated

页面已经完成了更新,此时data数据是最新的,同时页面上呈现的数据也是最新的。

beforeDestroy

执行该函数的时候,组件即将被销毁但还没有真正销毁,此时组件(data、methods等数据或方法)还可以正常用。

destroyed

组件完成销毁,组件废了

React中的生命周期

待续....