VueJs - избегайте бесполезной итерации - PullRequest
Новая
       97

VueJs - избегайте бесполезной итерации

0 голосов
/ 17 октября 2019

Здравствуйте, Я заметил, что когда данные отображаются так: 

<div v-for="post in posts">
  <p> {{post.content}} </p>
</div>

<code><pre>
data () {
    return {
      posts: [{...},{...}]
    }
  }

и когда я обновляю массив записей таким образом: 

<code><pre>
methods: {
    addPost: function (post){
      this.posts.unshift(post);
    }
  }

VueJ анализирует все данные в сообщениях, поэтому загруженные данные перезагружаются снова, любая идея?

Обновление 

<template>
          <div v-for="post in postsArray" :key="post._id.$id">
            <p> {{post.content}} </p>
            <time>{{post.created_at}}</time>
            {{log('hey')}}
          </div>

</template>

<script>
import '...'

export default {
  data () {
    return {
      posts: [{...}, {...}]
    }
  },
  methods: {
    addPost: function (post){
      // display max 10 posts
      if (this.posts.length >= 10)
      {
        this.posts.splice(9, 1)
      }
      this.posts.unshift(post);
    },
    log: function (log) {
      console.log(log);
    }
  },
  computed: {
    postsArray: function () {
      return this.posts.map(element => {
        let post;
        post = element;
        post.created_at = new Date(element.created_at.sec).toLocaleDateString();
        return post;
      });
    }
  }
};
</script>

Если я добавлю сообщение, функция журнала будет вызываться 10 раз при первой загрузке и 20 раз для 10 сообщений при обновлении. Если это из-за функции журнала, есть другой способ проверить v-для итерации? На самом деле, я хочу проверить, что v-for повторяется только один раз, если я добавляю сообщение в сообщения.

Ответы [ 2 ]

0 голосов
/ 17 октября 2019

Vue не понимает, что было изменено в вашем списке, поэтому он снова визуализирует компонент. Вам необходимо добавить идентификатор в ваш цикл. 

<div v-for="item in items" v-bind:key="item.id">
  <!-- content -->
</div>

Атрибут key используется для поддержания состояния. Подробнее об атрибуте key читайте здесь

0 голосов
/ 17 октября 2019

Весь список будет перерисован, потому что Vue не имеет ни малейшего понятия, как определить, какой объект был удален, потому что нет метаинформации для почтового идентификатора.

Необходимо указать атрибут «ключ», который явно определяет привязку данных id <->. 

<div v-for="post in posts" :key="post.id">
  <p> {{post.content}} </p>
</div>
...