15.vue3之reactive

<template>
  <div id="nav">
    <img alt="Vue logo" src="./assets/logo.png" />
    <h1>{{ data.count }}</h1>
    <h1>{{ data.double }}</h1>
    <button @click="data.increase">👍🏻+1</button>
  </div>
</template>
<script lang="ts">
import { computed, reactive } from "vue";
interface DataProps {
  count: number;
  double: number;
  increase: () => void;
}
export default {
  name: "App",
  setup() {
    const data: DataProps = reactive({
      count: 0,
      double: computed(() => {
        return data.count * 2;
      }),
      increase: () => {
        data.count++;
      },
    });
    return {
      data,
    };
  },
};
</script>