前言
就在1月20日，尤大大官宣Vue3将在2022年2月7日成为默认版本，由此可见Vue3将是2022必火的技术之一，所以，学（卷）起来吧，这篇文章我们就来理一理关于Vue3响应式部分的内容和API，希望对大家有所帮助~
一、reactive()
我们可以使用reactive创建一个响应式对象：
import { reactive } from 'vue' const state = reactive({ count: 0 }) 复制代码
reactive()的局限性
reactive()API有两条限制：
- 仅对对象类型有效（对象、数组和
Map、Set这样的集合类型），而对string、number和boolean这样的 基础类型 无效。 - 因为 Vue 的响应式系统是通过属性访问进行追踪的，因此我们必须始终保持对该响应式对象的引用。这意味着我们不可以随意地 “替换” 一个响应式对象：
let state = reactive({ count: 0 }) // 这将不会按照你的期望工作 state = reactive({ count: 1 }) 复制代码
并且，从响应式对象中解构出属性时，也会失去响应式！
const state = reactive({ count: 0 }) // 函数接受一个纯数字 // 并不会追踪 state.count 的变化 callSomeFunction(state.count) // count 已经是一个 // 与 state 响应性失去连接的纯数字 let { count } = state // 不会影响原状态 count++ 复制代码
你可能会想问这是响应式对象，那么我如果要创建一个响应式数字或字符串应该怎么办呢？这时候就得用ref()这个API了。
二、ref()
为了解决 reactive() 带来的限制，提供了另一个 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 复制代码
所以获取ref定义的响应式变量时别忘了加.vaule!!!，但如果你在模板中使用ref定义的响应式变量不需要加.value，当 ref 被暴露给模板、在渲染上下文中被访问时，它们会自动地 “解套” 所以无需使用 .value。这里我们再次使用了之前的示例，并使用了 ref()。
<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> 复制代码
三、$ref()响应式语法糖
必须对ref使用.value还是有一（亿）点繁琐，原因是受限于 JavaScript 语言能力约束而带来的缺点，Vue 提供了一个语法糖，在编译时作相应转换，通过编译时期自动在合适的位置上添加上 .value 来改进开发体验。这个语法糖就是$ref，我们可以像这样书写上面的示例：
<script setup> let count = $ref(0) function increment() { // 不再需要.value count++ } </script> <template> <button @click="increment">{{ count }}</button> </template> 复制代码
要注意的是，这个API还处于实验性阶段，最后落地可能会有些许更改。
四、<script setup>
<script setup>是Vue3.2中的一个语法糖，当使用单文件组件（SFC）时，我们可以使用 <script setup> 来简化大量样板代码。
例如这里有一个点击按钮实现加1的场景，在Vue3.0中你需要这么写：
import { reactive } from 'vue' export default { setup() { const state = reactive({ count: 0 }) function increment() { state.count++ } // 暴露 state 到模板 return { state, increment } } } 复制代码
<button @click="increment"> {{ state.count }} </button> 复制代码
在setup函数中手动暴露状态和方法非常繁琐。好消息是可以使用
<script setup>简化代码！
直接看代码：
<script setup> import { reactive } from 'vue' const state = reactive({ count: 0 }) function increment() { state.count++ } </script> <template> <button @click="increment"> {{ state.count }} </button> </template> 复制代码
<script setup> 内的顶层的导入和变量声明都将在相应组件的模板上自动生效,这样一来书写起来十分的舒适，我也相信在未来这将是用Vue写代码的正确姿势！
最后
⚽本文介绍了reactive，ref，$ref以及<script setup>的用法以及使用场景，相信你应该对这几个概念更清晰了~
⚾如果你对这篇文章感兴趣欢迎点赞关注+收藏，更多精彩知识正在等你！😘
