Vue计算属性可高效响应式计算选中日期所在周的起止时间：先以周一为起点归一化日期，再通过Date偏移获取周一和周日，确保时分秒归零且不污染原数据。
Vue 计算属性可以高效、响应式地计算当前选中日期所在周的起止时间（如周一到周日），关键在于：固定周起点（比如周一）、正确处理跨月/跨年边界、利用 JavaScript Date 对象做偏移运算，并确保响应式依赖明确。
确定周起点并归一化日期
先明确“一周”的定义（国内常用周一为始，国际标准 ISO 8601 也是周一）。用 date.getDay() 获取星期几（周日=0，周一=1…周六=6），再根据起点调整偏移量。例如以周一为周首，则偏移 = 当前 weekday - 1（若为周日则需 -6，即 weekday === 0 时按 -6 算）：
- 若选中日期是周三（
getDay() === 3），往前推 2 天得周一 - 若选中日期是周日（
getDay() === 0），往前推 6 天得上周一 - 建议封装一个
getMonday(date)工具函数，避免重复逻辑
在 computed 中声明响应式计算
把选中日期（如 selectedDate）作为响应式数据源，在计算属性中返回包含 start 和 end 的对象：
-
selectedDate必须是 Date 实例（非字符串），否则无法调用getDay() - 计算属性内不要修改原 date，而是 new Date() 创建新实例再 setDate
- 起始日 = 周一，结束日 = 周日，注意
setDate()会自动处理月份溢出（如 1 月 31 日 + 1 天 → 2 月 1 日）
完整可复用的计算属性示例
假设组件 data 中有 selectedDate: new Date('2024-04-05')（周五），对应周为 4 月 1 日（周一）至 4 月 7 日（周日）：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
立即学习“前端免费学习笔记（深入）”；
computed: {
weekRange() {
const date = new Date(this.selectedDate);
const day = date.getDay();
const diffToMonday = day === 0 ? -6 : 1 - day;
const monday = new Date(date);
monday.setDate(date.getDate() + diffToMonday);
<pre class="brush:php;toolbar:false;">const sunday = new Date(monday);
sunday.setDate(monday.getDate() + 6);
return {
start: new Date(monday.getFullYear(), monday.getMonth(), monday.getDate()),
end: new Date(sunday.getFullYear(), sunday.getMonth(), sunday.getDate())
};} }
这样返回的 start 和 end 是纯净的 Date 对象（时分秒归零），便于后续格式化或传给日历组件。
注意事项与边界处理
实际使用中容易忽略的点：
- 传入的
selectedDate若为字符串，需先new Date(str)转换，否则getDay()返回 NaN - 避免直接操作原始 date 对象（如
date.setDate()），否则会污染源数据 - 若需兼容不同周起点（如周日开头），只需改
diffToMonday逻辑：周日为 0 时 diff = 0，其余为0 - day - 国际化场景下建议用
Intl.DateTimeFormat或 dayjs / date-fns 等库替代手写逻辑，更健壮
