当前位置: 首页 > article >正文

vue3学习六 hooks

vue3中的 hooks 它的作用, 有点像 vue2中的mixins 的作用
相当于是把一个功能性的一组方法, 封装的别的地方, 当每一个 component中需要用到相应的组件的时候, 可以很方便用引入其中来使用

举个栗子
我们有很多的页面, 但是每一个页面都有一个共同的功能, 就是 倒计时的效果, 如果我们每一个页面都去写倒计时的代码, 肯定是浪费功夫
所以, 我们就可以写一个 hooks
在这里插入图片描述
如果, 我新建了一个 hooks的文件夹, 用来存放 很多的hooks 文件, 在这个js文件中, 可以使用 setup中的所有写法, 完成之后, 把得到的结果 返回出去就可以了。
再来看一下, 我们在component组件中是怎么引入使用的

在这里插入图片描述
首先, 我们从文件中引入 hooks中要使用的js 文件
然后, 在setup中把返回的数据给拿到,之后在setup中return 出去

在这里插入图片描述
从上面的图中可以看到,
hooks 中的生命周期 要优先于 component中的 生命周期先的执行, 但不会覆盖


hooks 文件中也可以定义方法, 然后返回出去
在这里插入图片描述
在这里插入图片描述
接收后, 数据是可以用的, 并且这种的做法, 不会出再重名的问题


http://www.kler.cn/a/18436.html

相关文章:

  • 第16章 SELECT 底层执行原理
  • YOLOV8应用|排球垫球计数|附带全部数据集与源码(见文末百度云盘链接)
  • 24/11/11 算法笔记 泊松融合
  • 当AI遇上时尚:未来的衣橱会由机器人来打理吗?
  • 大模型 | 2024年中国智能算力行业白皮书 | 附PDF免费下载
  • 计算机毕业设计Python+图神经网络考研院校推荐系统 考研分数线预测 考研推荐系统 考研爬虫 考研大数据 Hadoop 大数据毕设 机器学习 深度学习
  • 【镜像取证篇】仿真碎片-记一次镜像仿真失败的复盘过程
  • 安装2023最新版_华为欧拉操作系统_OpenEuler操作系统_并配置IP地址_联网---linux工作笔记055
  • JVET-AD0081:一种基于外推滤波器的帧内预测模式
  • 【C++】继承和多态、共有私有和保护、重写
  • ES6之迭代器
  • Windows11关闭Edge/Chrome浏览器触摸板双指前进后退手势(防止误触切换页面)
  • java中设计模式总结
  • liunx 常用命令1-目录/文件:新建、修改、移动和删除
  • O2OA (翱途) 平台 V8.0 发布新增数据台账能力
  • QJsonObject 类
  • Docker安装、Docker基本操作
  • 一名【合格】前端工程师的自检清单
  • 麒麟KylinV10SP1(2203)推荐安装一些硬件监控类软件与使用
  • Socks5 协议简介
  • HTTP第三讲——四层模型、七层模型
  • ChatGPT会对我们日常生活带来什么影响?这些技术会改变我们学习阅读工作方式吗?
  • Netty基础(二)
  • 分析vmlinux编译过程
  • Android 自定义View实战—制作一个简易输入框
  • Python 面向对象