Question

我正在创建一个带有Vue2和Im的消息传递组件，目前每隔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 的功能，它会读取属性并在您看到更改时运行

在你的解决方案中，它会是那样的

 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。我想到了两种不同的方法来实现这一目标：

如果您只想点亮图标，请使用transition-group为添加到通知中的项目添加样式更改。效果将保持特定的持续时间，因为它是一个过渡。

参考：https://vuejs.org/v2/guide/transitions.html#List-Transitions

在watch中对比并将更改应用于新项的属性，然后使用v-bind:style或v-bind:class更改其样式：

watch: {
   threads(newVal) {
       for (let message of newVal) {
          // compare new and old values and apply changes
       }
   }
}

希望这有帮助！

Vue2检测数据更新

3 个答案: