Vue：有没有办法检测来自 API 的变化数据

Question

我看的很简单。一旦我呈现我的模板，它就会对我的网络服务器进行 API-Call 并将数据呈现给模板。现在我想在 vue 组件中查看这些数据以了解即将发生的变化。每当发生变化时，我想用来自 API 的数据更新模板。

一个解决方案是我可以编写类似于每 10 秒调用一次的刷新方法。（老实说，那是我不想要的东西）

我想要一种类似于 Angular 的观察者方式。

顺便说一句。我是 vue 的新手，我开始学习 Vue Laravel

编辑：我的代码：

Vue.component

<template>
<div class="w-50">
    <table class="table ">
        <thead>
        <tr>
            <th scope="col"></th>
            <th scope="col"></th>
        </tr>
        </thead>
        <tbody>
            <tr v-for="user in users" v-bind:key="user.id">
                <td>{{ user.name }}</td>
                <td>{{ user.timer }}</td>
            </tr>
        </tbody>
    </table>
</div>
</template>

<script>
    export default {
        data() {
            return {
                users: [],
                user: {
                    id: '',
                    active: ''
                }
            };
        },
        mounted() {
            axios.get('/users')
                .then(res => {
                    this.users = res.data;
                    console.log(res.data);
                })
        }
    }
</script>

我按照你下面提到的做了。但是如果数据发生变化，视图不会更新。

Answer 1

你没有包含任何代码，所以我只添加我的例子：

这是一个模板标签：

<template>
    <div>
        <h1> {{title}} </h1>
    </div>
</template>

脚本：

data(){
    return {
        title: '',
    },
},
mounted(){
    axios.get('/api/items/all').then(response => {
        this.title = response.data.title;
    });
}

这应该足以让 Vue.js 进行更改并正确呈现新标题（在我的示例中）。如果你想在渲染之前观察变化，你可以添加一个 watch 属性这样的：

watch:{
    'title': function (newVal, oldVal) {
        // you can work with a new value here
    },
}

如果您需要这方面的更多信息，可以阅读 Computed Properties and Watchers 上的 Vue 文档。

Answer 2

您有点同时问了 2 或 3 个问题，所以我会尝试部分回答。

Angular Vue 中的可观察对象

Angular 可观察对象的直接替代是 Vue 事件系统。您可以使用 this.$on 监听事件并使用 this.$off 停止监听。要在整个应用程序范围内执行此操作，您需要制作类似事件总线的东西：

Vue.prototype.$bus = new Vue();

// in components
mounted () {
  this.$bus.$on('myMessage', this.handleMyMessage);
},

beforeDestroy () {
  this.$bus.$off('myMessage', this.handleMyMessage);
}

也就是说，这听起来不像是您真正想要使用的。

正在刷新数据

我怀疑您想滥用 retry() 方法一遍又一遍地重做请求，但老实说没有理由使用它。你可以把请求放在一个方法中，然后在一个时间间隔内调用它。

更新数据的更好方法可能是使用 websocket 服务器，但这是您需要设置的。没有它，您要么必须重复执行 api 请求，要么在用户想要之前不要刷新它。

正在更新模板

Vue 中的数据始终是反应性的。如果模板中引用的数据发生变化，模板会自动重新呈现。如果您更改对象，您可能需要使用辅助方法 Vue.set 或 Vue.delete (docs)。这将确保数据保持反应性，从而更新呈现的模板。

Answer 3

您可以使用 vue-rx 在 Vue.js 中使用 Observables。

以下演示每 10 秒对 API 服务进行一次 AJAX 调用，returns 是一个随机笑话：

new Vue({
  el: '#demo',
  subscriptions: function () {
    return {
      joke: rxjs.timer(0, 10000).pipe(
        rxjs.operators.switchMap(() => rxjs.ajax.ajax('https://geek-jokes.sameerkumar.website/api')),
        rxjs.operators.map(res => res.response) 
      )
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/rxjs/bundles/rxjs.umd.js"></script>
<script src="https://unpkg.com/vue-rx@6.1.0/dist/vue-rx.js"></script>
<div id="demo">{{ joke }}</div>

Answer 4

我会看一下 Socket.IO。它利用 websocket 的方式，这是一种往返于客户端和服务器的双向连接。这允许服务器告诉您的网站有关更改并提供该数据，而无需您对其进行轮询（值得注意的是，socketio 将轮询信息，但不支持 websocket）。

Answer 5

Laravel 为我的问题提供了开箱即用的解决方案。关键词是 Broadcast 事件。使用这种方法，处理套接字连接真的很容易。除了这个奇妙的功能，您还可以使用 Socket.io 和 Redis。

Laravel 文档：https://laravel.com/docs/5.7/broadcasting

因为我不知道 vue 总是在我的数据发生变化时重新渲染模板，所以不再需要某物。就像 Angular

中的观察员

Vue：有没有办法检测来自 API 的变化数据

Vue: Is there a way to detect changes data coming from API

laravel

vue.js

detection

Angular Vue 中的可观察对象

正在刷新数据

正在更新模板