VueJs - 避免无用的 v-for 迭代

Question

您好， 我注意到当数据像这样呈现时：

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

---

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

当我像这样更新帖子数组时：

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

VueJs 会解析帖子中的所有数据，因此加载的数据会再次重新加载，知道吗？

更新

---

<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 次，在更新时为 10 个帖子调用 20 次。 如果是因为 log 功能，还有另一种测试 v-for 迭代的方法吗？事实上，如果我在帖子中添加帖子，我想验证 v-for 仅迭代一次。

Answer 1

Vue 不了解您的列表中发生了什么变化，因此它会再次呈现该组件。您需要在循环中添加一个标识符。

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

key 属性用于维护状态。有关key 属性的更多详细信息，请阅读here

Answer 2

整个列表将被重新渲染，因为 Vue 不知道如何检测删除了哪个对象，因为帖子身份没有元信息。

您需要指定“key”属性，该属性明确定义了 id数据绑定。

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