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

【问题标题】：VueJS updated() lifecycle hook causes an infinite loopVueJS updated() 生命周期钩子导致无限循环
【发布时间】：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 属性。

【问题讨论】：

标签： javascript vue.js hook

【解决方案1】：

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

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

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

【讨论】：

谢谢！最后我自己找到了解决方案。我为其他人发布了答案，并使用了您提出的解决方案。正如我写的那样，我挣扎了几个小时，在询问 Stackoverflow 后我随机找到了解决方案。
很高兴您找到了解决方案 :) 请考虑接受我的回答。

【解决方案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>

【讨论】：