「这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战」。

前言

就在1月20日，尤大大官宣Vue3将在2022年2月7日成为默认版本，由此可见Vue3将是2022必火的技术之一，所以，学（卷）起来吧，这篇文章我们就来理一理关于Vue3响应式部分的内容和API，希望对大家有所帮助~

一、reactive()

我们可以使用reactive创建一个响应式对象：

import { reactive } from 'vue'

const state = reactive({ count: 0 })

reactive()的局限性

reactive()API有两条限制：

1. 仅对对象类型有效（对象、数组和 Map、Set 这样的集合类型），而对 string、number 和 boolean 这样的 基础类型 无效。
2. 因为 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>的用法以及使用场景，相信你应该对这几个概念更清晰了~
⚾如果你对这篇文章感兴趣欢迎点赞关注+收藏，更多精彩知识正在等你！😘
🏀GitHub 博客地址: github.com/Awu1227 。
🏉此外笔者还有其他专栏，欢迎阅读~
🏐玩转CSS之美
🎳深入浅出JavaScript