最近在開發公司的一個後端管理系統，用的是比較流行的vue框架。在開發過程中，總是出現各種各樣的報錯問題，有警告的，有接口不通的，有自己馬虎造成的低級錯誤的等等，這些錯誤在一些老司機面前分分鐘解決，但今天遇到的問題，讓老鐵犯了難，頭大。

代碼從頭到尾看了一遍，沒問題啊，把報錯的代碼定位的具體的地方，還是沒有問題啊。把自己的問題放在百度上查，居然也有小夥伴遇到同樣的問題，不過有同學解決了，有同學沒有解決，如：

1、Vue.js頁面數據渲染成功，但是控制臺還是報錯提示未定義

2、Error in render: "TypeError: Cannot read property ‘XXXXX‘ of undefined"

3、vue.js未定義 - 已經獲取到數據並渲染在頁面上，但是警告未定義

其實還有很多，就不一一列舉了。以上有些同行靠著自己的經驗技術成功解決了問題，我呢，就不信這個邪了，盡管這個警告不影響頁面的展示，但終歸是警告了，終歸是自己的寫法有問題了，且看下圖：

圖中BD姓名展示的字段就是bdName，明明數據已經渲染了，為何還會提示這個屬性未定義呢？

解決辦法還是從上邊列出的第三個問題中找到的靈感。那麽出問題的時機很可能就是異步調取接口獲取數據和vue的生命周期mounted異步進行，在mounted已經走完，頁面DOM節點已經掛載完成時，接口數據卻沒有第一時間一起返回並渲染，雖然在我們肉眼可觀察到的時間內，數據成功渲染到了頁面中，但卻結結實實地給我們報了一個“屬性未定義”的警告。

那麽我們就要上手段了，需要在DOM節點掛載完成時判斷初始化的數據是否存在（初始化的數據我們一般會設置為空的字符串或空的對象）。由於初始化時我給數據設置的是空的對象，但卻沒有判斷這個對象是否為空，所以就導致了以上屬性未定義的警告出現。這裏還有一個小問題，如果給初始化的數據設置為空的對象，那麽在頁面中需要判斷該數據是否為空對象就不太好判斷了，也能判斷，就是感覺不太好。js屬於弱類型語言，當我們給一個初始化的變量賦值時可以不用在意它初始化時是什麽類型，比如你初始化一個變量var a = 0，那麽你依然可以在需要時設置a為一個字符串，看下圖：

所以我就把初始化時設置的空對象數據detailData: {}

至於網上有些同學出現的問題，我個人估計應該是跟我出現的問題是一樣的，應該也是將初始化數據設置成了空對象，卻沒有判斷這個初始化數據是否為空，而且就算是加了是否為空的判斷，估計判斷的方法也是有問題的，因為當datailData為一個空對象時，v-if="datailData"判斷出來的依然是true，等於沒有判斷，如下圖：

vue.js數據可以在頁面上渲染成功卻總是警告提示某個字段未定義