组合式api-通过reactive和ref提供响应式数据

在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>