Web前端最全前端工程师的摸鱼日常（14）(2)，阿里二面是什么

react和vue的比较

相同
1）vitual dom
2）组件化
3）props，单一数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

很多时候也可以配合路由的meta属性使用

export default[

{

path:‘/’,

name:‘home’,

components:Home,

meta:{

keepAlive:true //需要被缓存的组件

},

{

path:‘/book’,

name:‘book’,

components:Book,

meta:{

keepAlive:false //不需要被缓存的组件

}

]

2、 路由懒加载

Vue 是单页面应用，可能会有很多的路由引入 ，这样使用 webpcak 打包后的文件很大，当进入首页时，加载的资源过多，页面会出现白屏的情况，不利于用户体验。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更加高效了。这样会大大提高首屏显示的速度，但是可能其他的页面的速度就会降下来。

路由懒加载：

export default new Router({

mode: ‘history’,

routes: [

{

path: ‘/’,

component: ()=>import(‘@/components/DefaultIndex’) }

]

})

懒加载：也叫延迟加载，即在需要的时候进行加载，随用随载。 使用懒加载的原因： vue 是单页面应用，使用webpcak打包后的文件很大，会使进入首页时，加载的资源过多，页面会出现白屏的情况，不利于用户体验。运用懒加载后，就可以按需加载页面，提高用户体验

非懒加载的路由配置：

import Vue from ‘vue’

import Router from ‘vue-router’

import DefaultIndex from ‘@/components/DefaultIndex’

import Index from ‘@/components/Index’

Vue.use(Router)

export default new Router({

mode: ‘history’,

routes: [

{

path: ‘/’,

component: 'DefaultIndex ',

children: [

{

path: ‘’,

component: ‘Index’

},

{

path: ‘*’,

redirect: ‘/Index’

}

]

}

]

})

懒加载的写法：

//最流行的写法，es6语法

import Vue from ‘vue’

import Router from ‘vue-router’

Vue.use(Router)

export default new Router({

mode: ‘history’,

routes: [

{

path: ‘/’,

component: () => import(‘@/components/DefaultIndex’),

children: [

{

path: ‘’,

component: () => import(‘@/components/Index’)

},

{

path: ‘*’,

redirect: ‘/Index’

}

]

}

]

})

//或者下次这样 AMD规范

import Vue from ‘vue’

import Router from ‘vue-router’

Vue.use(Router)

export default new Router({

mode: ‘history’,

routes: [

{

path: ‘/’,

component: resolve => require([‘@/components/DefaultIndex’], resolve),

children: [

{

path: ‘’,

component: resolve => require([‘@/components/Index’], resolve)

},

{

最后

我可以将最近整理的前端面试题分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等，还在持续整理更新中，希望大家都能找到心仪的工作。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

篇幅有限，仅展示部分截图：

篇幅有限，仅展示部分截图：