js/ts中Date类的ref响应式 -- VUE3

现象：Date对象无法响应式

原因：Date是个深层对象，外面那层可以响应，但是更改里面的层，则不会被侦测到改动

解决：强制触发副作用即可

参考文档：https://cn.vuejs.org/api/reactivity-advanced.html#triggerref

<template>
  <div class="cnblogs_yucloud">
      {{ DateTime }}
  </div>
</template>

<script lang="ts" setup>
import {reactive, ref, shallowRef, triggerRef} from 'vue'
const DateTime = ref<Date>(new Date())
const timer = setInterval(() => {
  // const dateTr = DateTime.value
  DateTime.value.setSeconds(DateTime.value.getSeconds() + 1)
  console.log(DateTime.value)
  
  triggerRef(DateTime) // 增加这行即可完成响应式。
}, 1 * 1000)

</script>