2021年web前端面试

1.vue是什么

Vue.js 是一个轻巧、高性能、可组件化的 MVVM 库，拥有非常容易上手的 API；

Vue.js是一个构建数据驱动的 Web 界面的库(数据驱动视图)。

2.vue优点

1. 轻量级的框架

2. 双向数据绑定

3. 指令

4. 插件化（组件化）

轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb；

简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；

双向数据绑定：保留了angular的特点，在数据操作方面更为简单；

组件化：保留了react的优点，实现了html的封装和重用，在构建单页面应用方面有着独特的优势；

视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；

虚拟DOM：dom操作是非常耗费性能的， 不再使用原生的dom操作节点，极大解放dom操作，但具体操作的还是dom不过是换了另一种方式；

运行速度更快:相比较与react而言，同样是操作虚拟dom，就性能而言，vue存在很大的优势。

3.MVVM的理解

vue是实现了双向数据绑定的mvvm框架，当视图改变更新模型层，当模型层改变更新视图层。在vue中，使用了双向绑定技术，就是View的变化能实时让Model发生变化，而Model的变化也能实时更新到View。

『View』：视图层（UI 用户界面）

『ViewModel』：业务逻辑层（一切 js 可视为业务逻辑）

『Model』：数据层（存储数据及对数据的处理如增删改查）

MVVM 将数据双向绑定（data-binding）作为核心思想，View 和 Model 之间没有联系，它们通过 ViewModel 这个桥梁进行交互。

Model 和 ViewModel 之间的交互是双向的，因此 View 的变化会自动同步到 Model，而 Model 的变化也会立即反映到 View 上显示。

当用户操作 View，ViewModel 感知到变化，然后通知 Model 发生相应改变；反之当 Model 发生改变，ViewModel 也能感知到变化，使 View 作出相应更新。

4.v-show和v-if指令的共同点和不同点？

共同点：都能控制元素的显示和隐藏

how本质就是通过控制css中的display设置为none，控制隐藏，只会编译一次；

v-if是动态的向DOM树内添加或者删除DOM元素，若初始值为false，就不会编译了。而且v-if不停的销毁和创建比较消耗性能。

总结：如果要频繁切换某节点，使用v-show(切换开销比较小，初始开销较大)。如果不需要频繁切换某节点使用v-if（初始渲染开销较小，切换开销比较大）。

5.vue子父组件通信

一、父组件=》子组件传递数据

1、子组件在props中创建一个属性，用以接收父组件传过来的值

2、父组件中注册子组件

3、在子组件标签中添加子组件props中创建的属性

4、把需要传给子组件的值赋给该属性

二、子组件=》父组件传递数据

当子组件需要向父组件传递数据时，就要用到自定义事件。

1、子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件

2、将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法

3、在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

三、非父子组件传递数据

1、新建一个eventBus.js文件，在里面新建一个vue实例，这个实例就承担起了组件之间通信的桥梁了，也就是中央事件总线

2、然后给每个子组件绑定一个方法(触发时候发布eventBus),在每个子组件做一个订阅的监控,触发绑在created里的方法执行

在通信中，组件之间传值，他们都有一个共同点就是有中间介质，

*子向父的介质是自定义事件

*父向子的介质是props中的属性

*非父子组件的介质是中央事件总线

6.<keep-alive></keep-alive>的作用是什么?

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

7.说出几种vue当中的指令和它的用法？

v-model双向数据绑定；

v-for循环；

v-if v-show 显示与隐藏；

v-on事件；v-once: 只绑定一次。

8.$nextTick的使用

当你修改了data的值然后马上获取这个dom元素的值，是不能获取到更新后的值，

你需要使用$nextTick这个回调，让修改后的data值渲染更新到dom元素之后在获取，才能成功。

9.Vue中双向数据绑定是如何实现的？

vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；

核心：关于VUE双向数据绑定，其核心是 Object.defineProperty()方法。

10.vue slot

简单来说，假如父组件需要在子组件内放一些DOM，那么这些DOM是显示、不显示、在哪个地方显示、如何显示，就是slot分发负责的活。

11.请详细说下你对vue生命周期的理解？

总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。

12.vue-router 有哪几种导航钩子?

第一种：是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。

第二种：组件内的钩子

第三种：单独路由独享组件

13.vue-router的两种模式

hash模式：即地址栏 URL 中的 # 符号；

history模式：window.history对象打印出来可以看到里边提供的方法和记录长度

14.vue-router实现路由懒加载

