Vue3中在setInterval定时器内修改data属性不生效如何解决？

你代码中修改不生效的核心原因是 setInterval 回调内的 this 指向与 Vue 组件实例完全解绑：
setInterval 接收的普通匿名函数，执行时的 this 默认指向全局作用域（浏览器环境下为 window，严格模式下为 undefined），根本无法定位到当前挂载的 Vue 组件实例。你写的this.someProperty = 3实际是在给全局对象赋值，没有触碰组件内部定义的响应式data属性，自然不会触发视图更新。
之前手动通过按钮触发修改能正常生效，是因为按钮绑定的回调执行时 this 本身就指向组件实例，不存在指向偏移的问题，和拼写、响应式配置都没有关系。

• 使用箭头函数作为定时器回调
  箭头函数没有独立的 this 上下文，会直接继承外层定义位置的 this 指向，这里外层就是 changer 方法所在的组件实例作用域，可以正常访问、修改 data 属性。修正后的示例代码：

  data() {
    return {
      someProperty: 1,
      changer: function() {
        // 将原普通回调替换为箭头函数
        setInterval(() => { 
          console.log('I am working')
          this.someProperty = 3
        }, 3000);
      }
    }
  },
  beforeMount() {
    this.changer()
  }
  

• 提前缓存组件实例引用
  如果需要兼容不支持箭头函数的运行环境，可以在进入定时器逻辑前，把当前组件的 this 赋值给独立变量，在定时器回调内通过该变量访问 data 属性，彻底避开普通函数的 this 指向规则。示例代码：

  data() {
    return {
      someProperty: 1,
      changer: function() {
        // 缓存组件实例引用
        const vm = this
        setInterval(function() { 
          console.log('I am working')
          vm.someProperty = 3
        }, 3000);
      }
    }
  },
  beforeMount() {
    this.changer()
  }
  

Vue3 不管是选项式API还是<script setup>的组合式API，都不存在“定时器内不能修改响应式数据”的特殊限制。组合式写法下只要在闭包中能拿到 ref、reactive 定义的响应式变量引用，直接赋值就能正常触发更新，核心需要规避的始终是普通函数的 this 指向偏移问题。

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