javascript - 当第三方 JSON 更新时，Vue.js 是否可以自动更新 View ？

Question

我正在尝试完成以下任务，但我什至不知道 Vue 是否可以实现，因为我正在努力获得所需的结果:

我有一个 API 端点，它返回数组中的许多对象。

我成功地在 Vue 应用程序中渲染数据，但我想知道 Vue 是否可以“跟踪”数组何时更新为更多对象，然后在 View 中渲染这些数据。

我使用 setInterval 每 10 分钟执行一次 GET 请求，新数据正确地进入我的 data() 内的对象，但更改未反射(reflect)出来在 View 内。

目前，我正在分别在开始和结束处将 bool 值从 true 更改为 false，以便使用 v-if< 再次渲染 View .

我的目标是创建一个简单的 Twitter feed 应用程序，每 10 分钟执行一次 GET 请求，收集推文，将它们放入我的 Vue 实例中并在 View 中显示它们，而无需重新加载页面/重新渲染组件。就像自动 Twitter feed 每 10 分钟不断加载新推文一样。

这可能吗？我尝试过使用 Vue.set() 方法，但这没有任何区别。

如果不可能，实现类似功能的最佳方法是什么？

这是我的代码:

JavaScript:

new Vue({
  el: '#app',
  data: {
    items: [],
  },
  created() {
    this.load();
    setInterval(() => this.load(), 5000);
  },
  methods: {
    load() {
      axios.get('https://reqres.in/api/users?page=2')
      .then(response => {
        this.items = response.data.data;
      });
    }
  }
});

HTML

<div id="app">
  <p v-for="item in items">
    {{ item.first_name }}
  </p>
</div>

代码笔:https://codepen.io/tomhartley97/pen/VwZpZNG

在上面的代码中，如果通过 GET 请求更新数组，机会不会反射(reflect)在 View 中吗？

Answer 1

是的，这是可能的。您需要在 Vue 实例中设置新的响应式属性的方法如下:

对于对象属性:Vue.set(this.baseObject, key, value) baseObject 不能是 Vue 实例或基础 data() 对象，因此您必须声明一个容器属性。

对于数组条目，请使用 native 数组方法:例如Array.prototype.push()。 使用 Vue.set(array, arrayIndex, newArrayElement) 不起作用

因此，您的解决方案可能看起来如下:

<script>
export default {
  data() {
    return {
      response: [],
    };
  },

  mounted() {
    setInterval = (() => this.getData), 600000);
  }

  methods: {
    async getData() {
      const res = await request();
      const resLength = res.data.length;
      for (let i = 0; i < resLength; i++) {
        // check if entry is already in array
        const entryExists = this.response.some((entry) => {
          return entry.id === res.data[i].id
        })
        if (!entryExists) {
          // this will make the array entries responsive, but not nested Objects
          this.response.push(res.data[i]);
          // to create nested responsive Objects you will have to set them explicitly
          // e.g. Vue.set(this.response[this.response.indexOf(res.data[i])], nestedObjectKey, res.data[i].nestedObject)
        }
      }
    }
  }
};
</script>