[[411324]]

前言

今天，我們來(lái)分享幾個(gè)不可不知的vue高級(jí)實(shí)戰(zhàn)技巧。

技巧

自動(dòng)注冊(cè)組件

我們平時(shí)可能這樣引入注冊(cè)組件。每次都得需要在頭部引入，然后注冊(cè)，最后在模板上使用。

<template> 
  <div id="app"> 
    <HelloWorld msg="Welcome to Your Vue.js App"/> 
  </div> 
</template> 
 
<script> 
import HelloWorld from './components/HelloWorld.vue' 
 
export default { 
  name: 'App', 
  components: { 
    HelloWorld 
  } 
} 
</script> 

那么，有沒(méi)有更加方便快捷的方法呢?我們不妨這樣。

創(chuàng)建一個(gè)名為globalRC.js文件，假設(shè)我們這里與組件平級(jí)，即存放在組件文件夾中。

目錄結(jié)構(gòu)如：

-src 
--components 
---component1.vue 
---globalRC.js 

globalRC.js:

import Vue from 'vue' 
 
function changeStr (str){ 
    return str.charAt(0).toUpperCase() + str.slice(1); 
} 
 
const requireComponent = require.context('./',false,/\.vue$/); // './'操作對(duì)象為當(dāng)前目錄 
 
requireComponent.keys().forEach(element => { 
    const config = requireComponent(element); 
 
    const componentName = changeStr( 
        element.replace(/^\.\//,'').replace(/\.\w+$/,'') 
    ) 
     
    Vue.component(componentName, config.default || config) 
}); 

然后，我們需要在main.js文件中引入。

import './components/globalRC.js' 

最后，我們只需要在模板直接使用就可以了。

<template> 
  <div id="app"> 
    <Component1 /> 
  </div> 
</template> 
 
<script> 
export default { 
  name: 'App' 
} 
</script> 

注意，require.context是webpack的一個(gè)API，所以，需要基于webpack環(huán)境才可以使用。

自動(dòng)注冊(cè)路由

這是我們之前注冊(cè)路由的方式。如果路由文件多了，會(huì)顯得特別臃腫。

import Vue from "vue"; 
import VueRouter from "vue-router"; 
// 引入組件 
import home from "../views/home.vue"; 
import about from "../views/about.vue"; 
  
// 要告訴 vue 使用 vueRouter 
Vue.use(VueRouter); 
  
const routes = [ 
    { 
        path:"/", 
        component: home 
    }, 
    { 
        path: "/about", 
        component: about 
    } 
] 
  
var router =  new VueRouter({ 
    routes 
}) 
 
export default router; 

我們可以這樣優(yōu)化一下。

在路由文件夾下，這里假設(shè)是名為router文件夾下，創(chuàng)建一個(gè)routeModule.js文件。

目錄結(jié)構(gòu)如：

-src 
--router 
---index.js 
---login.module.js 
---routeModule.js 

routeModule.js:

const routerList = []; 
 
function importAll(r){ 
    r.keys().forEach(element => { 
        routerList.push(r(element).default); 
    }); 
} 
 
importAll(require.context('./',true,/\.module\.js/));// 這里自定義為.module.js 結(jié)尾的文件 
export default routerList 

然后，我們只需要?jiǎng)?chuàng)建對(duì)應(yīng)的路由文件，如：login.module.js。

export default { 
    path:'/login', 
    name:'login', 
    component:()=>import('../views/login.vue') 
} 

最后，在路由配置文件index.js中引入routeModule.js文件即可，

import Vue from "vue"; 
import VueRouter from "vue-router"; 
import routerList from './routeModule.js' 
  
Vue.use(VueRouter); 
   
var router =  new VueRouter({ 
    routerList 
}) 
 
export default router; 

注意，require.context是webpack的一個(gè)API，所以，需要基于webpack環(huán)境才可以使用。

權(quán)限自定義指令

平常，我們可能會(huì)遇到按鈕級(jí)別或者頁(yè)面內(nèi)操作權(quán)限的需求，我們可以寫(xiě)一個(gè)全局自定義指令。首先，可以在入口文件main.js文件中。

import Vue from 'vue' 
import App from './App.vue' 
 
function checkArray(key){ 
    let arr = [1,2,3,4]; // 自定義權(quán)限列表 
    let index = arr.indexOf(key); 
    if(index>-1){ 
        return true 
    }else{ 
        return false 
    } 
} 
 
Vue.directive('auth-key',{ 
  inserted(el,binding){ 
    let displayKey = binding.value; 
    if(displayKey){ 
      let hasPermission = checkArray(displayKey); 
      if(!hasPermission){ 
        el.parentNode && el.parentNode.removeChild(el); 
      } 
      else{ 
        throw new Error('需要key') 
      } 
    } 
  } 
}) 
 
new Vue({ 
  render: h => h(App), 
}).$mount('#app') 

在頁(yè)面中使用。

<button v-auth-key="8">btn</button>  

render渲染函數(shù)

我們首先來(lái)看下這樣一個(gè)例子，你會(huì)看到模板上特別多的條件判斷。

<template> 
    <div> 
        <h1 v-if="level === 1"></h1> 
        <h2 v-else-if="level === 2"></h2> 
        <h3 v-else-if="level === 3"></h3> 
        <h4 v-else-if="level === 4"></h4> 
    </div> 
</template> 

怎么才能優(yōu)化呢?接下來(lái)，我們可以使用render渲染函數(shù)。

Vue.component('anchored-heading', { 
  render: function (createElement) { 
    return createElement( 
      'h' + this.level,   // 標(biāo)簽名稱(chēng) 
      this.$slots.default // 子節(jié)點(diǎn)數(shù)組 
    ) 
  }, 
  props: { 
    level: { 
      type: Number, 
      required: true 
    } 
  } 
}) 

局部引入第三方UI框架優(yōu)化

我們經(jīng)常使用UI框架，如果我們使用按需加載的話，需要每次都要注冊(cè)使用一下。就像下面這樣：

import Vue from 'vue'; 
import { Button, Select } from 'element-ui'; 
import App from './App.vue'; 
 
Vue.component(Button.name, Button); 
Vue.component(Select.name, Select); 
/* 或?qū)憺?nbsp;
 * Vue.use(Button) 
 * Vue.use(Select) 
 */ 
 
new Vue({ 
  el: '#app', 
  render: h => h(App) 
}); 

我們可以這樣優(yōu)化一下，創(chuàng)建一個(gè)uIcompontents.js文件。

// 每次只需要在這添加組件即可 
import { Button, Select } from 'element-ui'; 
 
const components = { Button, Select }; 
 
function install(Vue){ 
    Object.keys(components).forEach(key => Vue.use(components[key])) 
} 
 
export default { install } 

然后，在main.js文件中引入。

import Vue from 'vue' 
import App from './App.vue'; 
 
import uIcompontents from "./uIcompontents.js"; 
Vue.use(uIcompontents); 
 
new Vue({ 
  el: '#app', 
  render: h => h(App) 
}); 

本文轉(zhuǎn)載自微信公眾號(hào)「前端歷劫之路」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系前端歷劫之路公眾號(hào)。