Вспомогательные методы при отрисовке

115

07 ноября 2019, 09:20

Есть чат, в котором списком выводятся сообщения:

<div v-for="message in messages" :key="message.id">
   <div><div v-once :inner-html.prop="calcMessage(message.message) | filterMessage"></div></div>
</div>

и JS. Если длительно чата менее N секунд, значит ссылки превращать в "***":

methods: {
  calcMessage(message) {
     if(this.durationChat < this.noLinksTime)
         message = linkify(message);
     return message;
  }
}

Моим удивлением стало то, что старые сообщения, которые были превращены в звёздочки стали отображаться по истечению срока noLinksTime. Я начал смотреть и оказывается метод calcMessage вызывается каждую секунду или чаще :( А мне это совсем не надо и "v-once" не помогает. Вообще странное поведение, я думал это только computed вызывается несколько раз, а оказывается и методы. Можно ли с этим что то сделать? Не хочу бессмысленно нагружать браузер.

Уточню, что messages - это vuex mapState

Answer 1

Всё-таки VueJS требует компоненты! Добавил шаблон одного сообщения в отдельный компонент SingleMessage.vue. И там v-once уже работал как положено. Более того, при таком подходе всё можно сделать через computed, тогда и в v-once нет необходимости! Но сам v-once с methods протестировал, работает как положено. Удивительно, что помогает создание компонента отдельного, документации пошерстил не могу понять закономерности, а очень хотелось бы. Если кто-то можно объяснить как там на низком уровне происходит реактивность - пишите, пожалуйста

<app-single-message v-for="message in messages" :key="message.id" :message="message">
        </app-single-message>

SingleMessage.vue:

<template><div :inner-html.prop="filterMessage"></div></template>
 <script>
  export default {
   props: ['message']
   computed: {
     filterMessage() {
         return linkify(this.message);
     }
    }
  }
 </script>