组合式API：reactive和ref函数
reactive()
App.vue
<script setup>
// reactive: 接收一个对象类型数据，返回一个响应式的对象
// 问题：如果遇到简单类型(不是对象类型)怎么办呢？
import { reactive } from 'vue'
const state = reactive({
count: 100
})
const setCount = () => {
state.count++
}
</script>
<template>
<div>{{ state.count }}</div>
<button @click="setCount">+1</button>
</template>
ref()
App.vue
<script setup>
// 1.reactive: 接收一个对象类型数据，返回一个响应式的对象
// 问题：如果遇到简单类型(不是对象类型)怎么办呢？
// import { reactive } from 'vue'
// const state = reactive({
// count: 100
// })
// const setCount = () => {
// state.count++
// }
// 2.ref: 接收简单类型 或 复杂类型(对象类型)，返回一个响应式对象
// 本质： 是在原有传入数据的基础上，外层包了一层对象，包成了复杂类型
// 底层： 包成复杂类型之后，再借助 reactive 实现的响应式
// 注意：
// 1. 在script(脚本)中，访问数据，需要通过 .value
// 2. 在template(模板)中，不需要.value(帮我们扒了一层)
// 推荐：以后生命声明数据统一用 ref => 统一编码规范
import { ref } from 'vue'
const count = ref(0)
const setCount = () => {
count.value++
}
</script>
<template>
<div>{{ count }}</div>
<button @click="setCount">+1</button>
</template>
总结
