一，前言
1.ref和reactive是vue3基于组合式api模式下，在setup中用于声明的具有响应式的数据的方法。
二，ref
1.ref用于声明基础类型响应式数据。
import {ref} from 'vue'
const age =ref(10) //声明响应式数据
2.ref返回的是被包装过的响应式对象，在setup中访问和修改ref需要使用.value属性
age.value=21
3.在模板中使用时无需使用.value，直接使用即可
<div>{{age}}</div>
4.当ref数据作为props传递给子组件的时候，在子组件里需要使用toRef或者toRefs建立引用，否则数据不是响应式的。且需要注意，如果在子组件中直接操作了这个引用之后，则和父组件不在具有联系。
三，reactive
1.reactive用于声明复杂类型响应式数据。
import {reactive} from 'vue'
const man=ref({name:'jolin',age:21}) //声明响应式数据
2.reactive返回的是被包装过的响应式对象，在setup中访问和修改直接使用属性即可
man.age=20
3.声明时未定义，动态添加的属性也会是响应式的
man.weight = '50kg' //weight具有响应性
4.在模板中使用属性的形式
<div>{{man.name}}</div>
5.将reactive声明的响应式数据传递给子组件时，在子组件可以直接使用。
四，注意事项
1.注意当ref用于在模板中作为真值判断时，直接使用ref恒为true, 需要使用.value才能正确显示
<div v-if="age"></div> //恒为true
<div v-if="age.value"></div> //正确
2.注意不能解构reactive数据，解构出的数据会失去响应式。
3.在任何地方访问响应式数据都能拿到最新的。
