javascript - VueJS update() 生命周期钩子(Hook)导致无限循环

Question

我有一个简单的 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 我试图发出一个在 prop 更新后更新组件数据的请求，但这会导致组件无限更新。如果我使用另一个生命周期钩子(Hook)，例如 created()，我将无法检索 user 属性。

Answer 1

您应该监视用户对象的更改并在那里发出 getFollowersPosts() 请求。

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

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