前端面经1

<!--keep-alive 表示页面不会被销毁，即保持页面状态-->

    <keep-alive>

      <router-view v-if="$route.meta.keepalive"></router-view>

    </keep-alive>

<router-view v-if="!$route.meta.keepalive"></router-view>

13. Vue中axios请求时同步还是异步请求；如果需要同步怎么实现

异步

axios本身是没有同步请求的，要实现同步请求，用到的是ES7的async和await

ES7的异步特性async / await

async用于声明一个函数是异步的，await用于声明在一个异步函数中等待语句执行完毕。也就是说await只能在async函数中使用。

14. Es6的普通函数和箭头函数区别

关于箭头函数的参数：

① 如果箭头函数没有参数，直接写一个空括号即可。

② 如果箭头函数的参数只有一个，也可以省去包裹参数的括号。

③ 如果箭头函数有多个参数，将参数依次用逗号(,)分隔，包裹在括号中即可。

1、语法更加简洁、清晰

从上面的基本语法示例中可以看出，箭头函数的定义要比普通函数定义简洁、清晰得多，很快捷。

2、this的区别。

箭头函数不会创建自己的this，所以它没有自己的this，它只会从自己的作用域链的上一层继承this。

3、箭头函数不能作为构造函数使用

我们先了解一下构造函数的new都做了些什么？简单来说，分为四步：

① JS内部首先会先生成一个对象；

② 再把函数中的this指向该对象；

③ 然后执行构造函数中的语句；

④ 最终返回该对象实例。

4、箭头函数没有自己的arguments

箭头函数没有自己的arguments对象。在箭头函数中访问arguments实际上获得的是外层局部（函数）执行环境中的值。

5、箭头函数没有原型prototype

15. 模块化和组件化怎么理解

组件化:

1: 就是"基础库"或者"基础组件", 意思就是把重复的代码部分提炼出一个个组件供给功能使用

2: 功能相对单一或者独立, 在整个系统的代码层次上位于最底层，被其他代码所依赖，所以说组件化是纵向分层。

3: 使用场景: 是对一些重复代码进行封装在需要的时候调用即可(例如: 按钮, 输入框, 搜索框)

模块化:

1: 就是"业务框架"或者"业务模块", 将不同的业务进行划分, 同一类型的整合在一起, 所以功能会相对复杂, 但是都属于同一个业务

2: 按照项目功能需求划分成不同类型的业务框架（例如：注册、登录、外卖、直播.....）

区别:

组件：就像一个个小的单位，多个组件可以组合成组件库，方便调用和复用，组件间也可以嵌套，小组件组合成大组件。

模块：就像是独立的功能和项目（如淘宝：注册、登录、购物、直播…），可以调用组件来组成模块，多个模块可以组合成业务框架。

使用组件化和模块化的好处 :

开发和调试效率高：随着功能越来越多，代码结构会越发复杂，要修改某一个小功能，可能要重新翻阅整个项目的代码，把所有相同的地方都修改一遍，重复劳动浪费时间和人力，效率低；使用组件化，每个相同的功能结构都调用同一个组件，只需要修改这个组件，即可全局修改。

可维护性强：便于后期代码查找和维护。

避免阻断：模块化是可以独立运行的，如果一个模块产生了bug，不会影响其他模块的调用。

版本管理更容易：如果由多人协作开发，可以避免代码覆盖和冲突。

16. SessionStorage、 localStorage区别

17. Vue中axios 和ajax有什么区别

axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。

简单来说： ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。

axios是ajax，ajax不止axios。

axios和ajax优缺点：

ajax：

本身是针对MVC的编程,不符合现在前端MVVM的浪潮
基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案
JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理(采取个性化打包的方案又不能享受CDN服务

axios：

从 node.js 创建 http 请求
支持 Promise API
客户端支持防止CSRF

18. Promise原理，简单介绍下底层怎么实现的

（1）Promise的作用：Promise是异步微任务，解决了异步多层嵌套回调的问题，让代码的可读性更高，更容易维护Promise；

promise 本身相当于一个状态机，拥有三种状态

pending
fulfilled
rejected

一个 promise 对象初始化时的状态是 pending，调用了 resolve 后会将 promise 的状态扭转为 fulfilled，调用 reject 后会将 promise 的状态扭转为 rejected，这两种扭转一旦发生便不能再扭转该 promise 到其他状态。

（2）promise 对象原型上有一个 then 方法，then 方法会返回一个新的 promise 对象，并且将回调函数 return 的结果作为该 promise resolve 的结果，then 方法会在一个 promise 状态被扭转为 fulfilled 或 rejected 时被调用。then 方法的参数为两个函数，分别为 promise 对象的状态被扭转为 fulfilled 和 rejected 对应的回调函数

19. 自己封装一个弹窗组件，怎么实现？

20. 原型链

主要解决了继承的问题。

每个对象都拥有一个原型对象，通过__proto__ 对象原型指针指向其原型对象，并从中继承方法和属性，同时原型对象也可能拥有原型，这样一层一层，最终指向 null。

JS的成员查找机制

当访问一个对象的属性(包括方法)时，首先查找这个对象自身有没有该属性
如果没有就查找它的原型(也就是_proto__指向的prototype原型对象)。
如果还没有就查找原型对象的原型(Object的原型对象)
依次类推一直找到Object为止(null)
_proto__对象原型的意思就在于为对象成员查找机制提供一个方向。

构造函数、实例、原型对象三者之间的关系

每一个构造函数里面都会有一个原型对象，通过构造函数的 prototype 指向原型对象
prototype原型对象里面又有 constructor 指回构造函数，
通过构造函数可以创建一个实例对象，使用new可以产生一个实例对象，构造函数可以指向实例对象
在实例对象中有_proto__对象原型，指向原型对象prototype。

实例对象中的constructor通过原型对象prototype的constructor指向构造函数。

21. webpack打包用过哪些loader？

webpack是一个静态的模块化打包工具，为现代的JavaScript应用程序；

loader 可以用于对模块的源代码进行转换；

常用的loader：

babel-loader
css-loader
style-loader
stylus-loader
less-loader
postcss-loader
file-loader
url-loader

22. arguments是什么数据类型

js函数中有个内置对象arguments，argument 对象包含了函数调用的参数数组。

arguments是对象吗？是对象。

arguments是数组吗？不是数组，但是arguments有长度个数。由此我们可以知道arguments是个类数组(也叫伪数组)

当函数参数个数无法确定的时候，用arguments。arguments可以直接获得函数的参数，通过arguments，你可以很简单的对函数的参数进行比较。例如求最大值。

爱学习的小欣欣

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端面经1

双向绑定包括两个方面：1.视图变化更新数据；2.数据变化更新视图。对于视图变化更新数据，可以使用事件监听，比如input标签监听‘input’事件就可以实现。（1）在Vue2中是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter；在数据变动时发布消息给订阅者，触发相应的监听回调。设置一个set函数，当数据发生改变就会触发这个函数，所以我们只需要将一些需要更新的方法放在这个set函数里面就可以实现数据变化更新视图了。（2）在v
复制链接

扫一扫