Vue.js中setTimeout回调修改数据后UI无法更新怎么解决？

• this指向错误：setTimeout的回调使用普通函数声明时，内部this指向全局对象（浏览器环境下为window），而非Vue组件实例，你赋值的this.personName不是组件的响应式变量，因此不会触发UI更新，控制台能打印只是因为值被挂载到了全局对象上。
• 定时器延迟设置错误：forEach遍历给所有回调设置了相同的1000ms延迟，所有赋值逻辑会在1秒后同时执行，最终只会保留最后一次赋值的结果，无法实现每隔1秒更新一次的效果。

方案1：直接修改现有代码 #

通过箭头函数绑定this指向，同时设置递增的延迟时间，实现按顺序每秒更新：

this.lifeSpanObj.forEach((element, i) => {
    // 箭头函数继承外层作用域的this，指向Vue组件实例
    setTimeout(() => {
      this.personName = element.name;
      console.log(this.personName);
    }, 1000 * (i + 1)); // 延迟时间随索引递增，依次在1s/2s/3s...触发
});

方案2：使用setInterval实现可控更新（更推荐） #

如果需要支持循环播放、中途停止等能力，且避免内存泄漏，用setInterval实现更合理：

// 响应式变量定义
data() {
  return {
    personName: '',
    currentNameIndex: 0,
    nameUpdateTimer: null
  }
},
mounted() {
  // 组件挂载后启动更新逻辑
  this.initNameUpdate()
},
beforeUnmount() {
  // 组件销毁前清理定时器，避免内存泄漏
  clearInterval(this.nameUpdateTimer)
},
methods: {
  initNameUpdate() {
    // 初始化显示第一个人名
    this.personName = this.lifeSpanObj[0].name
    // 启动定时器每秒更新
    this.nameUpdateTimer = setInterval(() => {
      this.currentNameIndex++
      // 遍历完所有名字后重置索引实现循环，也可以直接停止定时器
      if (this.currentNameIndex >= this.lifeSpanObj.length) {
        this.currentNameIndex = 0
        // 不需要循环则取消注释下一行停止更新
        // clearInterval(this.nameUpdateTimer)
      }
      this.personName = this.lifeSpanObj[this.currentNameIndex].name
    }, 1000)
  }
}

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