vue的钩子函数和生命周期详解,vue11个周期钩子函数

　　本文主要详细介绍Vue3生命周期的hook功能。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。

　　本文分享了Vue3生命周期钩子函数的具体代码，供大家参考。具体内容如下

一、Vue3生命周期钩子

　　Setup():在开始创建组件之前，在创建 beforeCreate 和created 以及 data 和method之前执行。

　　OnBeforeMount():组件挂载到节点之前执行的函数；

　　OnMounted():组件挂载后要执行的函数；

　　OnBeforeUpdate():组件更新前执行的函数；

　　OnUpdated():组件更新完成后执行的函数；

　　OnBeforeUnmount():卸载组件之前执行的函数；

　　OnUnmounted():组件卸载后要执行的函数；

　　on activated(): keep-alive包含的组件会多两个生命周期钩子函数，激活时执行；

　　OnDeactivated():比如从组件A切换到组件B，组件A消失时执行；

　　OnErrorCaptured():当捕获到来自后代组件的异常时，激活钩子函数。

　　PS:使用keep-alive 组件会将数据保存在内存中。例如，如果我们不想每次看到一个页面就重新加载数据，我们可以使用keep-alive组件来解决。

二、Vue2.x 和 Vue3.x 生命周期对比

三、Vue3生命周期钩子函数的简单使用

　　模板

　　差异

　　H1Vue3生命周期挂钩函数/h1

　　h2响应拦截数据data的值为：{{msg}}/h2

　　Pbton @ click= changemsg 单击以更改消息/button/p。

　　/div

　　/模板

　　脚本

　　从“vue”导入{ reactive，onUnmounted，onUpdated，onMounted，tore fs }；//介绍所需的

　　导出默认值{

　　setup () {

　　//在安装程序中初始化项目工作。

　　Console.log(当前应用程序已安装)；

　　Const state=reactive({ //定义状态

　　Msg:边学边学，//定义变量

　　change:()={//定义方法

　　State.msg=是不是很神奇

　　}

　　})

　　设定时器=0；

　　设count=0；

　　onMounted(()={

　　Console.log(页面挂载，触发onMounted钩子函数)；

　　timer=setInterval(()={

　　Console.log(计时器正在运行，计数)

　　}, 1000)

　　})

　　未更新(()={

　　Console.log(数据已更新，触发未更新的钩子函数)

　　})

　　未安装(()={

　　Console.log(页面/组件退出，触发onUnmounted钩子函数)

　　//如果不清除，这些异步行为就会驻留在内存中，这在一定程度上会造成内存驻留的不必要消耗和内存泄漏。

　　clearInterval(定时器)；

　　})

　　返回{

　　.toRefs(州)

　　}

　　}

　　}

　　/脚本

　　这就是本文的全部内容。希望对大家的学习有帮助，支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。