對大部分人來說，掌握Vue.js基本的幾個API后就已經能夠正常地開發前端網站。但如果你想更加高效地使用Vue來開發，成為Vue.js大師，那下面我要傳授的這五招你一定得認真學習一下了。

第一招：化繁為簡的Watchers

場景還原：

created(){  this.fetchPostList()},watch: {  searchInputValue(){    this.fetchPostList()  }}

組件創建的時候我們獲取一次列表，同時監聽input框，每當發生變化的時候重新獲取一次篩選后的列表這個場景很常見，有沒有辦法優化一下呢？

招式解析：

首先，在watchers中，可以直接使用函數的字面量名稱；其次，聲明immediate:true表示創建組件時立馬執行一次。

watch: {  searchInputValue:{    handler: 'fetchPostList',    immediate: true  }}

第二招：一勞永逸的組件注冊

場景還原：

import BaseButton from './baseButton'import BaseIcon from './baseIcon'import BaseInput from './baseInput'export default { components: {  BaseButton,  BaseIcon,  BaseInput }}

<BaseInput v-model="searchText" @keydown.enter="search"/><BaseButton @click="search"> <BaseIcon name="search"/></BaseButton>

我們寫了一堆基礎UI組件，然后每次我們需要使用這些組件的時候，都得先import，然后聲明components，很繁瑣！秉持能偷懶就偷懶的原則，我們要想辦法優化！

招式解析：

我們需要借助一下神器webpack，使用 require.context() 方法來創建自己的（模塊）上下文，從而實現自動動態require組件。這個方法需要3個參數：要搜索的文件夾目錄，是否還應該搜索它的子目錄，以及一個匹配文件的正則表達式。

我們在components文件夾添加一個叫global.js的文件，在這個文件里借助webpack動態將需要的基礎組件統統打包進來。

import Vue from 'vue'function capitalizeFirstLetter(string) { return string.charAt(0).toUpperCase() + string.slice(1)}const requireComponent = require.context( '.', false, //.vue$/  //找到components文件夾下以.vue命名的文件)requireComponent.keys().forEach(fileName => { const componentConfig = requireComponent(fileName) const componentName = capitalizeFirstLetter(  fileName.replace(/^/.///, '').replace(//./w+$/, '')  //因為得到的filename格式是: './baseButton.vue', 所以這里我們去掉頭和尾，只保留真正的文件名 ) Vue.component(componentName, componentConfig.default || componentConfig)})

最后我們在main.js中import 'components/global.js'，然后我們就可以隨時隨地使用這些基礎組件，無需手動引入了。

第三招：釜底抽薪的router key

場景還原：

下面這個場景真的是傷透了很多程序員的心...先默認大家用的是Vue-router來實現路由的控制。