当前位置：首页 > news >正文

VUE3学习二

news 来源：原创 2025/7/18 4:48:29

教程视频

【尚硅谷Vue3入门到实战，最新版vue3+TypeScript前端开发教程】https://www.bilibili.com/video/BV1Za4y1r7KE?p=67&vd_source=f1bd3b5218c30adf0a002c8c937e0a27

零环境搭建

学习环境

windows10
node 18
vue3

创建项目

npm create vue@latest

选项中是1是 0否

一组合API&选项API

选项式

data() {return {objectOfAttrs: {id: 'container',class: 'wrapper'}}
}

组合式

const objectOfAttrs = {id: 'container',class: 'wrapper',
}

二 setup

基本概念

<script setup>
console.log('hello script setup')
</script>

代码会被编译成组件 setup() 函数的内容。

这意味着与普通的 <script> 只在组件被首次引入的时候执行一次不同，<script setup> 中的代码会在每次组件实例被创建的时候执行。

任何在 <script setup> 声明的顶层的绑定 (包括变量，函数声明，以及 import 导入的内容) 都能在模板中直接使用，import 导入的内容也会以同样的方式暴露。

组合式写法（推荐写法）：

<script setup>
// 变量
const msg = 'Hello!'// 函数
function log() {console.log(msg)
}
import { capitalize } from './helpers'
</script><template><button @click="log">{{ msg }}</button><div>{{ capitalize('hello') }}</div>
</template>

选项式写法

<script>
export default {name:"",setup(){const msg="Hello"function log(){console.log(msg)}return {msg,log}}
}
</script>

vue3 setup 中未设置this，使用时不可使用this。

以上代码未使用ref或者reactive，所以数据不是响应式，页面显示不会自动更新。

setup优先于所有生命周期钩子之前执行。

setup在选项式写法中（不推荐）：

可以和data、methods同时存在。
data通过this能取到setup中的数据，因为setup最先被执行。
setup里读取不到data、methods中的数据。

setup语法糖<script setup>，作用域内不用写return。

同一页面，script标签lang属性要一致。

同一script标签中使用方法要一致，即只有选项式或只有组合式。

定义组件名称

默认组件和文件名相同。

1 使用插件式

<script lang="ts">
export default {name:"test",
}
</script><script setup lang="ts">
console.log('hello script setup')
</script>

2 使用插件 vite-plugin-vue-setup-extend

npm i vite-plugin-vue-setup-extend

<script setup namd="test">
console.log('hello script setup')
</script>

3 使用defineOptions

仅在 3.3+ 中支持

<script setup>
import { defineOptions } from 'vue'
defineOptions({name: 'Foo',inheritAttrs: false,// 其他自定义属性...
})
</script>

三 ref&reactive

ref

接受一个内部值，返回一个响应式的、可更改的 ref 对象。

此对象只有一个指向其内部值的属性 value。

const count = ref(0)
console.log(count.value) // 0count.value = 1
console.log(count.value) // 1

将基本类型数据变为RefImpl对象，即响应式对象，仅能通过value改变值。

可以控制作用域内哪些是响应式数据。

模板中自动取value属性。

ref可定义基本类型数据和对象类型数据，ref底层对象类型数据使用reactive处理。

修改数据

修改 value属性，都保持响应式对象。

必须通过value修改。

let obj1 = ref({test1:"test1"})
let num1 = ref(1)num1.value+=1
obj1.value={test1:"test2"}
obj1.value.test1="test3"//保持响应式对象num1 = ref(2)//失去响应式

reactive

返回一个对象的响应式代理。

仅可定义对象类型数据，其中ref对象会被解包。

响应式转换是“深层”的：它会影响到所有嵌套的属性。

一个响应式对象也将深层地解包任何 ref 属性，同时保持响应性。

const obj = reactive({ count: 0 })
obj.count++const count = ref(1)
const obj2 = reactive({ count })
// ref 会被解包
console.log(obj2.count === count.value) // true// 会更新 `obj2.count`
count.value++
console.log(count.value) // 2
console.log(obj2.count) // 2// 也会更新 `count` ref
obj2.count++
console.log(obj2.count) // 3
console.log(count.value) // 3

将对象类型数据变为Proxy对象，即响应式对象。

修改数据

重新分配对象，失去响应式。

