我们使用组合API代替选项API，现在我们就来学习如何代替选项API中的data

1.使用ref声明响应式数据

我们知道在选项API中的data是响应式的，在data改变时，会触发页面更新，
在使用组合API时，如果想要数据时响应式的，第一种方式就是使用ref声明数据，

ps:这节课学习的ref的用法跟我们之前说的使用ref获取组件实例不是一种用法，大家注意区分

ref是一个方法，使用时我们要先导入

import { ref } from 'vue'

一般我们使用ref来声明一个基础类型的数据，比如Number、String、Boolean等

const msg = ref('hello')

完整的声明ref数据的代码

<script>
import { ref } from 'vue'
export default {
  name: 'App',
  setup() {
    const msg = ref('hello')
    const count = ref(0)
  },
}
</script>

2.在模板中使用响应式数据

在template中绑定时，用法和之前一样，使用双花括号或者v-bind:等，
但是有一个需要注意，要在模板中绑定的变量，必须在setup函数中使用return返回

<script>
import { ref } from 'vue'
export default {
  name: 'App',
  setup() {
    const msg = ref('hello')
    const count = ref(0)
    return {    // 新增
      msg,
      count,
    }
  },
}
</script>

在template中使用

  <div>{{ msg }}</div>
  <div>{{ count }}</div>

最后显示结果：

3.改变和获取ref变量的值

有一点需要注意一下，使用ref声明的变量，在js代码中，我们获取或者改变它的值时，需要使用它的.value属性，
比如我们打印一下msg的值，要写成

console.log(msg.value)

要改变msg的值时

msg.value = 'hello 林哥'

但是在template绑定的时候，并不需要添加.value

4.使用reactive声明响应式数据

reactive和ref一样是一个方法，使用时需要先导入

import { ref, reactive} from 'vue'

reactive用来声明复杂类型的数据，比如说数组、对象等，我们这里就来声明一个数组

import { ref, reactive } from 'vue'
export default {
  name: 'App',
  setup() {
    const msg = ref('hello')
    const count = ref(0)

    const list = reactive(['苏格拉底', '柏拉图', '亚里士多德']) // 新增
    return {
      msg,
      count,
      list,  // 新增
    }
  },
}
</script>

template的写法还是和之前一样

  <ul>
    <li v-for="item in list" :key="item">{{ item }}</li>
  </ul>

显示结果：

改变reactive声明的数据时，不用加.value

list.push('亚历山大')

总结一下这节课的重点
1.使用ref声明基本类型的数据，使用reactive声明复杂类型的数据
2.需要在setup函数中将数据return，才能在template中使用
3.在js中获取或者改变ref数据的值时，需要加上.value，在template中不用

建议小伙伴自己写一写，在写得过程中可能会发现问题，这样既可以增加自己的思考，又可以加深学习的印象。
比如说，我们把list直接赋值另外一个数组，因为这是在开发时非常常见的，这样做行不行。后续我们会解决这个问题。