vue生命周期

ops/2024/12/22 16:11:26/

Vue

beforeCreate: //在实例生成之前会自动执行的函数
created: // 在实例生成之后会自动执行的函数
beforeMount://在模版渲染完成之前(实例挂载)执行
mounted: //在模版渲染完成之后(实例挂载)执行
beforeUpdate: //当data中数据变化时自动执行
updated: //当data中数据变化之后自动执行
beforeDestroy(销毁前)
destroyed(销毁后)

vue3生命周期

包括创建阶段的setup()和onBeforeMount(),挂载阶段的onMounted()和onBeforeUpdate(),更新阶段的onUpdated()和onDeactivated(),以及销毁阶段的onUnmounted()

创建阶段: setup()和onBeforeMount()
setup()函数的使用方式与Vue2.x中的data和methods类似,我们可以在setup()函数中声明组件需要使用的数据和方法
onBeforeMount():与Vue2.x中的beforeMount()类似,表示组件在挂载到DOM之前的事件,它会在setup()函数执行之后执行。

挂载阶段: onMounted()和onBeforeUpdate()
onMounted()与Vue2.x中的mounted()类似,表示组件挂载到DOM后的事件,它会在setup()函数执行之后执行。
onBeforeUpdate()与Vue2.x中的beforeUpdate()类似.表示组件在更新之前的事件,它会在组件的状态发生改变之后、视图开始重新渲染之前执行。

更新阶段: onUpdated()和onDeactivated()。
onUpdated()与Vue2.x中的updated()类似,表示组件在更新之后的事件,它会在组件的状态发生改变之后、视图重新渲染之后执行。
onDeactivated()与Vue2.x中的deactivated()类似,表示组件被激活后的事件,它会在组件从激活状态切换到非激活状态时执行。

销毁阶段 :onUnmounted()。
onUnmounted()与Vue2.x中的beforeDestroy()类似,表示组件销毁的事件,它会在组件被销毁之前执行。

beforeUnmount : //卸载之前
unmounted: //卸载之后,DOM完全销毁后

修饰符:prevent 、capture、once、passive、self

capture:捕获模式,
结果:先 0 后 1

javascript"><div @click="handleClickC">我是最外层<button @click="addCountClick()">add</button></div>
const addCountClick = () =>{alert(0)
}
const handleClickC = () =>{alert(1)
}

最外层事件加上.capture,结果显示 :先 1 后 0

javascript"><div @click.capture="handleClickC">

http://www.ppmy.cn/ops/26185.html

相关文章

openlayers6在uniapp中结合rendjs

步骤 1: 安装 OpenLayers 在你的 UniApp 项目中&#xff0c;使用 npm 或 yarn 安装 OpenLayers&#xff1a; bash复制代码 npm install ol 步骤 2: 创建地图组件 在 UniApp 中创建一个新的 Vue 组件&#xff08;例如 Map.vue&#xff09;&#xff0c;并在其中引入 OpenLaye…

浅谈电能质量电网谐波

目录 浅谈电能质量电网谐波 1.什么是谐波? 2.谐波的产生原因?

pytorch简单神经网络模型训练

目录 一、导入包 二、数据预处理 三、定义神经网络 四、训练模型和测试模型 五、程序入口 一、导入包 import torch import torch.nn as nn import torch.optim as optim # 导入优化器 from torchvision import datasets, transforms # 导入数据集和数据预处理库 from tor…

软考网络工程师 第六章 第二部分 第二节 IP分片与计算

IP定义 IP报文最大65535字节&#xff0c;而以太网MTU为1500字节。 相当于货轮能载重65535&#xff0c;而火车载重1500&#xff0c;那么必须把货轮上的货物分装给多个火车运输 例题精选解析 以太网主机发送一个IP分组&#xff0c;长度3000字节&#xff0c;头长度为标准长度&a…

Content type ‘application/json;charset=UTF-8‘ not supported异常的解决过程

1.首先说明开发场景 *就是对该json格式数据传输到后台 后台实体类 import com.baomidou.mybatisplus.annotation.TableId; import com.baomidou.mybatisplus.annotation.TableName; import com.fasterxml.jackson.annotation.JsonIgnore; import lombok.Data; import org.sp…

LangChain入门2 RAG详解

RAG概述 一个典型的RAG应用程序,它有两个主要组件&#xff1a; 索引&#xff1a;从源中获取数据并对其进行索引的管道。这通常在脱机情况下发生。检索和生成&#xff1a;在运行时接受用户查询&#xff0c;并从索引中检索相关数据&#xff0c;然后将其传递给模型。 从原始数据…

python Django 的内置权限系统或自定义模型来存储更复杂的角色和权限关系

在 Django 中,管理用户权限和角色通常涉及到使用 Django 的内置权限系统或自定义模型来存储更复杂的角色和权限关系。下面是一个基本的指南,说明如何在 Django 中为后台管理系统分配权限并将其保存在数据库中,同时结合 Vue.js 和 Element UI 作为前端框架。 后端(Django)…

c++11 标准模板(STL)本地化库 - 平面类别(time_get) - 从输入字符序列中解析时间/日期值到 std::tm 中(一)

本地化库 本地环境设施包含字符分类和字符串校对、数值、货币及日期/时间格式化和分析&#xff0c;以及消息取得的国际化支持。本地环境设置控制流 I/O 、正则表达式库和 C 标准库的其他组件的行为。 平面类别 从输入字符序列中解析时间/日期值到 std::tm 中 std::time_get …