问题1：reactive定义数组，如下：
let arr = reactive([])
注意：当给arr赋值的时候，不能 arr=xxx 这样会取消arr的响应式
首先 需要声明一点ref、toRef、toRefs这三项在js中操作的时候都需要跟上‘.value’，页面当中正常使用无需‘.value’
一、关于ref
接受一个内部值并返回一个响应式且可变的 ref 对象，也就是ref可以接受一个普通类型的值，也可接受一个对象
let state = ref(0) let state = ref(true) let state = ref(null) let state = ref({})
在js中获取的时候
state.value
二、关于reactive
reactive 用于为对象添加响应式状态，接收一个js对象作为参数
let state = reactive({})
let state = reactive([])
注意：数组【[]】也是对象，但是对于数组来说，不能用等于【=】号赋值，这样会取消数据的响应式，如文章开头时所说。
在js中获取的时候
state.xxx
三、关于toRef和toRefs
区别在于
toRef：可以用来为源响应式对象上的某个 property 新创建一个 ref，即可以为某一个源响应式【下边具体介绍这里为啥要说源响应式】属性添加响应式
toRefs: 可以为一组源响应式【下边具体介绍这里为啥要说源响应式】属性添加响应式
译：源响应式指的初始化数据【下边具体介绍原因】
用法：toRef
第一种 let state1 = ref({name: '张三'}) let state2 = toRef(state1.value, 'name') 第二种 let state1 = reactive({name: '张三'}) let state2 = toRef(state1, 'name')
获取的时候
对于第一种方式取值
state2.value.nama
对于第二种方式取值
state2.value.nama
用法：toRefs
第一种 let state1 = ref({name: '张三'}) let state2 = toRefs(state1.value) // 通过ref定义的值，需要通过.value获取，即state1.value 第二种 let state1 = reactive({name: '张三'}) let state2 = toRefs(state1)
获取的时候
对于第一种方式取值
state2.value.nama
对于第二种方式取值
state2.value.nama
通过用法可以证实上边的区别：toRef针对的是某一项，toRefs针对的是一组。同时也可以证实ref、toRef、toRefs在js中取值需要加 ‘.value’
关于toRef和toRefs需要特别注意的是
关于网上其他文章的说法，通过toRef/toRefs创建的数据，当值改变的时候UI视图不会更新说法是片面的
对于toRef/toRefs创建数据，数据改变UI视图不变，这是由于初始定义的数据是非响应式的，如下
let state1 = {name: '张三'}
let state2 = toRef(state1, 'name')
let state3 = toRefs(state1)
这种情况下，
1、当state2.value.name改变时，UI视图不会变化。
2、同理state3.value.name改变时，UI视图不会变化。
但是对于toRef/toRefs创建数据，如果原始数据是响应式的，则UI视图会变化，如下：
let state0 = ref({name: '张三'}) let state1 = reactive({name: '张三'}) let state2 = toRef(state0.value, 'name') let state3 = toRefs(state1) 对于这种情况来说： 1、state2.value.name 或 state3.value.name改变时，此时UI是变化的
这里也就说明为啥上边用源响应式，因为有非响应式的时候
这里还有一点需要注意的是：不管初始数据（源数据）是响应式还是非响应式，toRef/toRefs创建的数据改变都会是初始数据改变
