2
Vue中的{ __ob__: Observer }问题解决
source link: https://raycoder.me/p/vue-ob-observer-problem/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
写作不易，资瓷一下呗！本文首发于个人博客：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工作了！
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK