前端基本面试题重点掌握** vue 20220110

1.forEach和map的区别到底有什么区别呢？

2.前端常用解析模板引擎

artTemplate 模板 underscore 模板 Handlebars 模板

3.singlepage是什么？

4.vue生态?

5.vue的特性？

6.v-html和v-text的区别？

7. 减少DOM 操作的优势？

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

9.v-for 循环数据的时候，为什莫绑定key 值？

10.隐式转换？

11.watch、computed和methods之间的对比

12.Object.defineProperty 和 Proxy 的区别是什么？

13 第一次加载页面会触发哪几个钩子函数？（必会）

14、Vue 常用的指令都有哪些？并且说明其作用（必会）

15指令 v-el 的作用是什么?（必会）

16、为什么避免 v-if 和 v-for 用在一起（必会）

17、怎么在 watch 监听开始之后立即被调用？（必会）

18、栈和队列的区别？（了解）

19 、栈和堆的区别？（了解）

20、什么是进程、什么是线程、它们之间是什么关系（了

解）

202201102126

`1.forEach和map的区别`到底有什么区别呢？

forEach()方法不会返回执行结果，而是undefined。

也就是说，forEach()会修改原来的数组。而map()方法会得到一个新的数组并返回。

2.前端常用解析模板引擎

artTemplate 模板 underscore 模板 Handlebars 模板

3.singlepage是什么？

单页面应用

单页面应用的优缺点：
优点：
1、用户操作体验好，用户不用刷新页面，整个交互过程都是通过Ajax来操作。
2、适合前后端分离开发，服务端提供http接口，前端请求http接口获取数据，使用JS进行客户端渲染。

缺点：
1、首页加载慢
单页面应用会将js、 css打包成一个文件，在加载页面显示的时候加载打包文件，如果打包文件较大或者网速慢则用户体验不好
2、SEO不友好
SEO（Search Engine Optimization）为搜索引擎优化。它是一种利用搜索引擎的搜索规则来提高网站在搜索引擎排名的方法。目前各家搜索引擎对JS支持不好，所以使用单页面应用将大大减少搜索引擎对网站的收录。

4.vue生态?

vue：用于构建用户界面的前端开发框架
vue-cli：vue的项目构建、开发工具
vue loader：一个webpack的loader，将vue组件的开发形式转为单文件
vue router：vue的路由管理器插件
vuex：vue的状态管理插件

5.vue的特性？

mvvm 模式，双向数据绑定，组件化，不操作DOM；

6.v-html和v-text的区别？

v-html: 把标签当作标签进行解析不仅用于渲染数据,还能够输出真正的html,即能够解析html代码

v-text: 把html当作字符串来进行解析，用于渲染普通文本,绑定的数据对象发生变化时,插值处的内容也会发生改变,注意它不解析标签

7. 减少DOM 操作的优势？

不操作DOm ,DOM 增删改查，会造成重绘与回流，会消耗大量的浏览器性能；

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

v-if 是从DOM 节点层面，对DOM 节点进行添加或者移除，重回与回流；

v-show 是从css样式层面去对节点隐藏，隐藏后还占位置，性能消耗低；

使用场景：如果要频繁切换显示或者隐藏，用v-show

9.v-for 循环数据的时候，为什莫绑定key 值？

key值的要求：

必须是唯一值，diff算法; 虚拟DOM;

简版：给每个节点设置唯一值，方便diff算法进行查找

有利于提高浏览器的性能；

10.隐式转换？

隐式类型转换，也称自动类型转换，是指不需要书写代码，由系统自动完成的类型转换；

true 1 false 0

11.`watch`、`computed`和`methods`之间的对比

computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；

methods方法表示一个具体的操作，主要书写业务逻辑；

watch一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体；

12.Object.defineProperty 和 Proxy 的区别是什么？

<1. Proxy 可以直接监听对象而非属性；

<2、Proxy 可以直接监听数组的变化；

<3、Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等

是 Object.defineProperty 不具备的

<4、Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而

Object.defineProperty 只能遍历对象属性直接修改

<5、Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准

的性能红利

<6、Object.defineProperty 兼容性好，支持 IE9，而 Proxy 的存在浏览器兼容性问题,

而且无法用 polyfill 磨平，因此 Vue 的作者才声明需要等到下个大版本( 3.0 )才能用 Proxy 重

写

