Javascript 数据更改时，v-bind的值不会更改。Vue.js

我有一个函数changeActive，它改变了activeboolean的值。但是，即使我使用console.log检查了活动更改的值，新值也不会在v-bind:'active'中传递给子组件

<template>
<div style="width:300px; margin: auto;">
      <RatingLabel 
      :rating='rating[0]'
      :active='active'
      style="margin: auto;"
      />
      <RatingLabel 
      :rating='rating[1]'
      style="float: right;"
      />
      <RatingLabel 
      :rating='rating[2]'
      />
      <RatingLabel 
      :rating='rating[3]'
      style="margin: auto;"
      />
</div>
</template>

<script>
import RatingLabel from '../atomic/RatingLabel'
import { mapState } from 'vuex'
export default {
      components: {
            RatingLabel,
      },

      data() {
            return {
                  active: false,
            }
      },

      methods: {
            changeActive() {
                  setTimeout(function(){ 
                        this.active = !this.active;
                        console.log(this.active)
                   }, 3000);
            }
      },

      mounted() {
            this.changeActive()
      },

      computed: mapState(['rating'])
}
</script>

这在回调函数中未定义，必须在调用setTimeout之前将其分配给全局变量vm，然后在回调函数中使用它：

    changeActive() {
                 let vm=this;
                  setTimeout(function(){ 
                        vm.active = !vm.active;
                        console.log(vm.active)
                   }, 3000);
            }

函数{}->=>{}，因为您可以访问

活跃的{ setTimeout=>{ this.active=！this.active； console.logthis.active }, 3000;