let obj =reactive({test1:'test1'})
function updateobj(){let obj2 = {test1:"test2"}obj = obj2//重新定义（分配）对象
}

保持响应式对象

let obj =reactive({test1:'test1'})
function updateobj(){let obj2 = {test1:"test2"}Object.assign(obj, obj2);obj.test1="test3"
}

使用原则

需要基本类型响应式对象，用ref
需要对象类型响应式对象，层次不深，用ref、reactive都行
需要对象类型响应式对象，层次深，推荐使用reactive
表单多推荐使用reactive

四 toRef&toRefs

toRef

可以将值、refs 或 getters 规范化为 refs (3.3+)。

const state = reactive({foo: 1,bar: 2
})// 双向 ref，会与源属性同步
const fooRef = toRef(state, 'foo')// 更改该 ref 会更新源属性
fooRef.value++
console.log(state.foo) // 2// 更改源属性也会更新该 ref
state.foo++
console.log(fooRef.value) // 3

使用场景：解构reactive对象，解构一个对象属性。

toRefs

将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的 ref。

每个单独的 ref 都是使用 toRef() 创建的。

const state = reactive({foo: 1,bar: 2
})const stateAsRefs = toRefs(state)
/*
stateAsRefs 的类型：{foo: Ref<number>,bar: Ref<number>
}
*/// 这个 ref 和源属性已经“链接上了”
state.foo++
console.log(stateAsRefs.foo.value) // 2stateAsRefs.foo.value++
console.log(state.foo) // 3

使用场景：解构reactive对象，同时结构多个对象属性。

VUE3学习二

教程视频【尚硅谷Vue3入门到实战，最新版vue3TypeScript前端开发教程】https://www.bilibili.com/video/BV1Za4y1r7KE?p67&vd_sourcef1bd3b5218c30adf0a002c8c937e0a27 零环境搭建学习环境 windows10node 18vue3 创建项目 npm create vuelatest 选项中…...

编程日记 2025/7/18 4:48:29

参考文档： https://dev.mysql.com/doc/refman/8.4/en/group-replication-configuring-instances.html MySQL版本： mysql> select version(); ----------- | version() | ----------- | 8.4.3 | ----------- 1 row in set (0.00 sec)mysql> …...

编程日记 2025/7/18 4:38:36

设计模式学习思路二

设计模式的学习思路_设计模式必须按顺序进行吗-CSDN博客以下是一些方法和思路可以帮助你更清晰地识别使用了哪种设计模式。 1. 确定模式时的思考步骤以下是分析代码时，你可以遵循的一些思路和步骤，帮助你识别可能使用的设计模式： a. 识别…...

编程日记 2025/7/18 4:47:03

MySql 笔记

