ref() 是什么

ref() 是一個函數；
ref() 函數用來聲明響應式的狀態（就是來聲明變量的）
ref() 函數聲明的變量，是響應式的，變量的值改變之后，頁面中會自動重新渲染。

ref() 有什么特點

1.ref() 可以聲明基礎類型的變量，也可以聲明復雜類型的變量；如 基本的 number 類型、string類型，以及 json對象類型都可以進行聲明；

2.ref() 聲明的變量，是深度響應式的；比如一個變量是json類型的，會有多層的嵌套，那么深層嵌套的屬性值發生改變時，該變量同樣是響應式的；

3.ref() 聲明的變量 在 script 腳本中使用時，需要添加一個 [.value] 屬性才能取到對應的值；如 ： 聲明變量： const a = ref(100);使用變量： console.log(a.value); // 添加 .value 才可以真正訪問到變量的值；

4.ref() 聲明的變量  在template 模板中，可以直接使用，無需使用 [.value] 屬性,這是因為 vue3 在渲染頁面時進行了自動的解包；如 ：聲明變量： const a = ref(100);模板中使用變量 ：<div>{{ a }}</div>  

ref() 基本使用案例

案例代碼

<template>
<div>msg : {{ msg }}<br>num : {{ num }}<br>stu : {{ stu }}
</div>
</template><script setup lang="ts">// 引入 ref 
import {ref} from 'vue'
// 使用 ref 聲明響應式狀態
const msg = ref('hello')
const num = ref(100)
const stu = ref({id:'001',name:'小明',classInfo:{classId:1001,className:'開心一班',}})
// 邏輯代碼中使用響應式狀態
console.log('msg : ',msg)
console.log('num : ',num)
console.log('stu : ',stu)console.log('msg.value : ',msg.value)
console.log('num.value : ',num.value)
console.log('stu.value : ',stu.value)// 測試響應式的 ： 延遲10s 修改一下上述變量的值
setTimeout(()=>{msg.value = 'hello world'num.value = 666stu.value.classInfo.className = '快樂足球一班'
},10000)</script><style scoped>
</style>

案例執行結果分析

1、一開始頁面展示的是各個變量初始化的值，控制臺打印的是初始化的值；
2、因為有一個 10s 鐘的延時，10s 鐘后變量的值發生改變，頁面隨之改變
效果圖如下：

1、初始化效果

2、10s鐘后的效果

ref() 添加 類型

vue3 是支持ts 的，所以如果想使用ts 的類型特征進行變量的類型限制也是可以的。
對于 變量的類型，不僅僅局限于 基本的數據類型，也可以是自己定義的復雜類型，
例如，通過 interface 聲明的類型。

方式一：自動類型推斷

ts 本身就可以進行自動類型的轉換，
因此，在定義變量、修改變量的值的時候，會自動進行類型的推斷。
如果，變量修改值時的賦值與原來定義的值的類型不相符，會提示異常。
案例代碼如下 ：

<template>
</template><script setup lang="ts">// 引入 ref 
import {ref} from 'vue'// 使用 ref 聲明響應式狀態
const msg = ref('hello')// 自動進行類型推斷 ：
// 聲明的時候是字符串string類型，但是賦值的時候是數字number類型，
// 此時會直接提示錯誤
msg.value = 100;</script><style scoped>
</style>

方式二：通過 Ref 指定變量的類型

使用 Ref 進行變量類型聲明的時候，可以聲明多個類型，
這也是ts的語法特性，可以給變量聲明多種類型。
案例代碼如下 ：

<template>
</template><script setup lang="ts">// 引入 ref 
import {ref} from 'vue'
// 引入 Ref
import type { Ref } from 'vue';// 使用 ref 聲明響應式狀態
const msg : Ref<string | number> = ref('hello')
// 聲明了類型之后，就可以正常賦值了
msg.value = 100;
// 但是因為變量只能是 string 或者 number 類型，所以賦值布爾類型時就會提示錯誤
msg.value = true</script><style scoped>
</style>

方式三：使用ref的泛型參數代替默認的類型推倒

這種方式實際上是對 方式二 的一種寫法的代替，
無需再引入 Ref 了。
案例代碼如下：

<template>
</template><script setup lang="ts">// 引入 ref 
import {ref} from 'vue'// 使用 ref 聲明響應式狀態
const msg  = ref<string|number>('hello')
// 聲明了類型之后，就可以正常賦值了
msg.value = 100;
// 但是因為變量只能是 string 或者 number 類型，所以賦值布爾類型時就會提示錯誤
msg.value = true</script><style scoped>
</style>

附加 ： 使用自定義的類型進行類型限制

<script setup lang="ts">
// 引入 ref 
import {ref} from 'vue'// 自定義一個復雜的數據類型
interface Stu {id:string,name:string,classInfo:{classId:number,className:string}
}// 使用泛型的方式進行變量類型的限制
const stu = ref<Stu>({id:'001',name:'小明',classInfo:{classId:1001,className:'開心一班',}})
</script>