Vue3.0学习二：ref和reactive的分别用法

ref和reactive有什么用？

在vue3.0中为了象vue2.0一样实现data区域块中定义响应状态的变量，在vue3.0中script setup中进行定义这些带响应状态的变量。 记下以下几句总结的话：

• ref是reactive的二次包装，定位在基本类型，即string、number 和 boolean 这样的 原始类型，虽然官方也说到可以定义对象类型（不建议），即对象、数组和 Map、Set 这样的集合类型。
• reactive是为了定义对象类型，即对象、数组和 Map、Set 这样的集合类型。
• ref在模板中即中使用时，直接用ref的属性即可，但在script setup中的js中必须通过属性名.value才能获得值或者设置值。官方还有一个$ref的用法（暂时不推荐）。

ref的场景用法？

用来定义带有响应状态的变量，这个变量是基本类型string、number 和 boolean等，例子：

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

const count = ref(0)

function increment() {
  count.value++   // 需要.value
}
</script>

<template>
  <button @click="increment">
    {{ count }} <!-- 无需 .value -->
  </button>
</template>

reactive的场景用法？

用来定义带有响应状态的变量,这个变量是对象类型，即对象、数组和 Map、Set 这样的集合类型，例如：

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

const state = reactive({ count: 0 })

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

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