前提
ref、reactive、toRef、toRefs 这些方法 均需从 vue 中导入到组件。
ref、reactive、toRef、toRefs 创建的变量在 setup 中都需要 return { ... } 抛出才可在页面使用，除非你是为props创建响应式。

类型 是否触发页面改变 是否可以解构
ref 　　　　 是 否
reactive 　 是 否
toRef　　 否 否
toRefs　　 否 是

一、setup

setup 是vue3 新增的一个选项，他是组件内使用 composition API的入口
setup 执行时间是在 beforeCreate 和 created之间，这个结论时错误的。setup 再beforeCreate和created之前
setup 的两个参数 props context

  1. props指的是父组件传递过来的值，setup 中接受的props是响应式的，当传入新的props时会及时被跟新
  2. context 指的是上下文 触发事件 emit 插槽slots以及attrs

在使用props时不能使用 es6的解构，因为这会让props不支持响应式

二、ref

ref 用来创建基础数据类型的响应式数据

const a = ref(0)
console.log("aaa",a.value) // => 0

ref创建的响应式数据 在js 里需要加上.value 才能访问，在模板中可以直接通过变量名访问

  <div class="about">
    {{a}}
  </div>

三、reactive

reactive用来创建引用数据类型的响应式数据

   let info = reactive({
      name:'小明',
      age:18,
      sex:'男'
    })

四、toRef

toRef的作用，使用ref将某个对象的属性变成响应式数据，修改当前的数据是不会影响到原数据的，
但是使用toRef将对象的某个属性编程响应式数据，修改当前的数据式会影响到原数组的
toRef可以理解为是将对象的某个属性浅拷贝为某个值

setup() {
    const a = ref(0)
    let info = reactive({
      name:'小明',
      age:18,
      sex:'男'
    })
    const nameRef = toRef(info,'name')
    setTimeout(()=>{
      info.name="小红"
      console.log("info1=",info.name,nameRef.value) // => info1= 小红 小红
    },3000)
    setTimeout(()=>{
      nameRef.value='我是小虎'
      console.log("info2=",info.name,nameRef.value) // => info2= 我是小虎 我是小虎
    },6000)
    console.log("aaa",a.value)
    console.log("info",info)
    onMounted(() => {});
    return {
      a,
      info,
      nameRef
    }
  },

toRef 将经过reactive处理过的数据的某个属性拿到，然后修改这个属性，无论是修改原引用数据类型还是toRef处理后的数据，他们都会相互影响

五、toRefs

将对象的所有属性浅拷贝为另一个对象，

    const user = reactive({
      userName:'小朋友',
      age:25
    })
    const userMore = toRefs(user)
    userMore.userName.value="大朋友"
    console.log("userMore-userName=",userMore.userName.value,user.userName) // => userMore-userName= 小朋友 小朋友

使用toRefs处理后的数据 在使用时要加上 .value 不论是在模板还是在js中