【Vuejs】1125- 非常實用的 5 個 Vue 高級實戰(zhàn)技巧

前言

今天，我們來分享幾個不可不知的vue高級實戰(zhàn)技巧。

技巧

自動注冊組件

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

<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>

那么，有沒有更加方便快捷的方法呢？我們不妨這樣。

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

目錄結(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$/);?//?'./'操作對象為當(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的一個API，所以，需要基于webpack環(huán)境才可以使用。

自動注冊路由

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

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)建一個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

然后，我們只需要創(chuàng)建對應(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的一個API，所以，需要基于webpack環(huán)境才可以使用。

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

平常，我們可能會遇到按鈕級別或者頁面內(nèi)操作權(quán)限的需求，我們可以寫一個全局自定義指令。首先，可以在入口文件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')

在頁面中使用。

"8">btn</button>?

render渲染函數(shù)

我們首先來看下這樣一個例子，你會看到模板上特別多的條件判斷。

<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)化呢？接下來，我們可以使用render渲染函數(shù)。

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

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

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

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ū)憺?br>?*?Vue.use(Button)
?*?Vue.use(Select)
?*/

new?Vue({
??el:?'#app',
??render:?h?=>?h(App)
});

我們可以這樣優(yōu)化一下，創(chuàng)建一個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)
});

回復(fù)“加群”與大佬們一起交流學(xué)習(xí)~

點擊“閱讀原文”查看 120+ 篇原創(chuàng)文章