合集篇：
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糖簡化代碼