Vue.js修改变量后视图未更新的问题求助

问题原因 #

setTimeout的回调使用普通函数声明时，内部this默认指向浏览器全局window对象，并非当前Vue组件实例，你修改的this.test实际是挂载在window上的非响应式属性，不会触发Vue的视图更新。

解决方法（三种任选一种即可） #

• 方法1：使用箭头函数作为回调，箭头函数会继承外层作用域的this（即当前Vue组件实例）

<template>
  <h1>{{ test }}</h1>
</template>

<script>
export default {
  data() {
    return {
      test: 'Foo'
    }
  },
  mounted() {
    // 改用箭头函数
    setTimeout(() => { 
      this.test = 'Bar'
    }, 3000);
      
  }
}
</script>

• 方法2：提前缓存组件实例的this指向，回调内通过缓存变量访问响应式数据

mounted() {
  const vm = this
  setTimeout(function(){ 
    vm.test = 'Bar'
  }, 3000);
}

• 方法3：通过bind方法手动绑定回调函数的this指向为当前组件实例

mounted() {
  setTimeout(function(){ 
    this.test = 'Bar'
  }.bind(this), 3000);
}

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