vue 面试题002 vue代码优化问题

1 路由懒加载

当打包构建应用时，js包变的非常大，影响页面加载。如果我们把不同路由对于的组件分割成不同的代码块，当然当路由被访问的时候才加载对于的组件，这样就更加高效了。

具体懒加载实例：

1-1：Vue异步加载技术

{

path: '/problem', name: 'problem',

component: resolve => require(['../pages/home/problemList'], resolve)

}

1-2：ES6推荐方式imprort ()----推荐使用

import Vue from 'vue';
import Router from 'vue-router';
// 官网可知：下面没有指定webpackChunkName，每个组件打包成一个js文件。
const Foo = () => import('../components/Foo')
const Aoo = () => import('../components/Aoo')
// 下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件。
// const Foo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/Foo')
// const Aoo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/Aoo')
export default new Router({
    routes: [
        {
            path: '/Foo',
            name: 'Foo',
            component: Foo
        },
        {
            path: '/Aoo',
            name: 'Aoo',
            component: Aoo
        }
    ]
})

1-3：webpack提供的require.ensure()实现懒加载

import Vue from 'vue';
import Router from 'vue-router';
const HelloWorld=resolve=>{
        require.ensure(['@/components/HelloWorld'],()=>{
            resolve(require('@/components/HelloWorld'))
        })
    }
Vue.use('Router')
export default new Router({
    routes:[{
    {path:'./',
    name:'HelloWorld',
    component:HelloWorld
    }
    }]
})

2 代码模块化

可以把常用的地方封装成单独的组件，在使用的时候在引用，不必写很多重复代码，每一个组件都有明确意义，复用性、可配置行越高越好，也包括css可通过less和sass自定义css变量来减少重复代码。

3 for 循环设置key

在使用v-for进行数据遍历渲染的时候，为每一项都设置一个key值，以便vue内部核心代码能快速查找该条数据，当新值和旧值比较的时候，可以更快的定位到diff.