前端 Vue 1 mins

Vue中的{ __ob__: Observer }问题解决

21-08-20 / 490 Words

写作不易,资瓷一下呗!本文首发于个人博客:https://raycoder.me

在Vue的开发中,我们经常有异步获取数据的情况,在没有数据的时候使用骨架装载器(Skeleton Loader,直译)占位,比如:

<template>
    <div>
        <v-row>
            <template v-if="books">
            </template>
            <template v-else>
                <v-card
                    min-width="344"
                    min-height="286"
                    class="mx-4"
                >
                    <v-skeleton-loader
                        class="mx-auto"
                        type="card, list-item"
                    ></v-skeleton-loader>
                </v-card>
            </template>
        </v-row>
    </div>
</template>

<script>
    export default {
        name: 'HomePage',
        data () {
            return {
                books: []
            }
        },
        components: {
            Item
        },
        mounted () {
            document.title = 'Leanbook - Index'
            this.$store.dispatch('mock/getBooksData')
        }
    }
</script>

然后通过axios之类的异步库(Vuex)来获取数据。

嘶,然后,出问题了。

Skeleton Loader没显示啊!

我们来打印一下books

> console.log(this.books)
< { __ob__: Observer }

好吧,原来Vue为了监视数值的变化加了一个Observer,这会导致判断出来“数组有值”。

那么我们就有思路了,用JSON.stringify来监测这个数组是不是空数组。

<template>
    <div>
        <v-row>
            <template v-if="JSON.stringify(books) !== '[]'">
            </template>
            <template v-else>
                <v-card
                    min-width="344"
                    min-height="286"
                    class="mx-4"
                >
                    <v-skeleton-loader
                        class="mx-auto"
                        type="card, list-item"
                    ></v-skeleton-loader>
                </v-card>
            </template>
        </v-row>
    </div>
</template>

网上的教程都是使用JSON.parse(JSON.stringfy())来取值,相当于深拷贝。但是我们这里的值可能会变动,所以不能深拷贝,只能使用JSON.stringify()

如果需要在其他地方取值,那么需要深拷贝。

好的,加入完JSON.stringify之后,Skeleton Loader工作了!

全文完