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

思路是：在src文件夹下面main.js中，借助webpack动态将需要的基础组件统统打包进来。

代码如下：

import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'
// Require in a base component context
const 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">								 
 1/4    1 2 3 4 下一页 尾页