[Vue] Vue2和Vue3的生命周期函数

vue2有11个生命周期钩子, vue3有8个生命周期钩子

从vue创建、运行、到销毁总是伴随着各种事件, 创建、挂载、更新到销毁。

1.vue2系列生命周期

⑴【beforecreate】实例创建前。

vue完全创建之前,会自动执行这个函数。

⑵【Created】实例创建后。

这也是个生命周期函数,beforecreate执行完后会自动执行它。其中data的值是由在created中请求并初始化的。

⑶【beforemount】组件挂载前。

模板即将挂载到页面的一瞬间会执行beforemount

⑷【Mounted】组件挂载后

挂载完成,也就是模板中的html渲染到了html页面中,此时一般可以做一些ajax操作。

mounted只会执行一次。

⑸【beforeupdate】视图更新前

数据发生改变,还没有渲染之前beforeupdate会执行

⑹【updated】视图更新后

当数据更新完重新渲染时,updated这个函数会执行。

⑺【beforedestroy】失礼销毁前

钩子函数在实例销毁之前调用。在这一步,实例仍然完全可用。

⑻【Destroy】实例销毁后

做收尾工作,在结束之后做一些事情,比如定时器和全局更新要在这里销毁。

⑼①【activeted】被keep-alive缓存的组件激活时调用

⑽②【deactiveted】 没有被激活时调用

⑾③【errorCaotured】捕捉子组件的错误时调用⑴

2.Vue3系列生命周期

1、beforeCreate -> 使用 setup()

2、created -> 使用 setup()

3、beforeMount -> onBeforeMount

4、mounted -> onMounted

5、beforeUpdate -> onBeforeUpdate

6、updated -> onUpdated

7、beforeDestroy -> onBeforeUnmount

8、destroyed -> onUnmounted

9、errorCaptured -> onErrorCaptured

⑴【beforecreate】------->【setup】 开始创建组件前,创建的是data和method

Create------- >【setup】

setup 这个函数是在beforeCreate和created之前运行的,所以你可以用它来代替这两个钩子函数。

⑵【beforemount】------- >【onBeforeMount】组件挂载前

在挂载开始之前被调用,相关的render函数首次被调用。

⑶【Mounted】------- >【onMount】组件挂载后

el被新创建的vm.$el替换,并挂载到实例上去之后调用该钩子。

⑷【beforeupdate】------- >【onBeforeUpdate】视图更新前

数据发生改变,还没有渲染之前beforeupdate会执行

数据发生改变时调用,你可以在这个钩子中进一步地更改状态,还不会触发附加的重渲染效果。

⑸【updated】------- >【onUpdate】视图更新后

由于数据更改导致的虚拟dom重新渲染和打补丁,在这之后后调用该钩子

当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。

该钩子在服务器端渲染期间不被调用

⑹【beforedestroy】------- >【onBeforeUnmount】卸载组件实例之前

视图销毁前调用,在这一步,实例仍然完全可用

⑺【Destroyed】------- >【onUnmount】卸载组件实例之后

相关推荐
勘察加熊人12 分钟前
vue猜词游戏
前端·vue.js·游戏
且心13 分钟前
【问题处理】webpack4升webpack5,报错Uncaught ReferrnceError: process is not defined
前端·webpack5·process·uncaught·referrnceerror
美美打不死15 分钟前
webpack js 逆向 --- 个人记录
开发语言·javascript·webpack
我是哈哈hh36 分钟前
【Vue】 核心特性实战解析:computed、watch、条件渲染与列表渲染
前端·javascript·vue.js·前端框架·vue·语法基础
龙在天1 小时前
“手速太快,分页翻车?”,前端分页竞态问题,看这一篇就够了
前端
前端Hardy1 小时前
HTML&CSS:超好看的收缩展开菜单
javascript·css·html
Riesenzahn1 小时前
你使用过css3的:root吗?说说你对它的理解
前端·javascript
前端Hardy1 小时前
HTML&CSS:哇塞!Three.js 打造的 3D 交互平面,鼠标滑动纹理如梦幻般变形!
javascript·css·html
Riesenzahn1 小时前
在js中undefined和undeclared有什么区别?
前端·javascript