前言

本文是vue源碼貢獻值Chris Fritz在公共場合的一場分享，覺得分享里面有不少東西值得借鑒，雖然有些內容我在工作中也是這么做的，還是把大神的ppt在這里翻譯一下，希望給朋友帶來一些幫助。

一、善用watch的immediate屬性

這一點我在項目中也是這么寫的。例如有請求需要再也沒初始化的時候就執行一次，然后監聽他的變化，很多人這么寫：

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

上面的這種寫法我們可以完全如下寫：

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>

步驟一般有三部，

第一步，引入、

第二步注冊、

第三步才是正式的使用，

這也是最常見和通用的寫法。但是這種寫法經典歸經典，好多組件，要引入多次，注冊多次，感覺很煩。

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

思路是：在src文件夾下面main.js中，借助webpack動態將需要的基礎組件統統打包進來。

代碼如下：

import Vue from 'vue'import upperFirst from 'lodash/upperFirst'import camelCase from 'lodash/camelCase'// Require in a base component contextconst requireComponent = require.context( ‘./components', false, /base-[/w-]+/.vue$/)requireComponent.keys().forEach(fileName => { // Get component config const componentConfig = requireComponent(fileName) // Get PascalCase name of component const componentName = upperFirst(  camelCase(fileName.replace(/^/.///, '').replace(//./w+$/, '')) ) // Register component globally Vue.component(componentName, componentConfig.default || componentConfig)})

這樣我們引入組件只需要第三步就可以了：

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

三、精簡vuex的modules引入

對于vuex，我們輸出store如下寫：

import auth from './modules/auth'import posts from './modules/posts'import comments from './modules/comments'// ...export default new Vuex.Store({ modules: {  auth,  posts,  comments,  // ... }})