我们使用组合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直接赋值另外一个数组，因为这是在开发时非常常见的，这样做行不行。后续我们会解决这个问题。
