Question

我有一个简单的应用程序，它可以通过主实例上setInterval生命周期钩子上的mounted()不断更改盒子的背景色：

问题是什么？

如果您按下按钮（单击我）... color属性将更改，子组件将检测该更改。

但是，当颜色（通过setInterval动态更改时，您可以在控制台上看到颜色正在更改，但组件未检测到该更改（您可以看到在控制台上）。

我想知道什么？

简单...为什么组件在检测到其他手动突变（通过事件等）时却没有检测到此类突变（动态突变）？

以下是代表我的应用的摘录：

Vue.component('coloredComp', {
  props: ['color'],
  watch: {
    color() {
      console.log('changed')
    }
  },
  template: "<div id='box' :style='{backgroundColor : color}'></div>"
})

new Vue({
  el: '#app',
  data() {
    return {
      color: 'red'
    }
  },
  mounted() {
    this.$nextTick(() => {
      let colors = ['yellow', 'red', 'green', 'blue']
      let i = 0;
      var int = setInterval(function() {
        this.color = colors[i];
        console.log('the new color is : ' + window.color)
        i++;
        i == colors.length ? i=0 : '';
      }, 2000)
    })
  }
})

#box {
  height: 100px;
  width: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="color = 'blue'">click me</button>
  <colored-comp :color="color"></colored-comp>
</div>

Answer 1

您的setInterval(fn this中的

未定义/未绑定

var int = setInterval(function() {
  this.color = colors[i];           // < -- here this is undefined
  console.log('the new color is : ' + this.color)
  i++;
  i == colors.length ? i=0 : '';
}, 2000)

解决方案：

要么

使用() => {}语法（隐式绑定this）
或手动绑定setInterval( (function() { ... }).bind(this) )
或关闭它const that = this; setInterval( (function() { that.... })

Vue组件无法检测到由父Mounted（）提交的数据更改

1 个答案: