### reactive()
返回一個對象的響應式代理。一般用于定義復雜數據類型的響應式。
響應式轉換是“深層”的:它會影響到所有嵌套的 property。一個響應式對象也將深層地解包任何`ref`property,同時保持響應性。
**注意**: 當訪問到某個響應式數組或 Map 這樣的原生集合類型中的 ref 元素時,不會執行`ref`的解包。
```ts
const obj = reactive({ count: 0 })
obj.count++
```
**`ref`的解包**
```ts
const count = ref(1)
const obj = reactive({ count })
// ref 會被解包
console.log(obj.count === count.value) // true
// 會更新 `obj.count`
count.value++
console.log(count.value) // 2
console.log(obj.count) // 2
// 也會更新 `count` ref
obj.count++
console.log(obj.count) // 3
console.log(count.value) // 3
```
**注意**: 當訪問到某個響應式數組或 Map 這樣的原生集合類型中的`ref`元素時,不會執行`ref`的解包:
```ts
const books = reactive([ref('Vue 3 Guide')])
// 這里需要 .value
console.log(books[0].value)
const map = reactive(new Map([['count', ref(0)]]))
// 這里需要 .value
console.log(map.get('count').value)
```
將一個`ref`賦值給為一個`reactive`屬性時,該`ref`會被自動解包:
```ts
const count = ref(1)
const obj = reactive({})
obj.count = count
console.log(obj.count) // 1
console.log(obj.count === count.value) // true
```
#### 為`reactive()`標注類型
`reactive()`也會隱式地從它的參數中推導類型:
```ts
import { reactive } from 'vue'
// 推導得到的類型:{ title: string }
const book = reactive({ title: 'Vue 3 指引' })
```
要顯式地標注一個`reactive`property 的類型,我們可以使用接口:
```ts
import { reactive } from 'vue'
interface Book {
title: string
year?: number
}
const book: Book = reactive({ title: 'Vue 3 指引' })
```
或者,在調用`reactive()`時傳入一個泛型參數,來覆蓋默認的推導行為:
**不推薦使用`reactive()`的泛型參數,因為處理了深層次 ref 解包的返回值與泛型參數的類型不同。**
```ts
import { reactive } from 'vue'
interface Book {
title: string
year?: number
}
const book = reactive<Book>({ title: 'Vue 3 指引' })
```