vue3中的ref、computed、reactive、toRefs

在vue2中，data函数里返回的值直接为响应式的，但在vue3中我们需要使用一些函数才能达到这个效果。

setup函数中拿不到vue的this

1、ref 

本质为一个函数，输入参数为一个值（原始类型），返回响应式的对象

2、computed

本质为一个函数，输入参数是一个函数，可以将我们需要的值作为输入函数的返回值

例子：实现点击按钮，屏幕上的数加1

<template>
  <div id='app'>
    <img alt="vue logo" src="./assets/logo.png">
    <!-- ref对象在模板中引用时，vue可以直接把内部的值展示出来，不需要写count.value -->
    <h1>{
  {count}}</h1>
    <h1>{
  {double}}</h1>
    <button @click='increase'>点击</button>
  </div>
</template>

<script lang='ts'>
//ref API:是一个函数，输入参数为一个值，返回一个响应式对象
//computed API：是一个函数，输入参数为函数类型，该输入函数中包含咱们需要的值
//reactive:将响应式变量包裹在一起，更加清晰
import {computed, ref,reactive} from 'vue'

export defa