使用ref聲明一個響應式對象并使用

<script lang="ts" setup>
import { ref } from 'vue';
const message = ref("HelloWorld")
message.value="被修改了啊~~"
</script>
<template>{{ message }}
</template>

ref() 接收參數，并將其包裹在一個帶有 .value 屬性的 ref 對象中返回,如果在js中使用需要XX.value來操作其內容，在模板中可以直接使用，因為已經自動解包了

為什么ref可以變成響應式

vue會在首次渲染的時候追蹤所有的ref，將ref對象進行一次封裝，如果是普通對象我們是沒辦法檢測他的修改和訪問的，所以我們將他封裝成對象，然后通過getter和 setter方法攔截對象屬性的get和set操作。
.value屬性就是用來檢測ref合適被訪問和修改的，可以參考如下偽代碼：

// 偽代碼，不是真正的實現
const myRef = {_value: 0,get value() {track()return this._value},set value(newValue) {this._value = newValuetrigger() //用來做一些通知，}
}

使用reactive聲明一個響應式對象并使用

<script lang="ts" setup>
import { ref, reactive } from 'vue';
const message = ref("HelloWorld")
const user = reactive({name: "三千",age: 18
})
user.name = "八百"
</script>
<template>{{ message }}{{ user.name }}
</template>

1. reactive()將對象本身變的具有響應性，所以他只能用于對象類型，不支持string number boolean等原始類型。
2. reactive() 返回的是一個原始對象的 Proxy，它和原始對象是不相等的.

const raw = {}
const proxy = reactive(raw)// 代理對象和原始對象不是全等的
console.log(proxy === raw) // false

3. reactive對結構操作不友好，如果我們對reactive進行結構，那他將失去響應性鏈接

在TS中如何使用 ref 和reactive

<script lang="ts" setup>
import { ref, reactive } from 'vue';
const message = ref<string>("HelloWorld")
interface User {name: string,age: number
}
const user = reactive<User>({name: "三千",age: 18
})
user.name = "八百"
</script>
<template>{{ message }}{{ user.name }}
</template>

怎么選擇

雖然沒有嚴格的規則，但在某些情況下，使用一些特定的內容才是最佳實踐，當然你也能夠 ref 一把梭哈

1. 如果你需要一個響應式原始值，那么使用 ref() 是正確的選擇，要注意是原始值
2. 如果你需要一個響應式對象，層級不深，那么使用 ref也可以
3. 如果您需要一個響應式可變對象，并且對象層級較深，需要深度跟蹤，那么使用 reactive

你可以把 reactive 看成 ref 的子集，ref 可以解決一切煩惱

參考地址

官網
ref和reactive你必須要知道的使用場景和差異

本文大部分內容皆為參考官網，并加以自己的一定理解，如有不對之處，望大家不吝指正