Vue2检测数据更新

Question

我正在用Vue2创建一个消息组件，目前每隔30秒就会为任何新消息做一次编程，如果有消息，它们将被自动插入到相关线程中，我的问题是，当数据发生变化时，我能否检测到(例如，添加了新消息)。

我想这样做的原因是，当新消息添加到对话中时，我想闪烁一个图标。

以下是我的代码的相关部分：

poll_messages(){
    this.get_messages();
    this.interval = setInterval(() => {
        this.get_messages();
    }, 30000);
},
get_messages(){
    $.get(base_url + 'api_messages/get_messages/', (data) => {
        this.threads = data;
    });

},

所以，如果线程变量发生了变化，我想知道。这个是可能的吗？

Answer 1

因为这就是Vue2 look的功能，它会读取属性，并在看到属性发生更改时运行

在您的解决方案中，应该是这样的

 poll_messages(){
this.get_messages();
this.interval = setInterval(() => {
    this.get_messages();
}, 30000);
},
get_messages(){
$.get(base_url + 'api_messages/get_messages/', (data) => {
    this.threads = data;
});

},
watch:{
 threads(){
  // is executed when there are changes to the threads property
 }
}

要解决这些更改，您可以验证自己

    poll_messages(){
this.get_messages();
this.interval = setInterval(() => {
    this.get_messages();
}, 30000);
},
get_messages(){
$.get(base_url + 'api_messages/get_messages/', (data) => {
if(this.threads != data){
    this.threads = data;
}
});

},
watch:{
 threads(){
  // is executed when there are changes to the threads property
 }
}

Answer 2

我猜你的组件看起来像这样：

methods: {
  poll_messages() {
      this.get_messages();
      this.interval = setInterval(() => {
        this.get_messages();
      }, 30000);
    },
    get_messages() {
      $.get(base_url + 'api_messages/get_messages/', (data) => {
        this.threads = data;
      });

    },
}

您可以添加以下内容：

watch: {
    'threads': function() {
    // Do work here when it updates
  }
}

希望这能有所帮助！

Answer 3

每次您为threads分配一个新值时，Vue更新都会被触发，因此watch将会运行。我想到了两种不同的方法来实现这一点：

1. 如果您只想闪烁图标，请使用transition-group为添加到通知中的项目添加样式更改。这种影响将在特定的持续时间内保持，因为这是一种过渡。

引用:在watch中对其进行https://vuejs.org/v2/guide/transitions.html#List-Transitions

• Compare，并将更改应用于新项目的属性，然后使用v-bind:style或v-bind:class更改其样式：

观看：{线程( newVal) {用于(newVal的let消息){ //比较新旧值并应用更改}

希望这能有所帮助！