Vue3组合式API详解 - 大型应用的高端写法

目录

  • 01-setup方法与script_setup及ref响应式
  • 02-事件方法_计算属性_reactive_toRefs
  • 03-生命周期_watch_watchEffect
  • 04-跨组件通信方案provide_inject
  • 05-复用组件功能之use函数
  • 06-利用defineProps与defineEmits进行组件通信

01-setup方法与script_setup及ref响应式

  • 在Vue3.1版本的时候,提供了setup方法;而在Vue3.2版本的时候,提供了script_setup属性
    • setup方法是需要把数据进行return后,才可以在template标签中进行使用。
    • setup属性方式定义好后就可以直接在template标签中进行使用。在这里插入图片描述
  • ref响应式
    • 在组合式API中来完成数据的响应式操作,通过的就是ref()方法,需要从vue模块中引入这个方法后才可以使用。
      在这里插入图片描述
    • count数据的修改,需要通过count.value的方式,因为vue底层对响应式数据的监控必须是对象的形式,所以我们的count返回的并不是一个基本类型,而是一个对象类型,所以需要通过count.value进行后续的操作
    • ref()方法还可以关联原生DOM,通过标签的ref属性结合到一起,也可以关联到组件上
      在这里插入图片描述

02-事件方法_计算属性_reactive_toRefs

  • 在组合式API中实现事件方法和计算属性
    在这里插入图片描述
  • reactivetoRefs
    • reactive()方法是组合式API中另一种定义响应式数据的实现方式,它是对象的响应式副本
      在这里插入图片描述
  • ref()reactive()这两种方式都是可以使用的,一般ref()方法针对基本类型的响应式处理,而reactive()针对对象类型的响应式处理,当然还可以通过toRefs()方法把reactive的代码转换成ref形式
    在这里插入图片描述

03-生命周期_watch_watchEffect

  • 生命周期对比
    在这里插入图片描述

  • watchEffect 函数

    • 它立即执行传入的一个函数,同时响应式追踪其依赖,并在其依赖变更时重新运行该函数。
  • watchEffect常见特性:

    • 一开始会初始触发一次,然后所依赖的数据发生改变的时候,才会再次触发
    • 触发的时机是数据响应后,DOM更新前,通过flush: ‘post’ 修改成DOM更新后进行触发
    • 返回结果是一个stop方法,可以停止watchEffect的监听
    • 提供一个形参,形参主要就是用于清除上一次的行为
      在这里插入图片描述
  • watch侦听器的使用方式:
    在这里插入图片描述

  • watchwatchEffect的区别是什么呢?

    • 懒执行副作用
    • 更具体地说明什么状态应该触发侦听器重新运行
    • 访问侦听状态变化前后的值

04-跨组件通信方案provide_inject

  • 依赖注入

    • 在Vue中把跨组件通信方案provide_inject也叫做依赖注入的方式
      在这里插入图片描述
  • 依赖注入使用的时候,需要注意的点:

    • 不要在inject中修改响应式数据,可利用回调函数修改
    • 为了防止可设置成 readonly

05-复用组件功能之use函数

为了更好的组合代码,可以创建统一规范的use函数,从而抽象可复用的代码逻辑。利用use函数可以达到跟mixin混入一样的需求,并且比mixin更加强大
在这里插入图片描述
通过useCounter函数的调用,就可以得到内部return出来的对象,这样就可以在.vue文件中进行功能的使用,从而实现功能的复用逻辑。

06-利用defineProps与defineEmits进行组件通信

  • defineProps是用来完成父子通信的,基本使用跟选项式中的props非常的像
    在这里插入图片描述
  • defineEmits是用来完成子父通信的,基本使用跟选项式中的emits非常的像
    在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/100861.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

玩转单元测试之gtest

引言 程序开发的时候,往往需要编写一些测试样例来完成功能测试,以保证自己的代码在功能上符合预期,能考虑到一些异常边界问题等等。 gtest快速入门 1.引入gtest # 使用的是1.10版本,其他版本可根据需要选择 git clone -b v1.1…

基于图卷积网络的知识嵌入8.21

基于图卷积网络的知识嵌入 摘要介绍 摘要 近年来,围绕图卷积网络(GCN)这一主题出现了大量的文献。如何有效地利用复杂图中丰富的结构信息(例如具有heterogeneous types of entities and relations(异构实体和关系类型) 的知识图谱…

API 接口选择那个?RESTful、GraphQL、gRPC、WebSocket、Webhook

大家好,我是比特桃。目前我们的生活紧紧地被大量互联网服务所包围,互联网上每天都有数百亿次API调用。API 是两个设备相互通讯的一种方式,人们在手机上每次指尖的悦动,背后都是 API 接口的调用。 本文将列举常见的一些 API 接口&…

element-ui中二次封装一个带select的form组件

带select的form组件 样式 代码 <template><el-form-item label"是否有" class"append" prop"tag"><el-form-itemprop"isShare"><el-select v-model"query.tag"><el-option v-for"(item, …

2023国赛数学建模思路 - 案例:感知机原理剖析及实现

文章目录 1 感知机的直观理解2 感知机的数学角度3 代码实现 4 建模资料 # 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 感知机的直观理解 感知机应该属于机器学习算法中最简单的一种算法&#xff0c;其…

4.物联网LWIP之C/S编程,实现服务器大小写转换

LWIP配置 服务器端实现 客户端实现 错误分析 一。LWIP配置&#xff08;FREERTOS配置&#xff0c;ETH配置&#xff0c;LWIP配置&#xff09; 1.FREERTOS配置 为什么要修改定时源为Tim1&#xff1f;不用systick&#xff1f; 原因&#xff1a;HAL库与FREERTOS都需要使用systi…

错题整理——测开2021网易

1. 某些bug不影响使用时&#xff0c;可以选择先上线&#xff0c;在维护过程中修复。 2. df&#xff1a;查看磁盘使用情况 dir不是linux的常用的命令&#xff0c;不过用dir能够罗列出目录内容&#xff1b;dir默认没有颜色的区别&#xff0c;但也可以设置。现在都使用ls来代替。…

微信小程序卡片横向滚动竖图

滚动并不是使用swiper&#xff0c;该方式使用的是scroll-view实现 Swiper局限性太多了&#xff0c;对竖图并不合适 从左往右滚动图片示例 wxml代码&#xff1a; <view class"img-x" style"margin-top: 10px;"><view style"margin: 20rpx;…

三种生成树(STP,RSTP,MSTP)的基本配置(自我理解)

目录 一、为什么要使用生成树&#xff08;STP)&#xff1a; 二、由于设备冗余而导致的问题&#xff1a; 广播风暴&#xff1a; 三、802.1D生成树基本配置 四、802.1D生成树实验 实验拓扑&#xff1a; 实验配置&#xff1a; 配置完成后&#xff0c;在SW8上观察现象&…

RedisDesktopManager 连接redis

redis查看是否启动成功 ps -ef | grep redis以上未启动成功 cd /usr/local/bin/ 切换根目录 sudo -i 开启服务端 ./redis-server /usr/local/redis/redis.conf 开启客户端 ./redis-cli

JUC--阻塞队列

目录 问题引出 一.单端阻塞队列&#xff08;BlockingQueue&#xff09; 二.双端阻塞队列&#xff08;BlockingDeque&#xff09; 三.延迟队列&#xff08;DelayQueue&#xff09; 问题引出 由于实现消费者-生产者模型&#xff0c;每一次实现都比较麻烦&#xff0c;比如sych…

Python批量爬虫下载文件——把Excel中的超链接快速变成网址

本文的背景是&#xff1a;大学关系很好的老师问我能不能把Excel中1000个超链接网址对应的pdf文档下载下来。虽然可以手动一个一个点击下载&#xff0c;但是这样太费人力和时间了。我想起了之前的爬虫经验&#xff0c;给老师分析了一下可行性&#xff0c;就动手实践了。    没…

4.SpringCloud 基本架构

1.SpringCloud概述 Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具&#xff08;例如配置管理&#xff0c;服务发现&#xff0c;断路器&#xff0c;智能路由&#xff0c;微代理&#xff0c;控制总线&#xff0c;一次性令牌&#xff0c;全局锁&#xff0c;…

测试框架pytest教程(2)-用例依赖库-pytest-dependency

对于 pytest 的用例依赖管理&#xff0c;可以使用 pytest-dependency 插件。该插件提供了更多的依赖管理功能&#xff0c;使你能够更灵活地定义和控制测试用例之间的依赖关系。 Using pytest-dependency — pytest-dependency 0.5.1 documentation 安装 pytest-dependency 插…

【源码篇】ThreadLocal源码解析(主打的就是通俗易懂,言简意赅)

文章目录 ThreadLocal学习笔记前言1、TheadLocal基本介绍2、ThreadLocal基本使用3、体验ThreadLocal的优点3.1 ThreadLocal与synchronized的比较3.2、ThreadLoca的应用场景 4、ThreadLocal的内部原理4.1 ThreadLocal内部结构4.2 ThreadLocal常用方法分析4.2.1 set原理分析4.2.2…

云计算在IT领域的发展和应用

文章目录 云计算的发展历程云计算的核心概念云计算在IT领域的应用1. 基础设施即服务&#xff08;IaaS&#xff09;&#xff1a;2. 平台即服务&#xff08;PaaS&#xff09;&#xff1a;3. 软件即服务&#xff08;SaaS&#xff09;&#xff1a; 云计算的拓展应用结论 &#x1f3…

学习maven工具

文章目录 &#x1f412;个人主页&#x1f3c5;JavaEE系列专栏&#x1f4d6;前言&#xff1a;&#x1f3e8;maven工具产生的背景&#x1f993;maven简介&#x1fa80;pom.xml文件(project object Model 项目对象模型) &#x1fa82;maven工具安装步骤两个前提&#xff1a;下载 m…

合宙Air724UG LuatOS-Air LVGL API--简介

为何是 LVGL LVGL 是一个开源的图形库&#xff0c;它提供了创建嵌入式 GUI 所需的一切&#xff0c;具有易于使用的图形元素、漂亮的视觉效果和低内存占用的特点。 LVGL特点&#xff1a; 强大的 控件 &#xff1a;按钮、图表、列表、滑动条、图像等 高级图形引擎&#xff1a;动…

[Docker] Portainer + nginx + AList 打造Docker操作三板斧

Portainer : Docker容器图形化管理系统 nginx: 反向代理利器 AList: 文件管理系统 目的: 依托Portainer 的图形管理界面,可视化的配置docker容器. AList再关联Docker各容器内部的配置文件,可视化配置,再配合Portainer重启,日志查看,命令行操作等.对于中小企业对容器化操作简…

ECharts配合Node.js爬虫实现数据可视化

数据可视化简介 可视化技术是将数据和信息以图形化的方式展示出来&#xff0c;以便更好地理解和分析。可视化技术通常使用各种图表、图形、动画和交互式效果来呈现数据。可视化技术有以下几个基本概念&#xff1a; 数据&#xff1a;可视化技术的基础是数据。数据可以是数字、文…