在setup中如果是直接定义遍历数据并不是响应式数据，和vue2中的data选项提供的数据不一样，vue2的data中返回的数据全部都是响应式数据。
<script setup>
// 这样提供的数据并不是响应式数据，和vue2中的data选项提供的数据并不是一样。
let state = 888
const getState = () => {
return state
}
const setState = () => {
state = 999
}
</script>
<template>
<div>
hello vue3
<p>state: {{ state }}</p>
<p>state: {{ getState() }}</p>
<!--修改不会生效，因为并不是响应式数据-->
<button @click="setState()">修改state的值为999</button>
</div>
</template>
使用reactive创建响应式数对象
reactive函数支持传递“对象类型”的参数，并返回一个响应式数据对象。
缺点：
只能传递“对象类型”的参数（也就是你不能直接给一个数字、字符串这种简单类型的）
可以用过ref()函数来代替reactive()来解决这个缺点，下面会写。
使用步骤：
- 导入reactive函数
- 使用reactive函数并传递一个对象类型的参数
使用实例
<script setup>
// 1. 导入reactive函数
import {reactive} from "vue";
// 2. 使用reactive函数并传递一个对象类型作为参数
const myData = reactive({
state: 888
})
const getState = () => {
// 使用的时候是通过对象来操作
return myData.state
}
const setState = () => {
// 设置的时候也是一样，通过对象操作
myData.state = 999
}
</script>
<template>
<div>
hello vue3
<p>state: {{ getState() }}</p>
<button @click="setState()">修改state的值为999</button>
</div>
</template>
使用ref创建响应式数据对象
上面的reactive函数创建的响应式对象有个缺点就是只能接收对象类型的参数。
而ref()函数正好可以解决这个问题，但是使用上有一些差别和注意事项！
<!-- 使用ref()函数创建响应式数据对象 -->
<script setup>
// 1. 同样地，也是要先导入ref函数
import {ref} from "vue";
// 2. 使用ref函数并传递你想要的数据进行包装。
const state = ref(666)
const getState = () => {
// 在script中，使用ref()函数包装过的数据，必须要用.value来调用、和设置值
return state.value
}
const setState = () => {
// 在script中，使用ref()函数包装过的数据，必须要用.value来调用、和设置值
state.value = 999
}
</script>
<template>
<div>
hello vue3
<!-- **但是在模板中，就不需要使用.value，因为会自动帮你做了** -->
<p>state: {{ state }}</p>
<button @click="setState()">修改state的值为999</button>
</div>
</template>