[TOC] ## 前言 繼續總結vue項目實踐中的優化和思考 ## 實踐問題 ### 批量對象屬性賦值 使用場景：主要是針對需要把對象的一些屬性批量的賦值到另外一個對象上，然后如果你的屬性很多可能要寫很多賦值語句。（前提是屬性名一般是相同的） > 說明：可能有人會問為什么不直接用這個對象，答案也很簡單，如果可以直接用，當然直接用是最好的，我自己在寫接口param的時候，就會注意這些，需要傳參的部分封裝到一個特殊的對象里，然后進行data的綁定，這樣需要的時候直接用傳參對象。但這里討論的不是這種情況。 ``` //優化前 let data = {} data.name = this.form.name data.len = this.form.len data.amount = this.form.amount //優化版本一 ：利用對象的解構 let {name,len,amount} = this.form //利用對象解構還可以支持屬性名變更的情況 let {name,len:length,amount:money} = this.form let data = {name,length,money} //優化版本二 ：可以支持批量的導入需要賦值的，對于拷貝對象，用source屬性承接，而需要賦值的屬性用propArr承接 //在方法中用json的相關方法支持了簡單的對象深拷貝 // 批量加載對象屬性，支持傳入數組[{source:sourceObj,propArr:[]}] setProps(arr) { if (arr.length <= 0) return {} return arr.reduce((acc, item) => { item.propArr.reduce((acc, prop) => { if (typeof item.source[prop] === 'object') { acc[prop] = JSON.parse(JSON.stringify(item.source[prop])) } else { acc[prop] = item.source[prop] } return acc }, acc) return acc }, {}) } ``` **拓展思考**：像這種代碼如果你爹vue代碼里經常寫，不妨在你的mixins中混入這個方法，可以為你的頁面節省大量的代碼空間。 ### 批量變量重置 在我們的代碼中經常會遇到吧一些變量進行重置，這部分代碼重復率很高又沒有技術含量，所以我寫一個工具方法進行簡單的支持，代碼優化。 ``` //優化前 this.search = false this.data = [] this.cur_page = 1 this.pageNo = 1 this.totalCount = 0 this.processType = '' this.person = '' this.keyword = '' this.taskStatus = '' this.stdate = [] this.processStatus = '' /** * @author zhangbing * @param [] arr 需要重置的數組變量 * @param {*} options 配置對象 對于這里的重置規則如果不符合需求的可以自定義option字典,然后用instanceof 判斷類型（todo） */ resetVars(arr, options) { if (!arr || arr.length === 0) return let _options = { object: {}, string: '', number: 0, boolean: true, null: null, undefined: undefined } _options = options ? Object.assign({}, _options, options) : _options return arr.map(item => { if (_options.includes(typeof item)) { item = _options[typeof item] } else { // 不存在重置類型的 重置為字符串 item = '' } return item }) } ``` **拓展思考**：像這種代碼如果你爹vue代碼里經常寫，不妨在你的mixins中混入這個方法，可以為你的頁面節省大量的代碼空間。 ### 骨架屏的相關連接 - [骨架屏](https://juejin.im/post/5b79a2786fb9a01a18267362) ### axios配置的攔截 - [axios模塊介紹](https://npm.taobao.org/package/axios) 模塊的過多介紹這里就不講了，這里說明的是一個非http 200狀態碼的錯誤解析，一般情況下我們會針對response部分做異常解析。 ``` // 配置返回攔截器 _axios.interceptors.response.use(function (response) { return response }, function (error) { if (error.response) { console.warn(error.response) return Promise.reject(error.response) } else { return Promise.reject(error) } }) ``` 那么這里就會有一個問題，首先報錯中的error是不能直接打印的，如果你寫會報錯如下： ``` Request failed with status code 404 at createError (createError.js?8da8:16) at settle (settle.js?664b:18) at XMLHttpRequest.handleLoad (xhr.js?ddba:77) ``` 然后針對response存在的情況下，因為這部分的處理是一樣的，返回也都在catch里解決的，所以我個人建議直接把錯誤的提示在這里解決掉，比如通過console.warn的方式或者ui的message.error的方式，這樣節省了業務方面的處理錯誤代碼。 但如果你一定希望在接口調用位置處理這部分非http 200的錯誤，要知道這部分是在catch，error中的，并不是在then中的作用域內。 ``` api.xxx().then(res=> { //http 200 處理代碼 }).catch(error=> { //非 200處理代碼 }) ``` ### vue元素標簽帶空格部分使用loader配置去掉 有些時候我們在寫模板時不想讓元素和元素之間有空格，可能會寫成這樣： ``` <ul> <li>1111</li><li>2222</li><li>333</li> </ul> ``` 當然還有其他方式，比如設置字體的font-size: 0，然后給需要的內容單獨設置字體大小，目的是為了去掉元素間的空格。其實我們完全可以通過配置 vue-loader 實現這一需求。 ``` { vue: { preserveWhitespace: false } } ``` 它的作用是阻止元素間生成空白內容，在 Vue 模板編譯后使用 _v(" ") 表示。如果項目中模板內容多的話，它們還是會占用一些文件體積的。例如 Element 配置該屬性后，未壓縮情況下文件體積減少了近 30Kb。 ### vue-cli 腳手架之后待辦事項 - 默認情況下沒有樣式預處理器的loader ，我用的scss,不加會報錯，所以需要 ``` npm i sass-loader node-sass --save-dev ``` - 默認況下，沒有頁面文件夾，在src目錄下新加pages文件夾 - 默認情況下，沒有全局的services、filter全局文件，可以分別用來是存放axios請求服務，過濾器的 - 默認情況下assets目錄下沒有分樣式，腳本，圖片的文件夾，需要加的 - 默認情況下，路由部分只有index,沒有路由守衛，路由子模塊，建議分別加入，當然我還有另外的import懶加載方法，filter路由配置文件要加 - 默認的@符號沒有聯想提示路徑，需要加jsconfig.json ``` { "compilerOptions": { "target": "es2017", "allowSyntheticDefaultImports": false, "baseUrl": "./", "paths": { "@/*": ["src/*"], } }, "exclude": ["node_modules", "dist"], "include": ["src"] } ``` - 默認的axios沒有我們需要的業務網關配置和請求攔截 - 默認的mixins，你一定有很多工具方法和數據需要全局配置使用 - 默認情況下，沒有業務枚舉數據，建議新加一個枚舉文件夾，用來存放各個業務的枚舉數據 - 默認情況下，api服務沒有mock設置和請求，可以根據自己需求設置 其中baseUrl需要設置為自己的域名地址，可以根據process.node.env控制，可以根據域名判斷。其中axios需要加必要的請求前后的攔截配置，其中用戶id的部分在必要的時候需要加入。 ``` const transformRequest = (data = {}, headers) => { if (typeof data === 'string') return data const loginId = getUid() return JSON.stringify({...data, loginId}) } let _axios = axios.create({ baseURL: apiProxyUrl, headers: { 'Content-Type': 'application/json' }, transformRequest: [transformRequest], timeout: 10000 }) // 配置返回攔截器 _axios.interceptors.response.use(function (response) { return response }, function (error) { if (error.response) { console.warn(error.response) return Promise.reject(error.response) } else { return Promise.reject(error) } }) ``` - 默認的app跟組件可能沒有設置data為返回函數 ，返回對象 ### vue-router 路由死循環 下面這個報錯是因為路由進入了死循環，需要糾正查看下路由的守衛部分有沒有循環，以及設置的攔截、非攔截路徑是否正確。 ``` [vue-router] uncaught error during route navigation: <failed to convert exception to string> ``` ### data屬性沒有設置為函數并返回對象的報錯 顯性的返回對象就可以了 ``` [Vue warn]: data functions should return an object: ``` ### eslint配置自動驗證和自動修復 > 前提：配置了eslint插件并且開啟了eslint對文件的格式驗證。 默認加了很多eslint規則之后，項目運行就會報錯，但實際上肯定是期望軟件幫我們自動修正，那么其設置的方法是什么呢？分為兩部分，一部分是軟件的設置，一部分插件的設置，這里以mac --vscode為例，說明下如何設置自動糾正： > 1、window電腦： > 文件 > 首選項 > 設置 打開 VSCode 配置文件 > 2、mac電腦 > code>首選項 >設置 ``` "eslint.autoFixOnSave": true, "eslint.validate": [ "javascript",{ "language": "vue", "autoFix": true },"html", "vue" ], ``` 備注：如果你不想在項目中使用eslint，其在config/index.js，dev配置中，useEslint: true ，設置為false即可。 ### vue路由攔截實現保存用戶信息 場景：為了防止用戶突然離開，沒有保存已輸入的信息。 ``` //在路由組件中:mounted(){}， beforeRouteLeave (to, from, next) { if(用戶已經輸入信息){ //出現彈窗提醒保存草稿，或者自動后臺為其保存 }else{ next(true);//用戶離開 } } ```