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次。如果是由于对数函数，还有另一种测试v-for迭代的方法吗？实际上，如果我在帖子中添加帖子，我只想验证v-for重复一次。

Answer 1

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

您需要指定“键”属性，该属性显式定义id <->数据绑定。

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

Answer 2

Vue无法理解列表中的更改，因此它将再次呈现该组件。您需要在循环中添加一个标识符。

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

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

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

2 个答案: