vue3的setup，ref以及reactive

vue2的html模板中必须要有一对根标签，vue3中可以没有这个根标签。

setup是组合API的入口函数。只在初始化的时候执行一次。

ref是一个函数，作用是定义一个响应式数据，返回的是一个ref的对象。对象中有一个value属性，如果需要对数据进行操作，需要使用该ref对象调用value属性的方式进行数据操作。html模板中不需要使用.value的属性写法。

ref一般是用来定义基本类型的数据响应式。

<template>
  <div @click='handleClick'>
    ref和setup的基本使用{
  {a}}
  </div>
</template>
<script  lang="ts">
import { defineComponent,ref } from "vue";
export default defineComponent({
   name: "App",
   components: {  },
   //需求：页面打开后可以直接看到一个数据，点击该按钮后，该数据可以发生变化
   
   setup(){
     let a=ref(1);
    function handleClick() {
      a.value++;
    }
     return{
       a,
       handleClick
     }
   }
})

</script>

reactive的作用是定义多个数据的响应式。

内部基于es6的proxy，通过代理对象操作源对象内部数据都是响应式的。

总结：如果操作代理对象，目标对象中的数据也会随之变化，同时如果想要操作数据的时候࿰