菜鸟学习vue3笔记-vue hooks初体验

import {
    
     ref } from "vue";
export default function () {
    
    
  let a1 = ref(1);

  let a2 = ref(5);

  let c = ref(0);

  function add() {
    
    
    a1.value++;
    a2.value++;
  }

  return {
    
    
    add,
    a1,
    a2,
    c,
  };
}

<template>
  <div>
    <p>第一个数字{
    
    {
    
     a1 }}</p>
    <p>第二个数字{
    
    {
    
     a2 }}</p>
    <button @click="add">点击求和</button>
  </div>
</template>

<script lang="ts" setup>
import useNum from "@/hooks/useNum";

const {
    
     add, a1, a2 } = useNum();
</script>

<style scoped></style>