vue进阶 -- 技巧总结

一、合理利用watch的immediate属性

例如在组件创建时需要获取一次数据列表，然后监听数据的变化，根据数据改变重新获取列表。通常这么写：

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

但是上面的这种写法我们可以精简写成如下：

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

声明 immediate:true ， 表示创建的时候立即执行一次。

二、利用require.context()进行组件引入和注册

一般情况下，组件写法如下：

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>

一般步骤有三步：

1. 引入
2. 注册组件
3. 正式使用

这是最常见和通用的写法。但是如果组件过多，则要引入多次，注册多次。

我们可以借助一下webpack，使用 require.context() 方法来创建自己的（模块）上下文，从而实现自动动态require组件。

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

代码如下：

一些方法解释： upperFirst 、 camelCase 、 require.context()

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">
    <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

这样我们只需如下代码就可以了：

import modules from './modules'
export default new Vuex.Store({
    modules
})

四、组件的异步加载（按需加载组件）

在平时的demo中，可能不会遇见这个需求。当页面很多，组件很多的时候，SPA页面在首次加载的时候，就会变的很慢。这是因为vue首次加载的时候把可能一开始看不见的组件也一次加载了，这个时候就需要对页面进行优化，就需要异步组件了。

在路由index.js里（路径： src/router/index.js ），通过require方式或者import()方式动态加载组件。像下面这样：

{
    path: '/home',
    name: 'home',
    component:require('@views/home').default
}

或者

{
    path: '/home',
    name: 'home',
    component:() => import('@views/home')
}

五、通过 router :key 进行组件刷新

通常的解决方案是监听$route的变化来初始化数据，如下：

data() {
    return {
        loading: false,
        error: null,
        post: null
    }
}, 
watch: {
   '$route': {
       handler: 'resetData',
       immediate: true
    }
},
methods: {
    resetData() {
       this.loading = false
       this.error = null
       this.post = null
       this.getPost(this.$route.params.id)
     },
    getPost(id){}
}

问题是解决了，但是这样的处理方式不够优雅。我们希望代码这样写：

data() {
    return {
        loading: false,
        error: null,
        post: null
    }
},
created () {
    this.getPost(this.$route.params.id)
},
methods () {
    getPost(postId) {
        ...
    }
}

如何达到这样的效果：给router-view添加一个唯一的 key ，这样只要 url 变化了，就一定会重新创建这个组件。就避免了vue-rouer因为复用组件导致created函数中的方法不执行的问题。

<router-view :key="$route.fullpath"></router-view>

注： 这个一般应用在子路由里面，这样才可以避免大量重绘，假设App.vue根目录添加这个属性，那么每次点击改变地址都会重绘！