如何解决Vue中检测元素60秒内创建状态自动更新失效问题

问题原因 #

• setTimeout 回调执行时this指向丢失：直接将this.checkIfIsNew作为回调传入 setTimeout 时，回调运行的上下文不再指向Vue实例，无法正确读写实例的isNew等属性，导致看起来定时器不触发、数值不更新。

修复方案 #

用箭头函数包裹 setTimeout 回调，继承外层的Vue实例上下文即可解决指向问题，修正后完整代码如下：

HTML代码 #

<div id="app">
  Is this text younger than 60 seconds?<br>
  {{ isNew }}
</div>

JS代码 #

new Vue({
  el: "#app",
  data: {
    isNew: false
  },
  methods: {
    checkIfIsNew() {
      // 此处替换为元素实际的创建时间
      const dateTimeToCheck = Date.parse("2021-11-03 18:16:00")
      const seconds = (Date.now() - dateTimeToCheck) / 1000;
      console.log(seconds);
      this.isNew = seconds < 60;
      // 未到60秒时继续轮询检测
      if (this.isNew) {
        setTimeout(() => this.checkIfIsNew(), 10 * 1000);
      }
    },
  },
  created() {
    this.checkIfIsNew();
  },
})

优化建议 #

如果需要降低切换的时间误差，可以将10秒的轮询间隔改小，比如调整为1秒一次。如果检测的是当前组件的创建时间，可直接在created钩子中记录实例化时间，不需要硬编码目标时间：

// data中新增字段
data: {
  isNew: false,
  createTime: null
},
created() {
  this.createTime = Date.now()
  this.checkIfIsNew()
},
// checkIfIsNew中计算秒数改为：
const seconds = (Date.now() - this.createTime) / 1000

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