写作不易，资瓷一下呗！本文首发于个人博客：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工作了！
全文完