14.vue3之setup、ref、computed

<template>
  <div id="nav">
    <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 { ref, computed } from "vue";
export default {
  name: "App",
  setup() {
    const count = ref(0);
    const double = computed(() => {
      return count.value * 2;
    });
    const increase = () => {
      count.value++;
    };
    return {
      count,
      double,
      increase,
    };
  },
};
</script>