Vue3组合式API中的组件的生命周期(钩子函数)

于 2024-09-03 19:06:27 发布
阅读量404 收藏 2
点赞数 11
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/p23gjj/article/details/141865673
版权

Vue3组件中的生命周期是什么?

生命周期有多重叫法，有叫生命周期函数的，也有叫生命周期钩子的，还有钩子函数的

其实都是代表在 Vue 实例创建、更新和销毁的不同阶段触发的一组钩子函数，这些生命周期函数允许开发者在不同阶段对 Vue 实例进行操作，以便执行特定的逻辑或清理工作

生命周期主要分为四种阶段:创建、挂载、更新、销毁。

就像一个人，创建（从出生来到这个世界）、挂载（不断学习充实自己）、更新（随着年龄的增长(经历了许多的风风雨雨不断成长)）、销毁（随的寿命将近,最终寿成终寝)

官方文档介绍:

这里的话只是一个简单的介绍,详细的文档介绍在 生命周期钩子 API 索引 里面,有真实的所有的生命周期钩子

Vue2与Vue3的对比:

真实的所有的生命周期钩子:

案例应用:

在父级先使用scroll-view:左右滑动标签,里面加一个响应状态属性,而后在逻辑层 

script导入生命周期中的onMounted,并自动导入ref响应状态,并引入子组件

子组件则导入卸载生命周期,父级那边点击后子组件则显示这句话

