在使用Options API时声明响应式数据非常简单。data选项中的所有内容都会自动变为响应式，并在模板中可用。唯一需要注意的是将data设置为一个函数，并防止在所有组件实例之间共享状态。使用Composition API并不那么简单。状态声明必须明确地使用两个可用的实用函数（ref和reactive）来完成，并且在开始时需要注意多个特殊情况。

Reactive
让我们从简单的开始，Reactive。它接受一个对象或数组，并使用JavaScript代理使其具有响应性。

// 堆代码 duidaima.com
import { reactive } from 'vue'
const state = reactive({ count: 0 })

State 变量的行为与普通对象完全相同。

<script setup>
import { reactive } from 'vue'

const state = reactive({ count: 0 })

function increment() {
  state.count++
}
</script>

<template>
  <button @click="increment">
    {{ state.count }}
  </button>
</template>

同样适用于具有多个层级的对象。这很简单！但是有个问题。这只适用于复杂类型（ Objects 和 Arrays ）和集合类型（ Maps 和 Sets ）。对于原始类型如 string 、 number 或 boolean ，我们需要采用不同的方法。

Ref
为了克服这个限制，我们需要使用 ref 实用工具。声明方式与响应式类似。

import { ref } from 'vue'
const count = ref(0)

Ref 接受一个值并返回一个响应式对象。该值在对象内部以 .value 属性的形式返回对应的值。

const count = ref(0)
console.log(count) // { value: 0 }
console.log(count.value) // 0
count.value++
console.log(count.value) // 1

在模板中使用时，不需要 .value

<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">
    {{ count }} // no .value needed
  </button>
</template>

但要小心！这只适用于顶级属性。以下代码片段将产生 [object Object] 。

// DON'T DO THIS
<script setup>
import { ref } from 'vue'

const object = { foo: ref(1) }

</script>

<template>
  {{ object.foo + 1 }}  // [object Object]
</template>

为了解决这个问题，我们需要将 foo 设置为顶级属性。

<script setup>
import { ref } from 'vue'

const object = { foo: ref(1) }
const { foo } = object
</script>

<template>
  {{ foo + 1 }}  // This works as expected
</template>

请注意，对于数组和集合类型，也需要使用 .value 。

const books = reactive([ref('Book title')])
console.log(books[0].value) // need .value here
const map = reactive(new Map([['count', ref(0)]]))
console.log(map.get('count').value) // need .value here

非响应性数据
以前声明非响应式数据并不直观。通常所有内容都声明在data中，这会创建不必要的观察者并导致轻微（可以忽略不计）的性能下降。

<script setup>
const path = `path/to/image`;
</script>

<template>
  <img :src='path' />
</template>

Readonly（只读）
可以使用 readonly 来防止对状态进行更改。它接受一个对象（响应式或普通）或一个ref，并返回一个不可变的代理。

const state = reactive({ count: 0 })
const copy = readonly(state)
state.count++ // Works fine
copy.count++ // Fails with a warning

结束
由于文章内容篇幅有限，今天的内容就分享到这里!