vue.js计算时间差到天时分秒

近期协助支援前端开发时，遇到计算时间差得问题，参考如下：

页面需要展示得字段

        <div class="margmargin_div">
            <div class="purchasing_information" style="margin-top: .2rem">
            <h2 class="title">{{tableData.title}}</h2>
                <ul class="list-groups">
                    <li class="items">发布时间：{{tableData.creationTime}}</li>
                    <li class="items">报价截止时间：{{tableData.registrationDeadline}}</li>
                    <li class="items">期望交货时间：{{tableData.expectedDeliveryTime}}</li>
                    <li class="items">所属分类：{{tableData.category}}</li>
                    <li class="items">当前状态：{{tableData.statusStr}}</li>
                    <li class="items">报价剩余时间：<span>{{remainderTime}}</span></li>
                    <li class="items">备注说明：{{tableData.remarks}}</li>
                </ul>
        </div>

js:

<script setup >
import { useRoute } from "vue-router";
import {getDemandDetailApi } from "@/api/supplyChain/manage/demand";
import useUserStore from "@/store/modules/user";
import { ref } from "vue";

const route = useRoute()
const tableData = ref({})
const re_Date=ref('');
const remainderTime=ref('')

/** 获取详情信息 */
getDemandDetail()
async function getDemandDetail() {
    tableData.value = await getDemandDetailApi(route.params.id)
    re_Date.value = tableData.value.registrationDeadline
    ComputeDate();
}

//计算剩余时间差
function  ComputeDate(){
    var strDate=new Date(re_Date.value);
    var endDate = new Date(); // 结束时间
    var diffDate = endDate.getTime() - strDate.getTime() // 时间差的毫秒数
    if(diffDate.valueOf('-')){

        diffDate=strDate.getTime()- endDate.getTime()
    }
    // 计算出相差天数
    var days = Math.floor(diffDate / (24 * 3600 * 1000));
    // 计算出小时数
    var leave1 = diffDate % (24 * 3600 * 1000); // 计算天数后剩余的毫秒数
    var hours = Math.floor(leave1 / (3600 * 1000));
    // 计算相差分钟数
    var leave2 = leave1 % (3600 * 1000); // 计算小时数后剩余的毫秒数
    var minutes = Math.floor(leave2 / (60 * 1000));
    // 计算相差秒数
    var leave3 = leave2 % (60 * 1000); // 计算分钟数后剩余的毫秒数
    //var seconds = Math.round(leave3 / 1000);
    remainderTime.value=days+'天'+hours+'小时'+minutes+'分钟'
    console.log(remainderTime.value);
}

//定时器
setInterval(() => {ComputeDate()},60*1000);

</script >

不过，发现一个vue比较好的优点，不需要向h5等，给页面某个地方赋值，还需要先根据标签找到才能赋值，而vue中，可以配置全局变量，页面和js中都可以操作，就像上面定义得报价剩余时间(remainderTime)，js中通过计算得出时间差，赋值后，页面也会随之更新，这个比较 Beautiful