隨著這幾年前端技術快速發展，Vue框架在國內普及率極高，人人都會用，那Vue如何寫得比別人優雅？如何寫得比別人漂亮？

鑒于一線互聯網大廠在前沿技術領域的持續研究和大規模投入，直接向他們取經，是最便捷也是最高效的學習方式。但對于中小公司工作的程序員來說，平時忙碌于業務代碼，卻很少有機會接觸到大廠的優秀實踐。

本文將介紹一些大廠Vue項目的最佳實踐：

1

一勞永逸的組件注冊

通常在組件使用前，需要引入后再注冊，但如果高頻組件多了后，每次都這樣做，不僅新增很多代碼，效率還低！我們應該如何優化呢？

其實，我們可以借助一下webpack的require.context() 方法來創建自己的(模塊)上下文，從而實現自動動態require組件。

我們先在components文件夾(這里面都是些高頻組件)添加一個叫global.js的文件，在這個文件里使用require.context 動態將需要的高頻組件統統打包進來，然后在main.js文件中引入global.js的文件。

// global.js文件import Vue from 'vue'function changeStr (str) { return str.charAt(0).toUpperCase() + str.slice(1)}const requireComponent = require.context('./', false, /\.vue$/)// 查找同級目錄下以vue結尾的組件const install = () => { requireComponent.keys().forEach(fileName => { let config = requireComponent(fileName) console.log(config) // ./child1.vue 然后用正則拿到child1 let componentName = changeStr( fileName.replace(/^\.\//, '').replace(/\.\w+$/, '') ) Vue.component(componentName, config.default || config) })}export default { install // 對外暴露install方法}

最后我們就可以隨時隨地在頁面中使用這些高頻組件，無需再手動一個個引入了。

2

高精度權限控制--自定義指令directive

我們通常給一個元素添加?v-if / v-show?來做權限管理，但如果判斷條件繁瑣且多個地方需要判斷，這種方式的代碼不僅不優雅而且冗余。

針對這種情況，我們可以通過全局自定義指令來處理：我們先在新建個?array.js?文件，用于存放與權限相關的全局函數；

// array.jsexport function checkArray (key) { let arr = ['1', '2', '3', '4', 'demo'] let index = arr.indexOf(key) if (index > -1) { return true // 有權限 } else { return false // 無權限 }}然后在將?array?文件掛載到全局中:// main.jsimport?{?checkArray?}?from?"./common/array";Vue.directive("permission", { inserted (el, binding) { let permission = binding.value; // 獲取到 v-permission的值 if (permission) { let hasPermission = checkArray(permission); if (!hasPermission) { // 沒有權限 移除Dom元素 el.parentNode && el.parentNode.removeChild(el); } } }});最后我們在頁面中就可以通過自定義指令?v-permission?來判斷： class="btns"> <button v-permission="'1'">權限按鈕1button> // 會顯示????"'10'">權限按鈕2</button>??//?無顯示????權限按鈕3button>?//?會顯示 </div>以上是我分享幾個Vue大廠實戰經驗。大家有沒有想過一個問題？隨著前端面試要求越來越高，像Vue這樣的框架已經是基本功，我們憑什么敢說比別人厲害呢？我們都會寫組件，但是你知道怎么讓組件能夠成為高復用性的組件庫型組件嗎？我們都會項目打包上線，但是你知道如何編寫配置文件能讓打包速度最優化嗎？我們都會寫路由，但是你知道如何寫才能保證多路由模塊解耦，保證更方便增加新的路由模塊嗎？前端全方面學習需要完整的前端思路實踐教學，這邊準備了一份前端路徑完整圖供大家學習：

掃碼領取前端工程師學習成長思維導圖

當然，有這些還不夠，因為目前是否積累優秀實戰經驗已經成為區分前端水平高低的評判標準，這邊推薦網易云課堂的進階課程，大家可以去這兒學習下大廠的優秀實踐。想進階自己的Vue技能，學習更多的大廠實踐技能的前端小伙伴可以去這里學習一下前端課程。

5.6-5.9前端直播課程

一、技術：《帶你深度解析日常寫的webpack配置》1、代碼分割到底是在分割什么2、開發模式怎么手動搭建3、大廠面試題分析二、項目：《如何從api層入手，讓你的項目做的更好更快》1、如何管理自己的項目api層?2、axios攔截思路3、如何二次封裝請求庫掃碼領取0元前端進階系列直播課

更有前端進階資料包免費贈送

總結

以上是生活随笔為你收集整理的treegrid 如何获取getchanges inserted_如何避开Vue性能优化之路的荆棘？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。