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

Posted 2023-02-23

【中文标题】VueJs - 避免无用的 v-for 迭代

【英文标题】：VueJs - avoid useless v-for iteration

【发布时间】：2020-02-14 07:42:04

【问题描述】：

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

<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 仅迭代一次。

【问题讨论】：

有用来源：github.com/vuejs/vue/issues/6342

【参考方案1】：

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

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

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

【讨论】：

但是我不明白，如果我在v-for循环中放一个日志方法，日志总是等于长度，我没有一个日志

@cisco_bro 也许您可以发布一些您尝试过的代码，以便我们为您提供帮助。

【参考方案2】：

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

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

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

【讨论】：

我试了一下，如果我在 v-for 循环中放置一个日志函数，我会有无用的迭代，可能是因为方法日志在 v-for 循环中？

@cisco_bro 您应该展示如何“将日志函数放入 v-for 循环”。我假设你的问题根本不是关于重新渲染的，你在v-for 内部做了类似v-if(item) :load='someLoggingFunction(item)' 的事情。是的，如果你这样做了，只要数组发生变化，你就会得到每个元素的日志条目。我不确定是否有任何方法可以避免这种情况。

@mayakwd 是的事实上我想验证迭代次数，但是在模板中放一个日志方法似乎不是正确的解决方案