VUE3组合式API

create-vue

create-vue是Vue官方新的脚手架工具,底层切换到了vite,为开发提供极速相应

使用create-vue

1.安装16.0或者更高版本的Node.js

2.npm init vue@latest指令会安装并执行create-vue

项目目录和关键文件

组合式API

Vue 3引入了组合式API(Composition API),这是一套全新的API,旨在解决大型组件逻辑复杂难以维护的问题,同时提供更灵活和可重用的代码组织方式。组合式API使得组件逻辑可以按照功能进行拆分,使得代码更加清晰、易于理解和维护。

setup

写法:如下图所示:

执行时机:在组件进行渲染之后会优先执行setup函数,如下周期图所示:

setup选项中写代码的特点:

如果在setup函数里声明的变量和方法,需要return出去才能够使用,如下图所示:

<script setup>语法糖

经过语法糖封装后简化了setup的使用,如下所示:

注意:在setup中的this不再指向组件实例了,而是指向undifined

reactive()

作用:接受对象类型数据的参数传入并且返回一个响应式对象

使用方法:

1.从vue包中导入reactive函数

2.在<script setup>中执行reactive函数并且传入类型为对象的参数,并使用变量接受响应式对象返回值

响应式对象可以影响视图的更新,如下案例所示:

但是reactive只能接受对象类型参数,不支持简单类型参数,针对于此推出了ref()

ref()

作用:接受简单类型或者对象类型的数据并且返回一个响应式对象

使用方法:

1.从vue包中导入ref函数

2.在<script setup>中执行ref函数并且传入初值,并使用变量接受响应式对象返回值

如下是一个ref使用案例:

reactive VS ref?

1.reactive不能处理简单类型的数据

2.ref参数类型支持更好但是必须通过.value访问修改

3.ref函数的内部实现依赖于reactive函数

computed计算属性函数

使用方式:

1.导入computed函数

2.执行函数在回调参数中return基于响应式数据做计算的值,用变量接收

如下是一个案例:

注意:计算属性应该是只读的

watch函数

作用:侦听一个或者多个数据的变化,数据变化的时候立刻执行回调函数

两个额外参数:1.immediate(立即执行) 2.deep(深度侦听)

使用方法:

  • 侦听单个数据
  • 1.导入watch函数
  • 2.执行watch函数传入要侦听的响应式数据(ref对象)和回调函数
  • 注意:watch第一个参数是不需要使用ref.value的,会自动处理
  • 同时监听多个响应式数据的变化,不管哪个数据变化都需要执行回调
  • immedite
  • 说明:在侦听器创建的时候立即执行回调,响应式数据变化后继续执行回调  
  • deep
  • 默认使用watch监听的ref对象是浅层监听的,直接修改嵌套的对象是不会触发回调执行的,需要开启deep(depp一旦开启会执行递归调用,所以一般不建议开启,建议使用精确监听)

  • 精确监听对象的某个属性
  • 那么怎么在不开启deep的情况下侦听对象的某个属性,可以把第一个参数也替换成回调函数,返回需要侦听的属性就行

周期函数

基本使用:

1.导入

2.执行函数,传入参数

注意:如果是多次调用,那么会在时机成熟的时候依次执行

组合式API下的组件数据向下传递

基本思想

1.父组件中给子组件绑定属性

2.子组件通过props选项接受

在Vue3中局部组件不需要注册就可以直接使用了

组合式API下的组件数据向上传递

基本思想

1.父组件中给子组件标签通过@绑定事件

2.子组件中通过$emit方法触发事件

模板引用

在vue2中通过ref标识获取真实的dom对象或者组件实例对象

vue3中使用方法

1.调用ref函数生成一个ref对象

2.通过ref表示绑定ref对象到标签,然后dom对象就会保存到ref对象.value中

defineExpose

默认情况下在<script setup>语法糖下组件内部的属性和方法是不开放给父组件访问的,可以通过defineExpose编译宏指定哪些属性和方法允许访问

provide和inject

作用场景:顶层组件向任意的底层组件传递数据和方法,实现跨层组件通信

使用方法:

1.在顶层组件使用provice函数提供数据

2.在底层组件使用inject函数获取数据

如下是一个小案例:

还可以传递方法:

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

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

相关文章

【Super数据结构】二叉搜索树与二叉树的非递归遍历(含前/中/后序)