第一种：vue异步组件技术 ==== 异步加载，vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件。

第二种：路由懒加载(使用import)。

第三种：webpack提供的require.ensure()，vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。

15.vuex是什么？怎么使用？哪种功能场景使用它？

vue框架中状态管理。在main.js引入store，注入。

新建了一个目录store.js，….. export 。

场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

16.vuex有哪几种属性？

有五种，分别是 State、 Getter、Mutation 、Action、 Module

state => 基本数据(数据源存放地)

getters => 从基本数据派生出来的数据

mutations => 提交更改数据的方法，同步！

actions => 像一个装饰器，包裹mutations，使之可以异步。

modules => 模块化Vuex

17.如何让CSS只在当前组件中起作用?

在组件中的style前面加上scoped

18.css擦除浮动

方法一：使用带clear属性的空元素

方法二：使用CSS的overflow属性

方法三：给浮动的元素的容器添加浮动

方法四：使用邻接元素处理

方法五：使用CSS的:after伪元素

19.什么是JS事件冒泡

方法一：event.stopPropagation( )

方法二：event.target

ie:阻止冒泡ev.cancelBubble = true;非IE ev.stopPropagation();

20. javascript的typeof返回哪些数据类型.

string,boolean,number,undefined,function,object

21.split() join() 的区别

前者是将字符串切割成数组的形式，后者是将数组转换成字符串

22.数组方法pop() push() unshift() shift()

push()尾部添加 pop()尾部删除unshift()头部添加 shift()头部删除

23.闭包是什么，有什么特性，对页面有什么影响

闭包就是能够读取其他函数内部变量的函数,使得函数不被GC回收，如果过多使用闭包，容易导致内存泄露

24.”==”和“===”的不同

前者会自动转换类型,再判断是否相等

后者不会自动类型转换，直接去比较

25.Javascript的事件流模型都有什么?

“事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播

“事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的

“DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡

 26.javaScript的2种变量范围有什么不同？

全局变量：当前页面内有效

局部变量：函数方法内有效

27.null和undefined的区别？

null是一个表示"无"的对象，转为数值时为0；

undefined是一个表示"无"的原始值，转为数值时为NaN。

28.async 和 await

async 和 await 用了同步的方式去做异步，async 定义的函数的返回值都是 promise，await 后面的函数会先执行一遍，然后就会跳出整个 async 函数来执行后面js栈的代码

29.webpack构建流程

3.1. 初始化参数，从配置文件和shell语句中读到的参数合并，得到最后的参数

3.2. 开始编译：用合并得到的参数初始化complier对象，加载是所有配置的插件，执行run方法开始编译

3.3. 确定入口，通过entry找到入口文件

3.4. 编译模块，从入口文件出发，调用所有配置的loader对模块进行解析翻译，在找到该模块依赖的模块进行处理

3.5. 完成模块编译，得到每个模块被翻译之后的最终的内容和依赖关系

3.6. 输出资源，根据入口和模块之间的依赖关系，组装成一个个包含多个模块的chunk，在把每个chunk转换成一个单独的文件加载到输出列表

3.7. 输出完成，确定输出的路径和文件名，把内容写到文件系统中

30.webpack命令

install：首先添加我们即将使用的包

entry: 用来写入口文件，它将是整个依赖关系的根

output: 即使入口文件有多个，但是只有一个输出配置

loader:1、实现对不同格式的文件的处理，比如说将scss转换为css，或者typescript转化为js

            2、转换这些文件，从而使其能够被添加到依赖图中

loaders：负责的是处理源文件的如css、jsx，一次处理一个文件。而plugins并不是直接操作单个文件，

31.Flex 布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

flex-direction属性决定主轴的方向（即项目的排列方向）。

row（默认值）：主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap属性默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

nowrap（默认）：不换行。

wrap：换行，第一行在上方。

wrap-reverse：换行，第一行在下方。

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

justify-content属性定义了项目在主轴上的对齐方式。

flex-start（默认值）：左对齐

flex-end：右对齐

center： 居中

space-between：两端对齐，项目之间的间隔都相等。

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items属性定义项目在交叉轴上如何对齐。

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

flex-start：与交叉轴的起点对齐。

flex-end：与交叉轴的终点对齐。

center：与交叉轴的中点对齐。

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

stretch（默认值）：轴线占满整个交叉轴。

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

32.js浅拷贝与深拷贝的区别和实现方式

如何区分深拷贝与浅拷贝，简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝。如果B没变，那就是深拷贝。