解决vue更新默认值时出现的闪屏问题

　　在Vue项目中，对于一个展示用户个人信息的页面。有以下需求，需要判断用户个人信息是否填充过，如果填充过，需要在页面中展示已填充项（未填充项不展示）；如果未填充过，需要在页面中显示另外一种元素（提示用“去完善”个人信息）。

　　这时候，我们在页面中有如下元素：

<div v-if="userExist">
    // 这里展示用户已填充的信息内容
</div>
<div v-else>
    <img class="user-pic-tip" src="../../images/no_info.png"/>
    <div class="user-info-tip">
        <span>暂无基本资料数据</span>
        <router-link to="/editUser">
            <span class="data-link-to">去完善</span>
        </router-link>
    </div>
</div>

　　data中userExist有默认值——false：

export default {
    name: "healthData",
    data() {
        return {
            userExist: false, // 标记用户是否已填充个人信息
        }
     };
},

　　而用户到底有没有填充过个人信息是需要在mounted中通过接口从后端获取数据才可以知道，这里如果是填充过，后端会返回状态码200；如果没有填充过，后端会返回状态码201。

axios.get('/userInfo').then(res => {
    if (res.data.data && res.data.status == 200) {
        this.userExist = true
        // 这里填充对所返回用户数据的解析
    }
}  

　　在上面这种代码情况下，因为userExist默认值为false，所以默认需要展示无数据的页面元素。又因为userExist值得变更需要通过axios请求的方式获取，就会有延时问题，即产生页面闪烁的情况。

　　

解决方式：

　　这种问题我们就可以通过如下方式解决，因为无数据是页面中的元素较少，我们可以跟它们中的图片路径、文字等内容的初始值设置为空，请求结束时再为其重新赋值。

　　页面元素部分：

<div v-if="userExist">
    // 这里展示用户已填充的信息内容
</div>
<div v-else>
    <img class="user-pic-tip" :src="noDataTip.imgSrc"/>
    <div class="user-info-tip">
        <span>{{noDataTip.tipInfo}}</span>
        <router-link to="/editUser">
            <span class="data-link-to">{{noDataTip.jumpEditUser}}</span>
        </router-link>
    </div>
</div>

　　在data中进行声明：

export default {
    name: "healthData",
    data() {
        return {
            userExist: false, // 标记用户是否已填充个人信息
            noDataTip: { // 用户未填写个人信息时要显示的页面元素的填充内容
                imgSrc: '',
                tipInfo: '',
                jumpInfo: ''
            }
        }
     };
},    

　　重新赋值的过程：

axios.get('/userInfo').then(res => {
    if (res.data.status == 10001) {
        return context.noDataTip = {
            imgSrc:  require('../../images/no_data.png'),
            tipInfo: '暂无基本资料数据',
            jumpInfo: '去完善'
        }
    }
    if (res.data.data && res.data.status == 200) {
        this.userExist = true
        // 这里填充对所返回用户数据的解析
    }
}  

　　通过这种方式，用户就不会看到闪烁的情况了。但是，上面这种方式有一个值得注意的地方，img标签的src属性如果想要通过属性绑定的方式给其动态赋值，有两种处理方式：1.通过上面代码中的 require('') 方式；2.通过书写绝对路径的方式。

 

　　属性绑定相关内容可以查看这篇文章：https://www.cnblogs.com/belongs-to-qinghua/p/10939900.html