drop database if exists school; create database school default charset utf8; -- 切换到数据库school use school; -- 创建学生表 drop table if exists tb_student; create table tb_student ( stuid int not null comment 学号, stuname varchar(20) not null comment 姓…...

编程日记 2025/7/12 10:57:17

【Qt】QTableView选中行发生变化时触发的信号

问题 QTableView选中的行发生变化时，使用的信号是QTableView的selectionModel()里的currentChanged信号，界面点击行来回切换，发现怎么也触发不了？ 原因信号槽连接放在了QTableView数据初始化前面，这时候QTableView…...

编程日记 2025/7/12 14:41:39

qt图像合成模式分析

文章目录定义含义示例分析CompositionMode_ClearCompositionMode_SourceCompositionMode_DestinationCompositionMode_SourceOverCompositionMode_DestinationOverCompositionMode_SourceInCompositionMode_DestinationInCompositionMode_SourceOutCompositionMode_Destinatio…...

编程日记 2025/7/18 4:43:12

http与https的区别

加密方式： 加密技术是对信息进行编码和解码的技术，编码是把原来可读信息（又称明文）译成代码形式（又称密文），其逆过程就是解码（解密），加密技术的要点是加密算…...

编程日记 2025/7/12 15:43:56

Pyside6 --Qt Designer--Qt设计师--了解+运行ui_demo_1.py

目录一、打开Qt设计师1.1 Terminal终端1.2 打开env，GUI虚拟环境下的scripts文件1.3 不常用文件介绍（Scripts下面） 二、了解Qt设计师的各个控件作用2.1 点击widget看看效果！2.2 点击Main Window看看效果三、编写一个简易的UI代码…...

编程日记 2025/7/17 19:57:09

11.17【大数据】Hadoop【DEBUG】

列出hdfs文件系统所有的目录和文件主节点上子结点是一样的 *为什么能登进 slave 02 的主机,但是 master 当中依然显示 slave 02 为 DeadNode?* hadoop坏死节点的重启_hadoop3 子节点重启-CSDN博客注意hadoop-daemon.sh 实际上位于 Hadoop 的 sbin 目录中，而不…...

编程日记 2025/7/13 21:00:26

MQ：kafka-消费者的三种语义

文章目录前言(一) 创建topic(二) 生产者（三）消费者1. At-most-once Kafka Consumer2. At-least-once kafka consumer3. 使用subscribe实现Exactly-once4. 使用assign实现Exactly-once 前言本文主要是以kafka 09的client为例子，详解kafka c…...

编程日记 2025/7/15 23:41:21

QT 线程锁

在 Qt 中，线程锁是用来同步多线程访问共享资源的机制，防止数据竞争和线程安全问题。Qt 提供了几种线程锁和同步工具，主要包括以下几种： 1. QMutex 功能：QMutex 是 Qt 中最常用的互斥锁（mutex）…...

编程日记 2025/7/16 15:36:03

C++中protobuf Message与JSON的互相转换

C中protobuf Message与JSON的互相转换环境： protobuf: v27.3(2024-08-01) abseil: 20240722.0文章目录 C中protobuf Message与JSON的互相转换前言1. 编写通讯录addressbook.proto2. 编译3. C中测试protobuf与json的转换4. 结果前言 PB转JSON：Protoc…...

编程日记 2025/7/14 20:07:02

Milvus向量数据库03-搜索理论

Milvus向量数据库03-搜索理论 1-ANN搜索通过 k-最近邻（kNN）搜索可以找到一个查询向量的 k 个最近向量。kNN 算法将查询向量与向量空间中的每个向量进行比较，直到出现 k 个完全匹配的结果。尽管 kNN 搜索可以确保准确性，但十分耗…...

编程日记 2025/7/15 19:21:21

qt QCryptographicHash详解

1、概述 QCryptographicHash是Qt框架中提供的一个类，用于实现加密散列函数，即哈希函数。哈希函数能够将任意长度的数据转换为固定长度的哈希值，也称为散列值或数据指纹。这个哈希值通常用于数据的完整性校验、密码存储等场景。QCryptographi…...

编程日记 2025/7/17 1:18:48

【论文阅读】具身人工智能（Embodied AI）综述：连接数字与物理世界的桥梁

摘要具身人工智能（Embodied AI）对于实现通用人工智能（AGI）至关重要，是连接数字世界与物理世界的各类应用的基础。近年来，多模态大模型（MLMs）和世界模型（WMs&#xff09…...

编程日记 2025/7/13 20:08:41

使用el-row和el-col混合table设计栅格化，实现表头自适应宽度，表格高度占位

演示效果： 如上图,由于地址信息很长,需要占多个格子,所以需要错开,若想实现这种混合效果,可以这样搭建: 页面效果： 代码分析: 上面使用el-row和el-col搭建表单显示第一排三个8,第二排8和16 下面混合table实现，并使用border来自适应宽度…...

编程日记 2025/7/14 1:38:55

MQ的基本概念

1 MQ的基本概念 RabbitMQ是一个开源的消息代理和队列服务器，它使用Erlang语言编写并运行在多种操作系统上，如Linux、Windows等。RabbitMQ可以接收、存储和转发消息（也称为“事件”）到连接的客户端。它适用于多种场景，…...

编程日记 2025/7/14 5:25:51

基于协同过滤的图书推荐系统爬虫分析可视化【源码+文档】

【1】系统介绍研究背景随着互联网的普及和电子商务的发展，用户可以在线获取大量的图书资源。然而，面对海量的信息，用户往往难以找到自己真正感兴趣的书籍。同时，对于在线书店或图书馆等提供图书服务的平台来说，如何…...

编程日记 2025/7/14 20:16:14

Kruskal 算法在特定边权重条件下的性能分析及其实现

引言 Kruskal 算法是一种用于求解最小生成树（Minimum Spanning Tree, MST）的经典算法。它通过逐步添加权重最小的边来构建最小生成树，同时确保不会形成环路。在本文中，我们将探讨在特定边权重条件下 Kruskal 算法的性能，并分别给出伪代码和 C 语言实现。特别是，我们将分…...

编程日记 2025/7/16 21:53:07

【Pandas】pandas from_dummies

Pandas2.2 General Data manipulations 方法描述melt(frame[, id_vars, value_vars, var_name, …])将多个列的值转换为行形式pivot(data, *, columns[, index, values])将长格式的数据转化为宽格式pivot_table(data[, values, index, columns, …])用于创建数据透视表&#…...

编程日记 2025/7/16 11:08:36

【信息系统项目管理师】第8章：项目整合管理过程详解

文章目录一、制定项目章程1、输入2、工具和技术3、输出二、制订项目管理计划1、输入2、工具和技术3、输出三、指导与管理项目工作1、输入2、工具和技术3、输出四、管理项目知识1、输入2、工具和技术3、输出五、监控项目工作1、输入2、工具和技术3、输出六、实施整体变更控…...

编程日记 2025/7/17 1:27:40

从变更到通知：使用Python和MongoDB Change Streams实现即时事件监听

MongoDB提供了一种强大的功能，称为Change Streams，它允许应用程序监听数据库中的变更事件，并在数据发生变化时立即做出响应。这在mysql数据库是不具备没有这个功能的。又如：我们在支付环节想一直监听支付回调的状态，就…...

编程日记 2025/7/18 4:45:26

vue3+elementPlus封装的数据过滤区

目录结构源码 index.vue <template><el-form class"mb-5" :rules"rules" :model"queryForm" ref"queryDOM" label-width"80"><el-row :gutter"20"><slot></slot><el-col cla…...

编程日记 2025/7/18 4:43:12

PHP RabbitMQ连接超时问题

问题背景 Error: The connection timed out after 3 sec while awaiting incoming data 看到这个报错，我不以为意，认为是我设置的超时时间不够导致的，那就设置长一点 Error: The connection timed out after 300 sec while awaiting incom…...

编程日记 2025/7/13 7:21:14

SpringMvc完整知识点二（完结）

SpringMVC获取请求参数环境准备工作等均省略，可详见快速入门，此处只写非共有部分代码该部分示例项目SpringMvcThree已上传至Gitee，可自行下载客户端请求参数的格式为：namevalue&passwordvalue... ... 服务端想要获取请求…...

编程日记 2025/7/17 1:24:29

WebSocket 通信说明与基于 ESP-IDF 的 WebSocket 使用

一、 WebSocket 出现的背景最开始客户端（Client） 和服务器（Server） 通信使用的是 HTTP 协议，HTTP 协议有一个的缺陷为：通信只能由客户端（Client）发起。在一些场景下&#xff0…...

编程日记 2025/7/14 22:31:55

UE5 Compile Plugins | Rebuild from Source Manually | Unreal Engine | Tutorial

Step 1 Open Engine Folder H:\UE5\UE_5.3\Engine\Build\BatchFiles Step 2 Hold "Shift""Mouse Right Click"in Empty Area Step 3 Select "Open PowerShell window here .\RunUAT.bat BuildPlugin -plugin"H:\projects\MetaHuman光照2\plu…...

编程日记 2025/7/16 17:54:44

深度解析 Ansible：核心组件、配置、Playbook 全流程与 YAML 奥秘(下)

文章目录六、playbook运行playbook方式Playbook VS ShellScripts忽略错误 ignore_errorshandlers和notify结合使用触发条件playbook中tags的使用playbook中变量的使用invertory参数模板templates迭代与条件判断迭代：with_items迭代嵌套子变量roles 六、playbook 运…...

编程日记 2025/7/15 19:51:30

langchain chroma 与 chromadb笔记

chromadb可独立使用也可搭配langchain 框架使用。环境： python 3.9 langchain0.2.16 chromadb0.5.3 chromadb 使用示例 import chromadb from chromadb.config import Settings from chromadb.utils import embedding_functions# 加载embedding模型 en_embeddin…...

编程日记 2025/7/14 1:38:55

04 创建一个属于爬虫的主虚拟环境

文章目录回顾conda常用指令创建一个爬虫虚拟主环境Win R 调出终端查看当前conda的虚拟环境创建 spider_base 的虚拟环境安装完成查看环境是否存在为 pycharm 配置创建的爬虫主虚拟环境选一个盘符来存储之后学习所写的爬虫文件用 pycharm 打开创建的文件夹pycharm 配置解释器…...

编程日记 2025/7/13 22:22:25

xcode开发相关英语单词

创建项目： otheraudio unit extension app音频单元扩展应用程序generic kernel extension通用内核扩展installer plug-in安装程序插件instruments package仪器包iokit driveriokit驱动程序presence pane状态窗格screen saver屏幕保护程序...

编程日记 2025/7/12 17:00:29

etcd-v3.5release-(2)-STM

a.b.c表示a文件里的b类的方法c，注意a不一定是包名，因为文件名不一定等于包名 ！！！！etcd在put的过程中使用的batchTxBuffered，这个事务是写bbolt数据库使用的事务，是对bbolt.Tx的一个…...

编程日记 2025/7/18 4:41:48

多系统萎缩锻炼如何好起来？

多系统萎缩（Multiple System Atrophy, MSA）是一种复杂的神经系统退行性疾病，影响着患者的自主神经系统、运动系统和平衡功能等多个方面。面对这一挑战，科学、合理的锻炼对于缓解症状、提高生活质量至关重要。本文将详细介绍多系统…...

编程日记 2025/7/16 9:19:49

非对称任意进制转换器（安卓）

除了正常进制转换，还可以输入、输出使用不同的数字符号，达成对数值进行加密的效果点我下载APK安装包提取码：h4nw 使用unity开发。新建一个c#代码文件，把代码覆盖进去，再把代码文件添加给main camera即可。 using Sy…...

编程日记 2025/7/13 23:10:59

MySQL数据库安全与管理

1、创建两个新用户U_student1和U_student2,密码分别为1234和5678 create user U_student1@localhost identified by 1234, U_student2@localhost identified by 5678; 2、创建两个新用户的详细信息保存在MySQL数据库的user表中 use mysql; select user, host, authentication…...

编程日记 2025/7/16 1:58:15

python使用PyPDF2 和 pdfplumber操作PDF文件

文章目录一、第三方库介绍二、基本使用1、拆分pdf2、合并pdf3、提取文字内容4、提取表格内容5、PDF加密6、PDF解密一、第三方库介绍 Python 操作 PDF 会用到两个库，分别是：PyPDF2 和 pdfplumber。 PyPDF2 可以更好的读取、写入、分割、合并PDF文件&a…...

编程日记 2025/6/28 18:48:53

【vue2自定义指令】v-disabled 实现el-switch，el-button等elementUI禁用（disabled）效果

如果你搜过类似的功能，肯定看到过千篇一律的 // 实现按钮禁用el.disabled true// 增加 elementUI 的禁用样式类el.classList.add(is-disabled)但是这个方案明显对el-switch，不起作用，所以我这边直接把方案贴出来，不想了解具体原理…...

编程日记 2025/7/12 15:58:28

从容面对大规模作业:利用PMI提升作业启用和结束效率

1.进程管理瓶颈随着集群规模的不断扩大和处理器性能的不断提升，高性能计算HPC(High Performance Computing)系统性能已经进入百亿亿次时代，进程管理是高性能计算的一个重要组成部分，传统进程管理已经不能满足海量处理器的管理需求&#xff…...

编程日记 2025/7/17 12:05:14

2024年认证杯SPSSPRO杯数学建模C题(第一阶段)云中的海盐解题全过程文档及程序

2024年认证杯SPSSPRO杯数学建模 C题云中的海盐原题再现： 巴黎气候协定提出的目标是：在2100年前，把全球平均气温相对于工业革命以前的气温升幅控制在不超过2摄氏度的水平，并为1.5摄氏度而努力。但事实上，许多之前的…...

编程日记 2025/7/13 23:03:10

burp(6)暴力破解与验证码识别绕过

声明！ 学习视频来自B站up主 **泷羽sec** 有兴趣的师傅可以关注一下，如涉及侵权马上删除文章，笔记只是方便各位师傅的学习和探讨，文章所提到的网站以及内容，只做学习交流，其他均与本人以及泷羽sec团队无关&a…...

编程日记 2025/7/18 4:45:25

不同系统查看软件占用端口的方式

Windows 使用命令提示符（CMD） 打开命令提示符: 按 Win R 键打开“运行”对话框，输入 cmd 并按回车。为了执行某些命令，您可能需要以管理员身份运行命令提示符。可以通过右键点击“开始”按钮并选择“命令提示符（管理…...

编程日记 2025/7/18 4:37:59

【已解决】黑马点评项目中-实战篇11-状态登录刷新章节设置RefreshTokenInterceptor拦截器后登录异常的问题

黑马点评项目中-实战篇11-状态登录刷新章节设置RefreshTokenInterceptor拦截器后登录异常的问题在 MvcConfig 文件中添加好RefreshTokenInterceptor拦截器出现异常情况按照验证码登录后，进入主页面，再点击“我的”，又跳入登录界面原因…...

编程日记 2025/7/16 14:24:14

Artec Leo 3D扫描仪革新家具行业的数字化展示【沪敖3D】

随着科技的飞速进步，三维扫描技术已被广泛应用于包括家居行业在内的多个行业。面对现代消费者对家居产品日益增长的个性化和多样化需求，传统的家居设计和展示方法已难以满足市场需求。三维扫描技术的出现，为家居行业带来了新的发展机遇&#…...

编程日记 2025/7/18 4:40:07

UG NX二次开发(Python)-UIStyler-选取点

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录 1、前言2、设计一个UI界面3、创建长方体的代码4、需要引入的库5、测试验证1、前言采用Python语言进行UG NX二次开发的资料比较少，我本来不是很认可采用Python进行二次开发的，但是近期有读者咨询…...

编程日记 2025/7/17 15:09:09

Linux网络编程之---组播和广播

一.组播 1.概述单播地址标识单个IP 接口，广播地址标识某个子网的所有IP 接口， 多播地址标识一组IP 接口。单播和广播是寻址方案的两个极端(要么单个要么全部)， 多播则意在两者之间提供一种折中方案。多播数据报只应该由对它感兴趣的接口接收…...

编程日记 2025/7/16 18:25:53

[计算机网络] HTTP/HTTPS

一. HTTP/HTTPS简介 1.1 HTTP HTTP（超文本传输协议，Hypertext Transfer Protocol）是一种用于从网络传输超文本到本地浏览器的传输协议。它定义了客户端与服务器之间请求和响应的格式。HTTP 工作在 TCP/IP 模型之上，通常使用端口 …...

编程日记 2025/7/14 9:01:48

运动模糊效果

1、运动模糊效果运动模糊效果，是一种用于模拟真实世界中快速移动物体产生的模糊现象的图像处理技术，当一个物体以较高速度移动时，由于人眼或摄像机的曝光时间过长，该物体会在图像中留下模糊的运动轨迹。这种效果游戏、动画、电…...

编程日记 2025/7/13 8:37:54

扫二维码进小程序的指定页面

草料二维码解码器微信开发者工具获取二维码解码的参数->是否登陆->跳转 options.q onLoad: function (options) {// console.log("options",options.q)if (options && options.q) {// 解码二维码携带的链接信息let qrUrl decodeURIComponent(optio…...

编程日记 2025/7/14 15:41:00

uniapp的生命周期

在 UniApp 中，生命周期函数是指在组件（如页面、视图等）创建和销毁过程中会自动触发的一些函数。UniApp 提供了多种生命周期函数，帮助开发者在适当的时机进行相关的逻辑处理。 UniApp 的生命周期函数可以分为页面生命周期和组件…...

编程日记 2025/7/14 4:24:03

vue3-生命周期钩子函数

在 Vue 3 中，**生命周期函数**是指在组件的不同阶段自动执行的一些特殊函数。这些函数就像组件的“生老病死”的各个阶段，你可以在不同阶段执行不同的操作。生命周期的主要阶段： 1. **创建阶段**（组件还没有出现在页面上&#x…...

编程日记 2025/7/17 10:30:43

教程视频

零 环境搭建

学习环境

创建项目

一 组合API&选项API

选项式

组合式

二 setup

基本概念

定义组件名称

1 使用插件式

2 使用插件 vite-plugin-vue-setup-extend

3 使用defineOptions

三 ref&reactive

ref

修改数据

reactive

修改数据

使用原则

四 toRef&toRefs

toRef

toRefs

相关文章：

零环境搭建

一组合API&选项API