setup 语法糖

当使用单文件组件（SFC）时，我们可以使用<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>

reactive

[reactive()](https://staging-cn.vuejs.org/api/reactivity-core.html#reactive)函数创建一个响应式对象或数组

import { reactive } from 'vue'
const state = reactive({ count: 0 })

reactive() API 有两条限制：

1. 仅对对象类型有效（对象、数组和 Map、Set 这样的集合类型），而对 string、number 和 boolean 这样的 原始类型 无效。
2. 因为 Vue 的响应式系统是通过 property 访问进行追踪的， 当我们将响应式对象的 property 赋值或解构至本地变量时，或是将该 property 传入一个函数时，我们会失去响应性：
   ```javascript const state = reactive({ count: 0 })

// n 是一个局部变量，同 state.count // 失去响应性连接 let n = state.count // 不影响原始的 state n++

// count 也和 state.count 失去了响应性连接 let { count } = state // 不会影响原始的 state count++

// 该函数接收一个普通数字，并且 // 将无法跟踪 state.count 的变化 callSomeFunction(state.count)

<a name="JJ5Jx"></a>
# ref 定义响应式变量 
  为了解决 reactive() 带来的限制  ,Vue 提供了一个 `[ref()](https://staging-cn.vuejs.org/api/reactivity-core.html#ref) `方法来允许我们创建可以使用任何值类型的响应式 **ref**
```javascript
// 使用时需要引入
import { ref } from 'vue'
const count = ref(0)
console.log(count) // { value: 0 }
console.log(count.value) // 0
count.value++
console.log(count.value) // 1

ref 被传递给函数或是从一般对象上被解构时，不会丢失响应性：

const obj = {
  foo: ref(1),
  bar: ref(2)
}
// 该函数接收一个 ref
// 需要通过 .value 取值
// 但它会保持响应性
callSomeFunction(obj.foo)
// 仍然是响应式的
const { foo, bar } = obj

ref 也会在模板中自动解包，因此在模板表达式中引用时无需添加 .value

使用ts为ref进行类型标注

为 ref 内的值指定一个更复杂的类型，可以通过使用 Ref 这个类型：

import { ref, Ref } from 'vue'
const year: Ref<string | number> = ref('2020')
year.value = 2020 // 成功！

或者，在调用 ref() 时传入一个泛型参数，来覆盖默认的推导行为：

// 得到的类型：Ref<string | number>
const year = ref<string | number>('2020')
year.value = 2020 // 成功！

获取dom元素 ref

为了通过组合式 API 获得该模板 ref，我们需要声明一个同名的 ref：

<template>
  <input ref="input" />
</template>
<script setup>
import { ref, onMounted } from 'vue'
// 声明一个 ref 来存放该元素的引用
// 必须和模板 ref 同名
const input = ref<HTMLInputElement | null>(null)
// 在这个地方打印input 可能为空,因为元素可能还没有挂载上
// 解决方法： 在onMounted里打印
console.log(input)//null
onMounted(() => {
  input.value.focus()
  //此时可以获取 dom元素
})
</script>