最近在學習Vue.js，把自己遇到的問題做個記錄，所以，今天添加一點小筆記。

在項目中遇到兩個問題，簡單的做個筆記來記錄自己解決的問題，可能不是很好的處理辦法，歡迎提出，自己還在不斷優化中...

第一個是vue在加載頁面的時候，會先加載靜態資源，這個時候數據還沒有請求回來，用戶會先看到靜態的內容（就是頁面固定寫死的），過一會才會有數據回來渲染，這體驗是很差的，其實解決辦法也很簡單，就是用vue里的 v-if 來判斷請求的數據是否返回...　

 <div class="container" id="app" v-cloak>   <div v-if='moneyInMsg.uuid'>     <in-account-msg :money-in-msg="moneyInMsg"></in-account-msg>   </div> </div>

這里的  v-if = 'moneyInMsg.uuid' 就是來判斷數據有沒有請求回來，如果請求回來就讓他顯示，沒有請求到數據，就讓他loading，這樣體驗就會好很多。在這里還需要注意的是，v-if判斷的數據源，是數據返回的字段，如果兩個字段只能存在其一的話，可以v-if ='a || b' 來判斷數據是否成功的返回；還要注意的一點是，不能直接在組件里用v-if判斷，也不能直接在根標簽里判斷，直接嵌套一個div就可以解決，并不影響樣式，只做數據是否正常返回的顯示作用；

第二個就是在使用vuex時，有數據緩存；我遇到的情況是，在列表頁點擊進入詳情頁，返回到列表頁，在進入另一個詳情頁的時候，數據會顯示之前的數據，同時頁面還在loading（接口返回的數據比較慢），過一會數據返回的時候，才重新渲染頁面。可能是自己對vuex理解的不夠深入，沒有在vuex基礎上解決這個問題。雖然曲折的解決了這個問題，但是不夠zhuang,但是解決了問題，后期再做優化。

在之前解決的方案中，是進入頁面的時候，重新刷新頁面，重新請求數據，代碼如下：

export const refresh = (title) => { document.title = title; let iframe = document.createElement('iframe');　iframe.src = require('./mm.jpg'); iframe.setAttribute('style', 'display:none;'); let loadFn = function () {     iframe.removeEventListener('load', loadFn);     document.body.removeChild(iframe);     console.info('Page Title IS ' + title);     iframe = null;     loadFn = null; } document.body.appendChild(iframe) iframe.addEventListener('load', loadFn);}

但是沒有達到預期的效果，依然會出現上面的情況... 丫的,抓狂了...（被別人催的感覺真的不爽...）

百度啊，google啊，都沒有遇到這種情況的？找到一個，還是提問的，沒有回答的，好吧，還是靠自己。自己動手，豐衣足食啊...

思路是，定義一個參數status為false，當數據沒有請求回來，就不顯示，也是用上面的方式來判斷，一直loading（請求失敗，去掉loading），當數據返回的時候，讓status為true；使用$nextTick來更新數據...

貼上自己部分的代碼作為參考:

<template>  <div v-if='status && order.name'>    //頁面展示的數據  </div></template> <script>  export default{  data(){    return {       status：false      }    },    created(){　　     var _this = this;      this.setDd({res =>{        _this.$nextTick(function(){          _this.status= true        });        }})    },    computed:{      ...mapGetters({//getter獲取的數據})    },    methods:{      ...mapActions(['setDd']) //獲取數據的方法    }  }   </script>       

處理的方式比較丑陋...,但是實現了想要的效果；這里注意一點就是v-if的判斷問題。（v-if='status && order.name'）這個用了并且，目的是有數據返回，才能讓他顯示，如果沒有數據，會顯示靜態的值，數據都為underfind...

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。