响应式基础
声明响应式状态
ref()
在组合式API中，推荐使用ref()函数来声明响应式状态：
import { ref } from 'vue'const count = ref(0)ref()接收参数，并将其包裹在一个带有.value属性的ref对象中返回：
const count = ref(0)console.log(count) // { value: 0 }
console.log(count.value) // 0count.value++
console.log(count.value) // 1
要在组件模板中访问 ref，请从组件的setup()函数中声明并返回它们：
import { ref } from 'vue'export default {// `setup` 是一个特殊的钩子，专门用于组合式 API。setup() {const count = ref(0)// 将 ref 暴露给模板return {count}}
}
(注意，在模板中使用 ref 时，我们不需要附加.value为了方便起见，当在模板中使用时，ref 会自动解包。)
你也可以直接在事件监听器中改变一个 ref：
<button @click="count++">{{ count }}
</button>
对于更复杂的逻辑，我们可以在同一作用域内声明更改 ref 的函数，并将它们作为方法与状态一起公开：
import { ref } from 'vue'export default {setup() {const count = ref(0)function increment() {// 在 JavaScript 中需要 .valuecount.value++}// 不要忘记同时暴露 increment 函数return {count,increment}}
}然后，暴露的方法可以被用作事件监听器：
<button @click="increment">{{ count }}
</button>
以上例子没有使用任何构建工具。
<script setup>
在setup()函数中手动暴露大量的状态和方法非常繁琐。幸运的是，我们可以通过使用单文件组件（SFC)来避免这种情况。我们可以使用<script setup>来大幅度地简化代码：
<script setup>
import { ref } from 'vue'const count = ref(0)function increment() {count.value++
}
</script><template><button @click="increment">{{ count }}</button>
</template><script setup>中的顶层的导入、声明的变量和函数可在同一组件的模板中直接使用。你可以理解为模板是在同一作用域内声明的一个 JavaScript 函数——它自然可以访问与它一起声明的所有内容。
深层响应式
Ref 可以持有任何类型的值，包括深层嵌套的对象、数组或者 JavaScript 内置的数据结构，比如Map。
Ref 会使它的值具有深层响应性。这意味着即使改变嵌套对象或数组时，变化也会被检测到：
import { ref } from 'vue'const obj = ref({nested: { count: 0 },arr: ['foo', 'bar']
})function mutateDeeply() {// 以下都会按照期望工作obj.value.nested.count++obj.value.arr.push('baz')
}
Dom更新时机
当你修改了响应式状态时，DOM 会被自动更新。但是需要注意的是，DOM 更新不是同步的。Vue 会在“next tick”更新周期中缓冲所有状态的修改，以确保不管你进行了多少次状态修改，每个组件都只会被更新一次。
要等待 DOM 更新完成后再执行额外的代码，可以使用nextTick() 全局 API：
import { nextTick } from 'vue'async function increment() {count.value++await nextTick()// 现在 DOM 已经更新了
}
reactive()
还有另一种声明响应式状态的方式，即使用reactive()API。与将内部值包装在特殊对象中的 ref 不同,reactive() 将使对象本身具有响应性：
import { reactive } from 'vue'const state = reactive({ count: 0 })<button @click="state.count++">{{ state.count }}
</button>
响应式对象是JavaScript,其行为就和普通对象一样。不同的是，Vue 能够拦截对响应式对象所有属性的访问和修改，以便进行依赖追踪和触发更新。
reactive()将深层地转换对象：当访问嵌套对象时，它们也会被reactive()包装。当 ref 的值是一个对象时,ref()也会在内部调用它。
值得注意的是，reactive() 返回的是一个原始对象的Proxy，它和原始对象是不相等的：
const raw = {}
const proxy = reactive(raw)// 代理对象和原始对象不是全等的
console.log(proxy === raw) // false只有代理对象是响应式的，更改原始对象不会触发更新。因此，使用 Vue 的响应式系统的最佳实践是仅使用你声明对象的代理版本。
为保证访问代理的一致性，对同一个原始对象调用reactive()会总是返回同样的代理对象，而对一个已存在的代理对象调用reactive()会返回其本身：
// 在同一个对象上调用 reactive() 会返回相同的代理
console.log(reactive(raw) === proxy) // true// 在一个代理上调用 reactive() 会返回它自己
console.log(reactive(proxy) === proxy) // truereactive()的局限性
reactive()API有一些局限性：
1.有限的值类型：它只能用于对象类型（对象、数组和如Map、Set这样的集合类型）。他不能持有如string、number、或boolean这样的原始类型。
2.不能替换整个对象：由于 Vue 的响应式跟踪是通过属性访问实现的，因此我们必须始终保持对响应式对象的相同引用。这意味着我们不能轻易地“替换”响应式对象，因为这样的话与第一个引用的响应性连接将丢失。
3.对结构操作不友好：当我们将响应式对象的原始类型属性解构为本地变量时，或者将该属性传递给函数时，我们将丢失响应性连接。
由于这些限制，建议使用ref()作为声明响应式状态的主要 API。
在模板中解包的注意事项
在模板渲染上下文中，只有顶级的 ref 属性才会被解包。
在下面的例子中，const和object是顶级属性，但object.id不是：
const count = ref(0)
const object = { id: ref(1) }因此，会出现object.id + 1不按照预期工作。
渲染的结果是[object Object]1，因为在计算表达式时object.id没有被解包，仍然是一个ref对象。为了解决这个问题，可以将id解构为一个顶级属性：
const { id } = object{{ id + 1 }}
另一个需要注意的点是，如果 ref 是文本插值的最终计算值（即{{ }}标签),那么它将被解包，因此一下内容将被渲染为1:
{{ object.id }}
该特性仅仅是文本插值的一个便利特性，等价于{{ object.id.value }}。