13 第一次加载页面会触发哪几个钩子函数？（必会）

当页面第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩

子函数

14、Vue 常用的指令都有哪些？并且说明其作用（必会）

（1、 v-model 多用于表单元素实现双向数据绑定（同 angular 中的 ng-model）

（2、v-for 格式：

v-for="字段名 in(of) 数组 json" 循环数组或 json(同 angular 中的 ng

repeat),需要注意从 vue2 开始取消了$index

（3、 v-show 显示内容（同 angular 中的 ng-show）

（4、v-hide 隐藏内容（同 angular 中的 ng-hide）

（5、v-if 显示与隐藏（dom 元素的删除添加同 angular 中的 ng-if 默认值为 false）v

else-if 必须和 v-if 连用 v-else 必须和 v-if 连用不能单独使用否则报错模板编译错误

（6、v-bind 动态绑定

作用：及时对页面的数据进行更改

（7、 v-on:click 给标签绑定函数，可以缩写为@，例如绑定一个点击函数函数必须写在

methods 里面

（8、 v-text 解析文本

（9、v-html 解析 html 标签

（10、v-bind:class 三种绑定方法

<1>、对象型 '{red:isred}'

<2>、三元型 'isred?"red":"blue"'

<3>、数组型 '[{red:"isred"},{blue:"isblue"}]'

（11、v-once 进入页面时只渲染一次不在进行渲染

（12、v-cloak 防止闪烁

（13、v-pre 把标签内部的元素原位输出

15指令 v-el 的作用是什么?（必会）

提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标.可以是 CSS 选择器，

也可以是一个 HTMLElement 实例

16、为什么避免 v-if 和 v-for 用在一起（必会）

当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级，通过 v-if 移动到容器元素，不会

再重复遍历列表中的每个值。取而代之的是，我们只检查它一次，且不会在 v-if 为否的时候运

算 v-for

17、怎么在 watch 监听开始之后立即被调用？（必会）

在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调

18、栈和队列的区别？（了解）

1、栈的插入和删除操作都是在一端进行的，而队列的操作却是在两端进行的

2、队列先进先出，栈先进后出

3、栈只允许在表尾一端进行插入和删除，而队列只允许在表尾一端进行插入，在表头一

端进行删除#

19 、栈和堆的区别？（了解）

1、栈区（stack）— 由编译器自动分配释放 ，存放函数的参数值，局部变量的值等。

堆区（heap） — 一般由程序员分配释放，若程序员不释放，程序结束时可能由 OS 回收

2、堆（数据结构）：堆可以被看成是一棵树，如：堆排序；

栈（数据结构）：一种先进

后出的数据结构

20、什么是进程、什么是线程、它们之间是什么关系（了

解）

1、进程：

1.1）程序执行时的一个实例

1.2）每个进程都有独立的内存地址空间

1.3）系统进行资源分配和调度的基本单位

1.4）进程里的堆，是一个进程中最大的一块内存，被进程中的所有线程共享的，进

程

创建时分配，主要存放 new 创建的对象实例

1.5）进程里的方法区，是用来存放进程中的代码片段的，是线程共享的

1.6）在多线程 OS 中，进程不是一个可执行的实体，即一个进程至少创建一个线程

去执行代码

2、线程：

2.1）进程中的一个实体

2.2）进程的一个执行路径

2.3）CPU 调度和分派的基本单位

2.4）线程本身是不会独立存在

2.5）当前线程 CPU 时间片用完后，会让出 CPU 等下次轮到自己时候在执行

2.6）系统不会为线程分配内存，线程组之间只能共享所属进程的资源

2.7）线程只拥有在运行中必不可少的资源(如程序计数器、栈)

2.8）线程里的程序计数器就是为了记录该线程让出 CPU 时候的执行地址，待再次

分配

到时间片时候就可以从自己私有的计数器指定地址继续执行

2.9）每个线程有自己的栈资源，用于存储该线程的局部变量和调用栈帧，其它线程

无权访问

3、关系：

3.1）一个程序至少一个进程，一个进程至少一个线程，进程中的多个线程是共享进

程的资源

3.2）Java 中当我们启动 main 函数时候就启动了一个 JVM 的进程，而 main 函数

所

在线程就是这个进程中的一个线程，也叫做主线程

3.3）一个进程中有多个线程，多个线程共享进程的堆和方法区资源，但是每个线程

有自己的程序计数器，栈区域