vue项目中体验优化小技巧

一：避免请求数据前出现空状态闪现问题

在项目中，经常会遇到这样的场景，比如有一个购物车页面。当购物车无数据时，会有一个空的状态，而当我们请求数据之前，因为原本购物车的数据的初始值为空数组，会导致这个空状态先闪现出来，然后再加载出来。体验非常不好。而导致这样的原因的结构一般是这样的：

<tempalte>
    <div>
        <div v-if="list.length>0">
            <div v-for="item in shopcartList" :key="item.id" >
                {{item.prodName}}
            </div>
        </div>
        <div class="empty" v-else>暂无数据</div>
    </div>

</template>
<script>
    data(){
        return{
            list:[]
        }
    },
    methods:{
        getList(){
            fetch(...).then(res=>{
                this.list=res.data.list
            }).catch(err=>throw new Error(err))    
        }

    }
</script>

空状态的展示完全依赖list这个数组是否有值，而默认是空，所以导致初始化的时候也展示出来。闪了一下。而我们仔细想想empty空状态展示的真正逻辑,它应该是请求了数据而且数据为空的时候才展示。所以我们需要再有一个标识，让它感知是真正请求了接口并且数据是空，而不是我们初始化默认给他赋值的[]。所以我们再加一个标识，让它去完成这个判断。

<template>
    <div>
        <h2>home</h2>
        <div class="item-wrap" v-if="list.length > 0">
            <p v-for="item in list" :key="item.id">{{item.name}}</p>
        </div>
        <div class="empty" v-if="list.length===0 && emptyFlag==1">暂无数据</div>
    </div>

</template>

<script  setup>
import request from "../utils/axios"
import { reactive,ref } from "vue"

const list=ref([])
let emptyFlag=ref(0)

const getList=()=>{
    emptyFlag.value=0;
    request("/api/list","GET").then(res=>{
            emptyFlag.value=1
            list.value=res.data.list||[]
    }).catch(err=>{
        throw new Error(err)
    })
}
getList()
</script>

<style  scoped>
.item-wrap{
    width: 600px;
    margin: 20px auto;
}
.item-wrap p{
    padding: 20px 0 ;
    box-shadow:  0 0 3px #ccc;
}
</style>

emptyFlag再我们每次请求这个接口的时候都会去做一个赋值，让它参与这个接口请求的过程。v-if="list.length===0 && emptyFlag==1" 让它只有在请求数据以后而且数据为【】的情况下才出现

二：避免请求数据前出现页面出现{{item.name}}

当请求获取数据时，如果接口比较缓慢，会出现页面展示{{item.name}}这样的情况，我们可以通过v-cloak指令+[v-cloak]:{display:none}来实现：

<template>
<div>
     <p v-cloak>姓名:{{info.name}}</p>
     <p v-cloak>年龄:{{info.age}}</p>
     <p v-cloak>email:{{info.email}}</p>
</div>
</template>

<style>

[v-cloak]{
    display: none;
}

</style>