函数更新数据

<template>
  <div>
    <button @click="refreshTimeFun">更新时间</button>
    {{ refreshTime }}
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const refreshTime = ref(new Date())

const refreshTimeFun = () => {
  refreshTime.value = new Date()
}
</script>

当点击页面按钮的时候，时间更新，一般做需求会遇到这种情况，如果有多个场景同时更新时间的场景，refreshTime.value = new Date() 就会写很多遍，采用一种简洁的办法

使用函数的取值方式

<template>
  <div>
    <button @click="refreshNumber">更新时间</button>
    {{ refreshTimeFun() }}
    <!-- watch 的值一定要在页面上展示 不然出发不生效 可以 v-show='false' -->
    <div v-show="false">{{ number }}</div>
  </div>
</template>

<script lang="ts" setup>
import { watch, ref } from 'vue'

const number = ref(1)

const refreshNumber = () => {
  return number.value++
}
const refreshTimeFun = () => {
  return new Date()
}
watch(() => number.value, () => {
  refreshTimeFun()
})
</script>