p23gjj
关注
  • 11
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
「Vue3系列」Vue3 组合式 API 生命周期钩子
日常笔记/总结/系列知识梳理
03-09 1126
Vue 3 引入了组合式 API（Composition API），它是一种新的 API，用于构建 Vue 组件的逻辑。在 Vue 3 的组合式 API 中，生命周期钩子可以通过导入相应的函数来使用。组合式 API 的核心思想是将组件的逻辑分割成更小的函数（或称为“组合函数”），这些函数可以根据需要被引入和重用。这有助于将组件的逻辑划分为更小的、更易于管理的部分，并提高了代码的可读性和可维护性。这些钩子函数接收与选项式 API 中的生命周期钩子相同的参数，并允许你以函数式的方式处理组件的生命周期事件。
Vue3 - 生命周期钩子函数（组合式 API）
王佳斌
11-13 3628
Vue3.0生命周期钩子函数官方文档，Vue3组合式 API之生命周期钩子，Vue3:组合式 API:生命周期钩子(在setup阶段被同步调用)，Vue3 组合式 API | 菜鸟教程，Vue3-组合式API学习之生命周期钩子函数，Vue3中组合式API中的生命周期钩子，Vue3.x 组合式api的生命周期钩子，Vue3——Hook函数 & 生命周期，Vue 3.0笔记——组合式API(介绍)，Vue3 - 生命周期钩子函数（组合式 API）
Vue3【组合式API（响应式、计算属性、事件处理、侦听器 、生命周期、模板引用、Props 、事件 ）自定义指令（基础 、全局与局部 、钩子函数参数）】(六)-全面详解（学习总结---从入门到深化）
03-27 539
Vue3【组合式API（响应式、计算属性、事件处理、侦听器 、生命周期、模板引用、Props 、事件 ）自定义指令（基础 、全局与局部 、钩子函数参数）】(六)-全面详解（学习总结---从入门到深化）
vue3组合式API
weixin_45090657的博客
03-10 1502
# 第一天
「Vue3系列」Vue3 组合式 API
日常笔记/总结/系列知识梳理
03-09 1231
通过模板引用，你可以在组件的 JavaScript 代码中引用模板中的特定元素或组件，从而能够直接操作它们或访问它们的属性和方法。组合式 API 的核心思想是将组件的逻辑分割成更小的函数（或称为“组合函数”），这些函数可以根据需要被引入和重用。函数是组合式 API 的核心，它提供了一个新的逻辑组织方式，允许你使用响应式状态、计算属性、方法、生命周期钩子等，而不必依赖于 Vue 组件的选项对象。函数返回一个对象，该对象中的属性将在模板中作为组件的响应式状态、方法或计算属性来使用。
vue3+el-tale封装（编辑、删除、查看详情按钮一起封装）
CallMe_CrabXie的博客
08-27 768
对应的tableData和tableDataHeader文件（实际开发中，应该从后端拿tableData，tableHeader根据情况自定义）
vue 通过事件的形式调用全局组件
liux6687的博客
08-29 1642
通过vue.use 挂载组件，然后在vue 原型上添加属性, 再通过调用属性方法传参的形式控制组件。这里我是写了一个文件上传组件。
Vue的状态管理——Vuex3&4&Pinia
警警的博客
08-30 2307
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
vue3+vant4父组件点击提交并校验子组件form表单
liuzaixi的博客
08-30 389
方法进行表单验证，如果验证通过则执行提交逻辑。获取子组件的引用，在父组件的点击事件中调用子组件的。这样父组件就可以通过。调用子组件的验证方法了。
【已解决】Vue Duplicate keys detected: ‘[object Object]’
qq_34419312的博客
08-28 1061
【已解决】Vue Duplicate keys detected: ‘[object Object]’
vue part 5
E___V___E的博客
08-29 883
生命周期：1 .又名：生命周期回调函数、生命周期函数、生命周期钩广。2 .是什么：Vue在关键时刻用我们调用的一些特殊名称的函数。3•生命周期函数的名字不可史改，但函数的具体内容是程序员根据需求编写的.4 .生命周期函数中的this指向是vm或组件实例对象。
SprinBoot+Vue家政公司服务平台的设计与实现
赵广陆
08-29 799
目录 1 项目介绍 2 项目截图 3 核心代码 3.1 Controller 3.2 Service 3.3 Dao 3.4 application.yml 3.5 SpringbootApplication 3.5 Vue 4 数据库表设计 5 文档参考 6 计算机毕设选题推荐 7 源码获取 1 项目介绍 博主个人介绍：CSDN认证博客专家，CSDN平台Java领域优质创作者，全网30w+粉丝，超300w访问量，专注于大学生项目实战开发、讲解和毕业答疑辅导，对于专业性数据证明一切！
react 样式和vue样式的区别
weixin_44565776的博客
08-29 453
react 和vue 样式使用注意事项
纯vue实现笔记系统
xc9711的博客
08-30 1319
只用vue前端实现笔记系统
SpringBoot SSM vue在线作业考试系统
最新发布
yinjl123456的博客
08-30 1061
使用技术: SpringBoot或SSM + Mybaits + Mysql + vue(前端)后台管理 登录注册 个人中心 教师信息管理 学生信息管理 学院信息管理 专业信息管理。班级信息管理 作业信息管理 作业提交管理 通知公告管理 试卷管理 试题管理。系统管理 管理员管理 考试管理。
前端Vue使用AES的GCM模式加密
u010398650的博客
08-29 1020
写了个新的前端项目，公司要求，账号密码这些必须是加密传输的；后端使用了GCM模式加密，前端是复制的一个以前项目的代码，原来是有写加密的，使用的是CryptoJS组件CTR模式加密的，但是这个组件里面没有GCM加密模式，找了半天，发现浏览器其实是自带加密的组件的，使用这个组件就可以使用GCM模式加密，代码贴在下面，顺便java代码也贴出来了。CryptoJS看点进源码里面看了下只支持这几种模式去官网看了下，也是说支持这几种，估计是浏览器都支持了，所以CryptoJS也就没有再更新了吧。
vue3中ref自动解包
weixin_44224712的博客
08-29 368
ref会自动解包
vue 动态替换父组件
小漠007的专栏
08-30 337
替换父组件？？什么鬼？？？这个场景的确很少见！！不过我们要说的的确是要替换父组件！！！！！！就是子组件内容不变但是父组件变化我们要把父组件替换成其他的，虽然这种场景不大可能遇到，但是爱转牛角尖的我还是决定试一试！！
Chapter 07 watch侦听器
2302_80253507的博客
08-30 1411
在 Vue 中，`watch` 侦听器是一个非常实用的工具，用于处理自定义数据的变化。本文详细讲解了 `watch` 侦听器的基本用法、深度侦听和常见应用场景。
vue3组合式api的生命周期
03-29
Vue 3的组合式API是一种新的编程模式，它提供了一种更灵活和可组合的方式来编写Vue组件。相比于传统的Options API，组合式API更加直观和易于维护。 在组合式API中，没有像Options API中的生命周期钩子函数那样明确的生命周期函数。取而代之的是，我们可以使用`onMounted`、`onUpdated`和`onUnmounted`等函数来实现类似的功能。 - `onMounted`函数会在组件挂载到DOM后立即执行，可以用来执行一些初始化操作。 - `onUpdated`函数会在组件更新后执行，可以用来响应数据的变化。 - `onUnmounted`函数会在组件从DOM中卸载后执行，可以用来清理资源。 除了上述三个常用的函数外，还有其他一些函数可以用来处理特定的场景，比如： - `onBeforeMount`：在组件挂载之前执行。 - `onBeforeUpdate`：在组件更新之前执行。 - `onBeforeUnmount`：在组件卸载之前执行。 这些函数可以通过导入`@vue/composition-api`库来使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值