合集篇：
1.【Vue3】创建并运行一个简易的Vue3项目
2.【Vue3】编写vue实现一个简单效果，并使用setup糖简化代码

ref

ref 定义对象类型的响应式数据

1. 概念理解

a. 概念

• ref 不仅可以定义基本类型数据，还可以定义对象类型的响应式数据。
• 与之相比，reactive只能定义对象类型的响应式数据。

b. 分析

ref虽然能够定义对象类型的响应式数据，但其在底层其实还是利用了reactive。

2. 代码实操

代码场景

代码场景为利用reactive定义对象类型的响应式数据的场景：

<template><div class="Person"><h2>{{ human.name }}的年龄为{{ human.age }}</h2><button @click="addAge">修改年龄（+1）</button></div>
</template><script setup name="Person">import {reactive} from 'vue'let human = reactive({name:'zhangsan',age:30})function addAge(){human.age += 1}
</script><style>.Person {background-color: rgb(0, 238, 255);box-shadow: 0 0 10px;border-radius: 20px;padding: 20px;}
</style>

步骤一：导入ref

原代码中，导入的是reactive，这里将reactive改为ref即可：

import {ref} from 'vue'

步骤二：修改数据形式

原代码为：

let human = reactive({name:'zhangsan',age:30})

将reactive修改为ref：

let human = ref({name:'zhangsan',age:30})

这时运行项目，点击按钮是没反应的，还需要修改方法内使用数据的形式。

步骤三：修改方法内数据形式

原代码为：

human.age += 1

在human后面加个.value，最终<script>标签内容如下：

<script setup name="Person">import {ref} from 'vue'let human = ref({name:'zhangsan',age:30})function addAge(){human.value.age += 1}
</script>

步骤四：验证

终端中输入npm run dev后访问服务器，得到以下界面，点击修改年龄（+1）按钮，年龄的数据会加一：
在这里插入图片描述

3. 源代码：

https://download.csdn.net/download/qq_52161797/91950850

其它篇章：
1.【Vue3】01-创建Vue3工程
2.【Vue3】02-Vue3工程目录分析
3.【Vue3】03-编写app组件——src
4.【Vue3】04-编写vue实现一个简单效果
5.【Vue3】05-Options API和Composition API的区别
6.【Vue3】06-利用setup编写vue（1）
7.【Vue3】07-利用setup编写vue（2）-setup的语法糖
8.【Vue3】08-编写vue项目时，ref的使用（1）
9.【Vue3】09-编写vue时，reactive的使用
合集篇：
1.【Vue3】创建并运行一个简易的Vue3项目
2.【Vue3】编写vue实现一个简单效果，并使用setup糖简化代码