在mpvue小程序开发中，遇到一个问题，页面在数据返回之前就进行了渲染，等异步数据返回之后重新渲染，导致出现页面抖动的情况，如下图：
<template>
<div id="singerDetail-page">
<music-list :songs="songs" :title="title" :bg-image="bgImage"></music-list>
</div>
</template>
<script>
import {mapGetters} from 'vuex'
import {getSingerDetail} from 'api/singer'
import MusicList from 'components/music-list/music-list'
export default {
data () {
return {
songs: []
}
},
mounted () {
this.singerID = this.singer.id
this._getSingerDetail()
},
methods: {
_getSingerDetail () {
getSingerDetail(this.singer.id).then((res) => {
this.songs = res.songs
})
}
},
computed: {
title () {
return this.singer.name
},
bgImage () {
return this.singer.avatar
},
...mapGetters([
'singer'
])
},
watch: {
songs () {
return this.songs
}
},
components: {
MusicList
}
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
@import "~common/stylus/variable"
#singerDetail-page
color: $color-theme
</style>在点击上一个歌手后，this.songs存储了上个歌手的数据，并没有被清空,因此，我们需要在离开页面时，手动清空this.songs.
onUnload () {
this.songs = [] //清除数据
},还有一个问题，就是抖动问题。因为数据请求我们是放在页面singerDetail上，所以在数据返回前，页面已经进行了渲染。
我们把数据请求的放在singer-list组件，解决了抖动问题。
效果如下：
