Vue.js/JavaScript日期选择器聚焦时浏览器崩溃问题咨询

看起来你遇到的是Vue计算属性setter引发的无限更新循环，导致浏览器主线程被持续占用最终崩溃。这种情况在日期选择器聚焦时触发，大概率是因为你的endDate计算属性的setter逻辑存在循环依赖或不当的响应式数据修改。

崩溃的核心原因 #

当你点击日期选择器使其聚焦时，组件可能会触发重渲染、内部状态更新，或者日期选择器的UI交互间接触发了绑定数据的更新。如果你的endDate计算属性满足以下任一情况，就会引发无限循环：

• endDate的getter依赖了某个响应式数据（比如startDate），而setter中又修改了这个依赖的数据，导致getter重新计算，进而再次触发setter，形成死循环。
• setter中修改的某个数据，又会通过其他watch或computed间接触发endDate的更新，形成闭环。

当你注释掉endDate的计算属性后，这个循环被打破，浏览器自然不会再崩溃，但也丢失了原本的联动功能。

修复方案 #

1. 拆分逻辑，用watch替代computed setter

如果你的需求是当startDate变化时自动更新endDate，或者需要双向控制日期范围，更安全的方式是使用watch监听数据变化，手动控制更新逻辑，避免循环：

data() {
  return {
    startDate: null,
    endDate: null
  }
},
watch: {
  startDate(newVal) {
    // 在这里添加你的endDate计算逻辑，比如默认设置为startDate后7天
    if (newVal && !this.endDate) {
      this.endDate = new Date(newVal.getTime() + 7 * 24 * 60 * 60 * 1000);
    }
  }
}

这种方式可以明确控制更新时机，只有当startDate真正变化时才更新endDate，不会触发循环。

2. 修正computed setter的逻辑

如果你坚持使用computed setter，必须确保setter不会修改getter依赖的响应式数据。比如，假设你的endDate getter依赖startDate，那么setter中只能修改独立的存储属性（比如_endDate），而不是startDate：

data() {
  return {
    startDate: null,
    _endDate: null
  }
},
computed: {
  endDate: {
    get() {
      // 这里可以基于startDate和_endDate计算最终值
      return this._endDate || this.startDate;
    },
    set(newVal) {
      // 只修改独立的存储属性，不触碰startDate
      this._endDate = newVal;
    }
  }
}

这样getter依赖的是startDate和_endDate，setter只修改_endDate，不会触发startDate的变化，也就不会导致getter重复计算。

3. 避免日期选择器的UI事件触发不必要的更新

有些日期选择器组件在聚焦时会触发数据的校验或默认值设置，如果你的computed setter逻辑对此敏感，可以尝试：

• 给日期选择器添加lazy修饰符（如果组件支持），延迟数据同步时机。
• 在setter中添加值判断，只有当新值与当前值不同时才执行更新：

set(newVal) {
  if (newVal !== this._endDate) {
    this._endDate = newVal;
  }
}

内容的提问来源于stack exchange，提问作者dascorp