Vue大廠最佳實踐

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

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

一勞永逸的組件註冊

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

其實，我們需要藉助一下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方法
}

// main.js
import index from './components/global.js'
Vue.use(index)

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

簡單暴力的router key

我們在項目開發時，可能會遇到這樣問題:當頁面切換到同一個路由但不同參數地址時，比如/detail/1，跳轉到/detail/2，頁面跳轉後數據竟然沒更新？

// 路由配置如下：
 {
     path: "/detail/:id",
     name:"detail",
     component: Detail
 }

這是因爲vue-router會識別出兩個路由使用的是同一個組件從而進行復用，並不會重新創建組件，而且組件的生命週期鉤子自然也不會被觸發，導致跳轉後數據沒有更新。那我們如何解決這個問題呢？
我們可以爲router-view組件添加屬性key

<router-view :key="$route.fullpath"></router-view>

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

我們通常給一個元素添加v-if / v-show，來判斷該用戶是否有權限，但如果判斷條件繁瑣且多個地方需要判斷，這種方式的代碼不僅不優雅而且冗餘。針對這種情況，我們可以通過全局自定義指令來處理：
我們先在新建個array.js文件，用於存放與權限相關的全局函數

// array.js
export 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.js
import { checkArray } from "./common/array";
Vue.config.productionTip = false;
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來判斷：

 <div class="btns">
    <button v-permission="'1'">權限按鈕1</button>  // 會顯示
    <button v-permission="'10'">權限按鈕2</button> //無顯示
    <button v-permission="'demo'">權限按鈕3</button> // 會顯示
  </div>

如果你想要進階自己的Vue技能，學習更多的大廠實踐技能，現在可以免費領取網易雲課堂的進階課程。