js/ts中Date類的ref響應式 -- VUE3

現象

Date對象無法響應式

原因

Date是個深層對象，外面那層可以響應（即淺層是Object），但是更改時間的值，是需要裏面的層修改的（深層），所以不會被偵測到改動

解決方案

強制觸發副作用即可
如果使用Element，那就只能觸發響應式，通過觸發底層的響應行爲完成，我這裏暫時沒有找到方法，所以只能DateTime.value = new Date(DateTime.value)，理論上需要重寫ref行爲？建議參考：https://cn.vuejs.org/api/reactivity-advanced.html#reactivity-api-advanced

代碼

<template>
  <div class="cnblogs_yucloud">
      {{ DateTime }}
  </div>
  <div>
 		 <!--
         <el-date-picker
              v-model="DateTime"
              ref="el_date_picker_ref"
              type="datetime"
              placeholder="選擇日期和時間"
              format="YYYY/MM/DD hh:mm:ss"
              arrow-control
              :shortcuts="shortcuts"
              @blur="timeBlurEvent"
          />
		  -->
  </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) // 增加這行即可完成響應式。
  // DateTime.value = new Date(DateTime.value) //如果你還使用了element-plus的時間選擇器，那麼可以加上這行強制更新渲染組件。使得element控件上的時間也動態更新。原理是觸發淺層響應式。
}, 1 * 1000)

</script>

參考文檔

https://cn.vuejs.org/api/reactivity-advanced.html#triggerref

插播新聞

最後，插播一條新聞：
最近發現淘寶鏡像源到期了，現在用他們新的鏡像：https://npmmirror.com/
想過文章：https://www.51cto.com/article/780092.html