// useSomeData.ts

import { ref } from 'vue'

// hook，入参可选
export const useSomeData = (initNum?: number) => {
  const data = ref(initNum || 0) // 声明数据

  // 自增
  setInterval(() => {
    data.value++
  }, 1000);

  // 可选，暴露一个主动获取当前值的方法
  function getData() {
    return data.value
  }

  // 可选，暴露一个修改的方法
  function setData(newVal: number) {
    data.value = newVal
  }

  // 最终返回
  return { data, setData, getData }
}

<template>
  <div></div>
</template>

<script setup lang="ts">
import { watch } from 'vue'
// 引入hook
import { useSomeData } from './useSomeData.ts'

const { data, setData } = useSomeData()

// 监听、打印
watch(data, (newVal) => {
  console.log(newVal)
}, { immediate: true })

// 3秒后调用一下setData方法，检验方法是否正常
setTimeout(() => {
  setData(-30)
}, 3000);
</script>