（面试篇）框架部分（Vue）

一、几个面试题

1.v-show和v-if的区别？

答：

 

2.为何v-for中要用key？

答：

 

3.描述Vue组件生命周期（有父子组件的情况）

答：

 

4.Vue组件如何通讯

答：

 

5.描述组件渲染和更新的过程

答：

 

6.双向数据绑定v-model的实现原理

答：

 

React

7.React组件如何通讯

答：

 

8.JSX本质是什么？

答：

 

9.context是什么，有何用途？

答：

 

10.shouldComponentUpdate的用途（SCU简写）

答：

 

11.描述redux单项数据流

答：

 

12.setState是同步还是异步？（场景图，见下图）

答：

 

框架综合应用

13.基于React设计一个todolist（组件结构，redux state数据结构）

答：

 

14.基于Vue设计一个购物车（组件结构，vuex state数据结构）

答：

 

webpack部分

15.前端代码为何要进行构建和打包？

答：

 

16.module chunk bundle分别什么意思，有何区别？

答：

 

17.loader和plugin的区别？

答：

 

18.webpack如何实现懒加载？

答：

 

19.webpack常见性能优化

答：

 

20.label-runtime和babel-polyfill的区别？

答：

 

二、基本使用

1.指令、插值

·插值、表达式

·指令、动态属性

·v-html：会有XSS风险，会覆盖子组件

 

2.computed和watch

computed有缓存，data不变则不会重新计算

watch如何深度监听

watch监听引用类型，拿不到oldVal

 

3.class和style

使用动态属性

使用驼峰式写法

 

4.条件渲染

v-if v-else的用法，可使用变量，也可以使用===表达式

v-if和v-show的区别？

v-if和v-show的使用场景？

 

5.循环（列表）渲染

如何遍历对象？----也可以用v-for

key的重要性。key不能乱写（如random或者index）

 

6.事件

event参数，自定义参数

事件修饰符，按键修饰符

【观察】事件被绑定到哪里

PS： 绑定事件不传参获取的event参数时原生的event对象，事件被挂载到当前元素

事件修饰符：

按键修饰符

 

7.表单

v-model

常见表单项textarea checkbox radio select

修饰符 lazy number trim

 

8.vue组件使用

props和$emit

组件间通讯-自定义事件（兄弟组件的通讯）

PS：课程3-5

 

组件生命周期：挂载阶段、更新阶段、销毁阶段

声明周期图查看

 

总结：

1.props和$emit

2.组件间通讯-自定义事件

3.组件生命周期

 

三、Vue高级特性

1.自定义v-model

2.$nextTick

Vue是异步渲染

data改变后，DOM不会立刻渲染

$nextTick会在DOM渲染之后被触发，以获取最新DOM节点

 

3.slot

基本使用

作用域插槽

具名插槽

（需要补充）

 

4.动态、异步组件

:is = "component-name"用法

需要根据数据，动态渲染的场景。即组件类型不确定

 

异步组件：

import()函数

按需加载，异步加载大组件

说明：组件判断展示的时候才加载进来。

 

5.keep-alive

缓存组件

频繁切换，不需要重复渲染

Vue常见性能优化

 

6.mixin

多个组件有相同的逻辑，抽离出来

mixin并不是完美的解决方案，会有一些问题

Vue3提出的Composition API旨在解决这些问题

mixin的问题？

1.变量来源不明确，不利于阅读

2.多mixin可能造成冲突

3.mixin和组件可能出现多对多的关系，复杂度较高

 

总结：相关的面试技巧

1.可以不太深入，但必须知道

2.熟悉基本用法，了解使用场景

3.最好能和自己的项目经验结合起来

 

四、Vuex使用

 

 

五、Vue-router

1.路由模式（hash、H5 history）

hash模式（默认）如：http://abc.com/#/user/10

H5 history模式，如：http://abc.com/user/20

后者需要server端支持，因此无特殊需求可选择前者

 

2.路由配置（动态路由、懒加载）

 

总结：Vuex Vue-router

面试考点并不多（前提是熟悉Vue）

掌握基本概念，基本使用

面试官时间有限，需考察最核心、最常用的问题，而非边角问题。

 

六、MVVM

如何理解？

 

七、Vue响应式（考察Vue原理的第一题）

概念：组件data的数据一旦变化，立刻触发视图的更新，实现数据驱动视图的第一步

核心API-Object.defineProperty

Vue3.0启用Proxy（Proxy兼容性不好，且无法polyfill）

 

Object.defineProperty基本用法

如何监听对象，监听数组

如何面对复杂对象，深度监听

代码4-4。

几个缺点？

1).深度监听，一次递归到底，计算量大

2).无法监听新增属性/删除属性(Vue.set Vue.delete)