ref、reactive、toRef、toRefs使用与区别

reactive
- 只能传入对象
- 传参：reactive(arg)
  - arg为普通对象
- 返回响应式对象，不管层级多深，都能响应
- 解构、扩展运算符会失去响应式（$1）
ref
- 可以传入任意类型（基本类型、引用类型）
- 传参：ref(arg)
  - arg为任意类型，推荐基本类型使用
toRef
- 针对reactive中$1的问题，创建了toRef
- 传参：toRef(arg1, arg2)
  - 参数1：arg1 - reactive响应式对象
  - 参数2：arg2 - 该响应对象中的某个属性。
- 可以针对reactive创建的响应式对象中的某个属性创建一个ref，且两个之间保持引用关系。
  
  也就是说用一个对象的某个属性，可以通过两个方式来改变，结果是一致的，都反应到了该响应式对象上来。
  
  例：
```
// 响应式对象
const state = reactive({
    name: 'cc',
    age: 18
})

// 通过toRef创建一个Ref响应式
const nameRef = toRef(state, 'name')

// 此时有两种方式来改变state中的name属性，且都具有响应式

// 方式一
state.name = 20 // state = {name: 'cc', name: 20}

// 方式二
nameRef.value = 30 // state = {name: 'cc', name: 30}
```
toRefs
- 从名字上可以看出跟toRef是相似的，其实确实也是相似的
- 区别
  - toRef是将reactive中的某个属性转为ref
  - toRefs是一次性将reactive中的所有属性都转为ref
- 传参：toRefs(arg1)
  - 只接受一个参数，为reactive响应式对象
- 对于reactive中存在的$1问题，toRefs返回的响应式对象可以进行解构、扩展运算符等操作，而不会失去响应式。