基於 Vue2.0 + Element 的單頁面視覺化開發實踐

_admin發表於2017-11-24
Vue視覺化

需求

專案迭代，要重構出一個可供使用者操作的，可自由選擇模板，可定製內容的頁面。相當於這個單頁面上最終展示的所有內容，都是由使用者自己去定製完成的。 細想之後覺得使用 Vue 來做比較合適，因為頁面上大部分操作都可理解為是對總體資料的再排序編輯。下邊是記錄的開發過程中一些相對關鍵的問題。

Vue 原始資料的深複製

由於 JS 物件的引用型別特點，在一些不需要雙向繫結資料的時候，需要通過深拷貝原始的資料物件來暫存資料，即用 JSON.parse(JSON.stringify(...)) 的方式複製一份資料來進行操作。一般情況下元件間的資料干擾等情況都是由於此問題導致的。

預設資料與已編輯資料的分離

最開始做的時候未考慮到這個問題，使用了簡單粗暴的方法調取預設資料，即在進入頁面的時候複製一份資料充當預設資料。之後發現這個會導致使用者運算元據後預設資料也跟著改變的問題。 良好的解決方法就是相互分離，全部都是獨立請求。

Element 的 Dialog 對話方塊監聽

Dialog 方面，由於目前 Element 2.0版本是在頁面載入時直接將需要用到的所有 Dialog 生成好然後 hide 掉，切換狀態時只是執行了 show/hide 操作，考慮到複用性問題，並非銷燬及重新生成，所以在資料的監聽更新上會可能存在只有首次才能觸發到的問題，處理辦法之一就是監聽影響對話方塊顯示隱藏的屬性，如官方示例中的 dialogVisible ，進而執行對話方塊顯示時的資料更新等操作。

本地開發的資料請求跨域問題

一方面可通過 webpack-dev-server 新增配置 disableHostCheck: true 來修改它的預設查詢 hostname 的行為。也可以配置config > index.js 下 proxyTable 來解決此問題。

proxyTable: {
  '/api': {
    target: 'http://api.x.com',
    changeOrigin: true,
    pathRewrite: {
      '^/api': '/api'
    }
  }
}
複製程式碼

另：Vue-CLI 的功能是其使用了 http-proxy-middleware 外掛 github：github.com/chimurai/ht…

資料的儲存調取

使用 localstorage 來儲存用於區分身份的 ID，根據不同 ID 使用 axios 來進行服務端的資料請求。 如果牽涉跨域是需要新增 JSONP 模組的。連結：github.com/axios/axios…

待改進

  • 未使用 Vue 懶載入，由於操作邏輯的複雜性，首頁所有的 JS 檔案將近800 KB ，如果以後迭代功能 JS 檔案還可能更大，可能會有更大的 JS 檔案，結果可能會導致首次載入等待時間較長，所以理想狀態下是考慮加入懶載入，按需載入 JS 提前規劃。
  • 未使用 Vuex，目前元件間的資料通訊全都是通過 prop 傳參的形式實現的。雖然目前元件間還不存在大範圍共享資料的問題，但是引入 Vuex 進行資料處理還是很有必要的。隨著專案的複雜化推進目前元件間的傳參會越來越顯的笨重。

在最後

以上要點是整個首頁專案提取出來的一些關鍵性問題，隨著第一個Vue 專案的告一段落，不得不感嘆資料驅動型真是簡單、便捷、高效。相比之前 jQuery 的查詢、繫結 DOM 而後再渲染確實完全沒法比。嘗試新事物總是讓人興奮不止。

補充中。。。

如有問題，歡迎指正！原博地址：tmac.wang/2017/11/%E5…

相關文章