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.

你可能感兴趣的:(vue面试,vue.js,前端,javascript)