vue3的ref,computed,reactive和toRefs你都了解吗

<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 default({
  name: 'App', 
  /*data(){
    return{
      count: 0
    }
  },
  methods:{
    increase(){
      this.count++
    }
  }*/
  // 注意：在vue3中不使用data和methods，可以使用ref函数，完成响应式
  setup(){
    const count = ref(0)    //将0传入，返回一个对象
    const double = computed(()=>{
      return count.value*2
    })
    const increase = ()=>{
      count.value++         //通过返回对象的value属性获得响应式的数据
    }
    return{                 //要在外面使用的变量都要先通过return导出，才能使用
      count,
      increase,
      double
    }
  }
});
</script>

<template>
  <div id='app'>
    <img alt="vue logo" src="./assets/logo.png">
    <h1>{{data.count}}</h1>
    <h1>{{data.double}}</h1>
    <button @click='data.increase'>点击</button>
  </div>
</template>
<script lang='ts'>
import {computed, ref,reactive} from 'vue'
export default({
  name: 'App', 
  // 注意：在vue3中不使用data和methods，可以使用ref函数，完成响应式
  setup(){
    const data = reactive({
      count:0,
      increase:()=>{
        data.count++
      },
      double:computed(()=>
        data.count*2
      )
    })
    return{                 //要在外面使用的变量都要先通过return导出，才能使用
      data
    }
  }
});
</script>

interface dataProps{
  count:number,
  double:number,
  increase:()=>void
}

<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>
const refData = toRefs(data)
return{                 //要在外面使用的变量都要先通过return导出，才能使用
  ...refData
}