更新时闪烁效果 - Vue 组件答案

【问题标题】：Flickering effect while updated - Vue Component更新时闪烁效果 - Vue 组件
【发布时间】：2018-11-03 19:27:21
【问题描述】：

我创建了组件来通过来自 URL 的查询从 API 搜索帖子，但是如果我更改查询，我会收到奇怪的闪烁效果。每次更改后，轻弹计数都会增加。如何解决？ Vue Devtools 显示 loadPosts() 被调用：1次、2次、3次等等。哪里错了？重新加载组件会产生相同的效果。

<template>
    <v-app>
        <main-header/>
        <v-layout class="mx-auto default--container">
            <v-flex xs12 ma-2>
                <h2 class="display-2 text-xs-center main-page--header">
                    <span class="text__red">W</span>yniki wyszukiwania dla:
                    <span class="text__red">{{this.$route.query.s}}</span>
                </h2>
                <article-list-sample v-for="i in articles.length" :key="`${i}`" />
            </v-flex>
        </v-layout>
        <main-footer />
    </v-app>
</template>

<script>
    import MainHeader from './MainHeader';
    import MainFooter from './MainFooter';
    import ArticleListSample from './ArticleListSample';
    import API from '../api';
    export default {
        components: {
            ArticleListSample,
            MainFooter,
            MainHeader
        },
        name: 'search',
        data: () => ({
            articles: []
        }),
        methods: {
            loadPosts() {
                API.get(`posts?search=${this.$route.query.s}`)
                    .then(response => this.articles = response['data'])
            }
        },
        mounted() {
            this.loadPosts();
        },
        updated() {
            this.loadPosts();
        }
    };
</script>

<style scoped>

</style>

【问题讨论】：

标签： javascript vue.js vue-component

【解决方案1】：

为了补充这一点，创建了无限循环，因为每当您更改 this.articles 时都会触发更新，这将启动另一个异步调用。

【讨论】：

【解决方案2】：

我解决了。只需要添加 watcher 而不是 updated() 方法。

watch: {
            '$route' () {
                this.loadPosts();
            }
        },

【讨论】：