vue技术分享之你可能不知道的7个秘密

前言

本文是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,  // ... }})