一、善用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>
//前端全栈学习交流圈:685910553
//面向想学习的前端小白或者想提升自己的前端开发人员
//帮助突破技术瓶颈,提升思维能力
步骤一般有三部,
第一步,引入、
第二步注册、
第三步才是正式的使用,
这也是最常见和通用的写法。但是这种写法经典归经典,好多组件,要引入多次,注册多次,感觉很烦。
我们可以借助一下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 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)
})
//前端全栈学习交流圈:685910553
//面向想学习的前端小白或者想提升自己的前端开发人员
//帮助突破技术瓶颈,提升思维能力
这样我们引入组件只需要第三步就可以了:
<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,
// ...
}
})
要引入好多modules,然后再注册到Vuex.Store中~~
精简的做法和上面类似,也是运用 require.context()读取文件,代码如下:
import camelCase from 'lodash/camelCase'
const requireModule = require.context('.', false, /\.js$/)
const modules = {}
requireModule.keys().forEach(fileName => {
// Don't register this file as a Vuex module
if (fileName === './index.js') return
const moduleName = camelCase(
fileName.replace(/(\.\/|\.js)/g, '')
)
modules[moduleName] = {
namespaced: true,
...requireModule(fileName),
}
})
export default modules
//前端全栈学习交流圈:685910553
//面向想学习的前端小白或者想提升自己的前端开发人员
//帮助突破技术瓶颈,提升思维能力
这样我们只需如下代码就可以了:
import modules from './modules'
export default new Vuex.Store({
modules
})
四、路由的延迟加载
这一点,关于vue的引入,我之前在 vue项目重构技术要点和总结 中也提及过,可以通过require方式或者import()方式动态加载组件。
{
path: '/admin',
name: 'admin-dashboard',
component:require('@views/admin').default
}
或者
{
path: '/admin',
name: 'admin-dashboard',
component:() => import('@views/admin')
}