vue3基础ref与reactive使用

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <p>当前的ref count 值为：{
  {countref}}</p>
    <p>当前的 count 值为：{
  {count}}</p>
    <button @click="add()">增加</button>
    <button @click="sec()">减少</button>
    <h3 ref="refH3">测试ref获取元素处理</h3>
  </div>
</template>
<script>
  // reactive 参数为对象，为一个响应式对象，在模板中使用要带上对象链式访问到，在js中使用修改也是通过对象链式去修改
  // ref参数为基本类型，也是响应式数据，在模板中直接访问即可，在js中需要加上value才可以修改
  // torefs可以将reactive变成多个基本类型的响应式数据，在模板中可以直接使用访问
  // 通过 ref() 还可以引用页面上的元素或组件,需要一开始创建一个ref值，然后return出去给模板使用，在到渲染生命周期中去赋值修改
import { reactive,toRefs,ref, onMounted } from '@vue/composition-api'
export default {
  setup() {
    const countref=ref(7)
    const refH3 = ref(null)//创建一个DOM元素
    // 创建响应式数据对象
    co