Vue3系列 =＞Vue3初體驗 ref ,computed , reactive, toRefs使用

一:建立Vue3項目

vue create vue3_ts

• 自己選擇一些需要的配置

二: ref ,computed , reactive, toRefs使用

<template>
 <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <h1>{{count}}</h1>
    <h1>{{double}}</h1>
    <button @click="increase">👍+1</button>
 </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { ref ,computed , reactive, toRefs} from 'vue'
interface DataProps{
  count:number;
  double:number;
  increase:() => void;
}

export default defineComponent({
  name: 'App',
  setup(){
    // const count = ref(0)
    // const double = computed(()=>{
    //   return count.value*2
    // })
    // const increase = ()=>{
    //   count.value++
    // }
    const data:DataProps = reactive({
      count:0,
      increase:()=>{data.count++},
      double: computed(()=>data.count *2)
    })
    const refData = toRefs(data)
    // refData.double
    return {
      ...refData
    }
  }
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>