VueJS updated() 生命周期钩子导致无限循环

Posted 2023-02-22

【中文标题】VueJS updated() 生命周期钩子导致无限循环

【英文标题】：VueJS updated() lifecycle hook causes an infinite loop

【发布时间】：2020-03-20 00:24:43

【问题描述】：

我有一个简单的 VueJS 应用程序。在我的一个组件中，我正在尝试检索文章列表。如果用户已登录，我会提出特定请求。否则，我再做一个。这是我的代码：

<script>
  import  getFollowersPosts  from './../services/post';

  export default 
    name: 'Home',
    props: 
      user: Object
    ,
    data() 
      return 
        posts: []
      
    ,
    async updated() 
      if (this.user) 
        this.posts = await getFollowersPosts(1);
      
    
  
</script>

问题是，user 属性来自父组件，应用程序需要一些时间才能检索到它。检索到user 后，它会更新组件，然后我可以使用getFollowersPosts() 向后端发出请求，因为我现在拥有user。

但是，一旦我得到请求结果，我需要更新posts 数组。这会导致组件再次更新，并重新开始。现在我得到的是组件无限更新，更糟糕的是，mysql 数据库最终关闭了连接。

有没有办法避免这种情况？我只想检索文章列表，仅此而已！

谢谢。

tl;dr 我正在尝试在道具更新后发出更新组件数据的请求，但这会导致组件无限更新。如果我使用像 created() 这样的另一个生命周期钩子，我将无法检索到 user 属性。

【参考方案1】：

您应该注意用户对象的变化并在那里发出 getFollowersPosts() 请求。

watch: 
    user: function (val) 
      if (val) 
        this.posts = await getFollowersPosts(1);
      
    

您可以在此处阅读有关观察者的更多信息：https://it.vuejs.org/v2/guide/computed.html

【讨论】：

谢谢！最后我自己找到了解决方案。我为其他人发布了答案，并使用了您提出的解决方案。正如我写的那样，我挣扎了几个小时，在询问 *** 后我随机找到了解决方案。

很高兴您找到了解决方案 :) 请考虑接受我的回答。

【参考方案2】：

哇，我已经为寻找答案苦苦挣扎了好几个小时，而在发布我的问题后，我最终找到了解决方案。

所以我使用观察者让它工作。我猜每个更新的道具只调用一次观察者。这是我的代码：

<script>
  import  getFollowersPosts  from './../services/post';

  export default 
    name: 'Home',
    props: 
      user: Object
    ,
    data() 
      return 
        posts: []
      
    ,
    watch: 
      user: async function() 
        if (this.user) 
          this.posts = await getFollowersPosts(1);
        
      
    
  
</script>