&#x1f3e0;关于此专栏&#xff1a;Super数据结构专栏将使用C/C语言介绍顺序表、链表、栈、队列等数据结构&#xff0c;每篇博文会使用尽可能多的代码片段图片的方式。 &#x1f6aa;归属专栏&#xff1a;Super数据结构 &#x1f3af;每日努力一点点&#xff0c;技术累计看得…

《Sky光遇》无视steam锁区的两种下载入库游玩教程(图文一览)

玩家在光遇游戏中需要找到每一关的子民&#xff0c;然后穿过艰难险阻&#xff0c;最终在石碑前接受祝福&#xff0c;就是通过这一关了。玩家只有通关后会来到一个祭坛&#xff0c;从这个祭坛周围的门前往下一关或是回到遇境&#xff0c;通关就相当于是解锁地图场景&#xff0c;…

【Django开发】前后端分离美多商城项目第7篇:登录,使用登录的流程【附代码文档】

美多商城项目4.0文档完整教程&#xff08;附代码资料&#xff09;主要内容讲述&#xff1a;美多商城&#xff0c;项目准备1.B2B--企业对企业,2.C2C--个人对个人,3.B2C--企业对个人,4.C2B--个人对企业,5.O2O--线上到线下,6.F2C--工厂到个人。项目准备&#xff0c;配置1. 修改set…

C++——StackQueue

目录 一Stack 1介绍 2接口 3模拟实现 4栈的oj题 二Queue 1介绍 2接口 3模拟实现 三容器适配器 1再谈栈和队列 四优先级队列 1接口 ​编辑 2仿函数 五dequeue的简单介绍 一Stack 1介绍 先来看看库中对栈的介绍&#xff1a; 1. stack是一种容器适配器&#x…

Leetcode 150. 逆波兰表达式求值和Leetcode 55. 跳跃游戏

文章目录 Leetcode 150. 逆波兰表达式求值题目描述C语言题解和思路解题思路 Leetcode 55. 跳跃游戏题目描述C语言题解和思路解题思路 Leetcode 150. 逆波兰表达式求值 题目描述 给你一个字符串数组 tokens &#xff0c;表示一个根据 逆波兰表示法 表示的算术表达式。 请你计…

开箱即用的 SpringBoot 企业级开发平台

项目概述 基于 Spring 实现的通用权限管理平台&#xff08;RBAC模式&#xff09;。整合最新技术高效快速开发&#xff0c;前后端分离模式&#xff0c;开箱即用。 核心模块包括&#xff1a;用户、角色、职位、组织机构、菜单、字典、日志、多应用管理、文件管理、定时任务等功能…

【AcWing】蓝桥杯集训每日一题Day32|贪心|1349.修理牛棚

1349.修理牛棚 1349. 修理牛棚 - AcWing题库难度&#xff1a;中等时/空限制&#xff1a;1s / 64MB总通过数&#xff1a;1275总尝试数&#xff1a;2405来源&#xff1a;usaco training 1.4算法标签贪心 题目内容 在一个下着暴风雨的夜晚&#xff0c;大风掀翻了农夫约翰的牛棚的…

鸿蒙TypeScript学习第13天:【元组】

1、TypeScript 元组 我们知道数组中元素的数据类型都一般是相同的&#xff08;any[] 类型的数组可以不同&#xff09;&#xff0c;如果存储的元素数据类型不同&#xff0c;则需要使用元组。参考文档&#xff1a;qr23.cn/AKFP8k 元组中允许存储不同类型的元素&#xff0c;元组…

代码随想录算法训练营day36

435_无重叠区间 题目&#xff1a; 给定一个区间的集合 intervals &#xff0c;其中 intervals[i] [starti, endi] 。返回 需要移除区间的最小数量&#xff0c;使剩余区间互不重叠 。 示例 1: 输入: intervals [[1,2],[2,3],[3,4],[1,3]] 输出: 1 解释: 移除 [1,3] 后&…

手把手教你创建新的OpenHarmony 三方库

创建新的三方库 创建 OpenHarmony 三方库&#xff0c;建议使用 Deveco Studio&#xff0c;并添加 ohpm 工具的环境变量到 PATH 环境变量。 创建方法 1&#xff1a;IDE 界面创建 在现有应用工程中&#xff0c;新创建 Module&#xff0c;选择"Static Library"模板&a…

bash脚本中‘-b -u -p’‘$# -eq’‘#!/bin/bash’‘sed -i “s/\r//“ $1’的用法说明

#!/bin/bash#!/bin/bash: 这是 Bash 脚本的开头&#xff0c;指定了要使用的解释器&#xff0c;即 Bash。 if [ $# -eq 0 ]; thenif [ $# -eq 0 ]; then: 检查脚本是否被调用时提供了参数。$# 表示参数的数量&#xff0c;-eq 0 表示等于 0&#xff0c;即无参数。 echo "p…

2024-3-29 群讨论:如何看到一个线程的所有 JFR 事件

以下来自本人拉的一个关于 Java 技术的讨论群。关注公众号&#xff1a;hashcon&#xff0c;私信拉你 如何查看一个线程所有相关的 JFR 事件 一般接口响应慢&#xff0c;通过日志可以知道是哪个线程&#xff0c;但是如何查看这个线程的所有相关的 JFR 事件呢&#xff1f;JMC 有…

五种主流数据库:子查询

SQL 支持查询语句的嵌套&#xff0c;也就是在一个语句中包含其他的查询语句。嵌套子查询可以用于实现灵活复杂的查询语句。 本文比较五种主流数据库实现的子查询功能&#xff0c;包括 MySQL、Oracle、SQL Server、PostgreSQL 以及 SQLite。 功能MySQLOracleSQL ServerPostgre…

探索网络爬虫:技术演进与学习之路

网络爬虫及IP代理池 前言爬虫技术的演进最新的爬虫技术爬虫技术学习路线 前言 在信息时代&#xff0c;网络爬虫技术作为获取和处理网络数据的重要手段&#xff0c;已经成为数据科学、机器学习和许多商业应用的基石。从简单的HTML页面抓取到复杂的动态内容采集&#xff0c;爬虫…

【Java】如果把线程同步机制比喻成餐厅经理

要更好理解Java的线程同步机制&#xff0c;可以尝试通过餐厅经营的方式来进行类比。厨师&#xff08;共享资源&#xff09;在厨房里忙碌着&#xff0c;而顾客&#xff08;线程&#xff09;都在点菜和等待他们的食物。在这个场景中&#xff0c;同步机制就像是餐厅的经理&#xf…

三大能力升级!大模型开启智能客服新篇章

当前智能化已成为各行各业加速转型发展的关键词&#xff0c;客户服务领域也不例外&#xff0c;将大语言模型与文档问答结合&#xff0c;不仅能够有效提升知识构建效率&#xff0c;重塑智能客服模式&#xff0c;还将成为企业营销、运营智能化进程中的重要助推力&#xff01; 接…

Redis从入门到精通(十四)Redis分布式缓存(二)Redis哨兵集群的搭建和原理分析

文章目录 前言5.3 Redis哨兵5.3.1 哨兵原理5.3.1.1 集群的结构和作用5.3.1.2 集群监控原理5.3.1.3 集群故障恢复原理 5.3.2 搭建哨兵集群5.3.3 RedisTemplate5.3.3.1 搭建测试项目5.3.3.2 场景测试 前言 Redis分布式缓存系列文章&#xff1a; Redis从入门到精通(十三)Redis分…

一个开源嵌入式USB设备协议栈:FelisUSB

概述 Felis USB 是一个嵌入式USB协议栈。它不依赖于软件系统支持&#xff0c;可以轻量级迁移使用。 Felis USB is an USB stack for embedded system. See introduction in English here. 源码链接&#xff1a;season-studio/FelisUSB:null_C - GitCode开源社区 为什么开发Feli…

AI时代的新星:Devin AI 工程师的崛起

近日&#xff0c;人工智能领域掀起了一股新浪潮&#xff0c;一家成立不到两个月的初创公司Cognition推出了一款名为Devin的全球首位AI工程师。这款AI工程师引起了业界的高度关注&#xff0c;其独特的特点和能力使其成为软件开发领域的一颗耀眼之星。 Devin并非仅仅是一款编写代…

欧盟网络安全局:公共数据空间中的个人数据保护设计(下)

三、应用场景分析:健康—医药用途 2020年欧盟发布欧盟医药战略,旨在应对制药行业面临的各种机遇和挑战,以确保欧盟公民对于药品的可获得性、可负担性和可持续性。[4]报告将药品数据空间作为一种可能的手段,旨在支持数据使用者对于药品市场供应情况和药品功效的研究和分析。…