前端面试题汇总

1、vue中$nextTick()作用

      vue更新数据是异步的

     1.0 中确实是通过 v-el:xxx 标记 dom 然后在组件里通过 this.$els.xxx 就可以获得这个 dom 对象了

     $nextTick(() => {}) 与DOM相关操作写在该函数回调中，确保DOM已渲染

       什么是Vue.nextTick()

     官方文档解释如下：

      在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

      所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的  js 代码，

      什么时候需要用的Vue.nextTick()

  你在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。原因是什么呢，原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载已完成。使用时机：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子函数，此时页面并未全部渲染。

在某个动作有可能改变DOM元素结构的时候，对DOM一系列的js操作都要放进Vue.nextTick()的回调函数中

2、sessionStorage、localStorage和cookie的区别

      1、cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下 
      2、存储大小限制也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大 
     3、数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭之前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭 
     4、作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localstorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的 

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的，cookie的大小是受限的，并且每次请求一个新的页面的时候cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可跨域调用。 
除此之外，web storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。

3、get与post 通讯的区别

      (1、Get 请求能缓存，Post 不能

      (2、Post 相对 Get 安全一点点，因为Get 请求都包含在 URL 里，且会被浏览器保存历史纪录，Post 不会，但是在抓包的情况下都是一样的。

      (3、Post 相对 Get 安全一点点，因为Get 请求都包含在 URL 里，且会被浏览器保存历史纪录，Post 不会，但是在抓包的情况下都是一样的。

      (4、URL有长度限制，会影响 Get 请求，但是这个长度限制是浏览器规定的，不是 RFC 规定的

      (5、Post 支持更多的编码类型且不对数据类型限制

4、模块加载AMD，CMD，CommonJS Modules/2.0 规范

     （1）这些规范的目的都是为了 JavaScript 的模块化开发，特别是在浏览器端的对于依赖的模块，

     （2）AMD 是提前执行，CMD 是延迟执行

     （3）CMD 推崇依赖就近，AMD 推崇依赖前置

5、什么是跨域？跨域请求资源的方法有哪些？

     1、什么是跨域？
      由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。存在跨域的情况：

      网络协议不同，如http协议访问https协议。

      端口不同，如80端口访问8080端口。

      域名不同，如qianduanblog.com访问baidu.com。

      子域名不同，如abc.qianduanblog.com访问def.qianduanblog.com。

      域名和域名对应ip,如www.a.com访问20.205.28.90.

6、对于MVVM的理解

MVVM 是 Model-View-ViewModel 的缩写。
Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。
View 代表UI 组件，它负责将数据模型转化成UI 展现出来。
ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。
在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

7、Vue的生命周期

beforeCreate（创建前） 在数据观测和初始化事件还未开始
created（创建后） 完成数据观测，属性和方法的运算，初始化事件，$el属性还没有显示出来
beforeMount（载入前） 在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
mounted（载入后） 在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。
beforeUpdate（更新前） 在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
updated（更新后） 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
beforeDestroy（销毁前） 在实例销毁之前调用。实例仍然完全可用。
destroyed（销毁后） 在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用

8、什么是vue生命周期？

Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期

9、vue生命周期的作用是什么？

它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

10、vue生命周期总共有几个阶段？

它可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后。

11、第一次页面加载会触发哪几个钩子？

会触发 下面这几个beforeCreate, created, beforeMount, mounted 。

12、DOM 渲染在 哪个周期中就已经完成？

DOM 渲染在 mounted 中就已经完成了。

13、Vue实现数据双向绑定的原理：Object.defineProperty（）

vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

vue的数据双向绑定 将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令（vue中是用来解析 {{}}），最终利用watcher搭起observer和Compile之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化（input）—>数据model变更双向绑定效果。

js实现简单的双向绑定

<body>
    <div id="app">
    <input type="text" id="txt">
    <p id="show"></p>
</div>
</body>
<script type="text/javascript">
    var obj = {}
    Object.defineProperty(obj, 'txt', {
        get: function () {
            return obj
        },
        set: function (newValue) {
            document.getElementById('txt').value = newValue
            document.getElementById('show').innerHTML = newValue
        }
    })
    document.addEventListener('keyup', function (e) {
        obj.txt = e.target.value
    })
</script>

14、Vue组件间的参数传递

1.父组件与子组件传值
父组件传给子组件：子组件通过props方法接受数据;
子组件传给父组件：$emit方法传递参数
2.非父子组件间的数据传递，兄弟组件传值
eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。项目比较小时，用这个比较合适。（虽然也有不少人推荐直接用VUEX，具体来说看需求咯。技术只是手段，目的达到才是王道。） 

15、Vue与Angular以及React的区别？

（版本在不断更新，以下的区别有可能不是很正确。我工作中只用到vue，对angular和react不怎么熟）
1.与AngularJS的区别
相同点：
都支持指令：内置指令和自定义指令；都支持过滤器：内置过滤器和自定义过滤器；都支持双向数据绑定；都不支持低端浏览器。

不同点：
AngularJS的学习成本高，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比较简单、直观；在性能上，AngularJS依赖对数据做脏检查，所以Watcher越多越慢；Vue.js使用基于依赖追踪的观察并且使用异步队列更新，所有的数据都是独立触发的。

2.与React的区别
相同点：
React采用特殊的JSX语法，Vue.js在组件开发中也推崇编写.vue特殊文件格式，对文件内容都有一些约定，两者都需要编译后使用；中心思想相同：一切都是组件，组件实例之间可以嵌套；都提供合理的钩子函数，可以让开发者定制化地去处理需求；都不内置列数AJAX，Route等功能到核心包，而是以插件的方式加载；在组件开发中都支持mixins的特性。
不同点：
React采用的Virtual DOM会对渲染出来的结果做脏检查；Vue.js在模板中提供了指令，过滤器等，可以非常方便，快捷地操作Virtual DOM。

16、css如何只在当前组件起作用

在style标签中写入scoped即可 例如：<style scoped></style>

17、v-if 和 v-show 区别

v-if按照条件是否渲染，v-show是display的block或none；

18、$route和$router的区别

$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。而$router是“路由实例”对象包括了路由的跳转方法，钩子函数等。

19、vue.js的两个核心是什么？

数据驱动、组件系统

20、vue几种常用的指令

v-for 、 v-if 、v-bind、v-on、v-show、v-else

21、vue常用的修饰符？

.prevent: 提交事件不再重载页面；.stop: 阻止单击事件冒泡；.self: 当事件发生在该元素本身而不是子元素的时候会触发；.capture: 事件侦听，事件发生的时候会调用

22、v-on 可以绑定多个方法吗？

可以

23、vue中 key 值的作用？

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key的作用主要是为了高效的更新虚拟DOM。

24、vue等单页面应用及其优缺点

优点：Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。
缺点：不支持低版本的浏览器，最低只支持到IE9；不利于SEO的优化（如果要支持SEO，建议通过服务端来进行渲染组件）；第一次加载首页耗时相对长一些；不可以使用浏览器的导航按钮需要自行实现前进、后退。

25、JavaScript 里有哪些数据类型，解释清楚 null 和 undefined，解释清楚原始数据类型和引用数据类型。比如讲一下 1 和 Number(1)的区别

1. string 、number 、boolean 和 null  undefined 这五种类型统称为原始类型（Primitive），表示不能再细分下去的基本类型

2. symbol是ES6中新增的数据类型，symbol 表示独一无二的值，通过 Symbol 函数调用生成，由于生成的 symbol 值为原始类型，所以 Symbol 函数不能使用 new 调用；

3. null 和 undefined 通常被认为是特殊值，这两种类型的值唯一，就是其本身。

4. 对象类型也叫引用类型，array和function是对象的子类型。对象在逻辑上是属性的无序集合，是存放各种值的容器。对象值存储的是引用地址，所以和基本类型值不可变的特性不同，对象值是可变的。

5. 1和Number(1)
   1===Number(1) //true
6. 1和new Number(1)
   1===new Number(1) //fasle

上面第一个只是把1转换为数字类型，而第二个，是把 1 包装 成了一个对象既------包装对象
所以 1 和 new Number(1)的区别就是原始类型和包装对象的区别
之前我们说过了js有八种数据类型，其中null,undefine,Number,String,Boolean是原始类型
除了null,undefine每个原始数据类型都对应一个包装对象
这也是我们能用原始数据类型调用方法的原理：
（‘abc’).toString()
上述例子，‘abc’是一个字符串，原始类型，它并没有toString()这个方法，所以就去它的包装对象 new String(‘abc’)中调用.
当调用后包装对象就会消失，下次需要就会重新创建。

26、说说你对javascript是弱类型语言的理解?

JavaScript 是弱类型语言，而且JavaScript 声明变量的时候并没有预先确定的类型，变量的类型就是其值的类型，也就是说变量当前的类型由其值所决定,夸张点说上一秒种的String，下一秒可能就是个Number类型了，这个过程可能就进行了某些操作发生了强制类型转换。虽然弱类型的这种不需要预先确定类型的特性给我们带来了便利，同时也会给我们带来困扰。为了能充分利用该特性就必须掌握类型转换的原理，

27、讲一下 prototype 是什么东西，原型链的理解，什么时候用 prototype

 prototype是函数对象上面预设的对象属性
    1. JS中所有的东西都是对象,每个对象都有prototype这个属性，这个属性是一个对象（object）
    2. JS中所有的东西都由Object衍生而来, 即所有东西原型链的终点指向Object.prototype
    3. JS中构造函数和实例(对象)之间有微妙的关系，构造函数通过定义prototype来约定其实例的规格, 再通过 new 来构造出实例, 他们的作用就是生产对象。而构造函数(方法)本身又是方法(Function)的实例, 因此也可以查到它的__proto__(原型链)

使用 prototype的好处是不会额外产生内存，所有实例化后的对象都会从原型上继承这个方法。也就是需要一个子类拥有父类的某些特性（同种特性可以覆盖），又可以添加自己的特性，而不会影响父类时候使用prototype。

28、函数里的this什么含义，什么情况下，怎么用。

情况一：纯粹的函数调用
    这是函数的最通常用法，属于全局性调用，因此this就代表全局对象Global。
    　　function test(){
    　　　　this.x = 1;
    　　　　alert(this.x);
    　　}
    　　test(); // 1
    为了证明this就是全局对象，我对代码做一些改变：
    　　var x = 1;
    　　function test(){
    　　　　alert(this.x);
    　　}
    　　test(); // 1
    运行结果还是1。再变一下：
    　　var x = 1;
    　　function test(){
    　　　　this.x = 0;
    　　}
    　　test();
    　　alert(x); //0

情况二：作为对象方法的调用
    函数还可以作为某个对象的方法调用，这时this就指这个上级对象。
    　　function test(){
    　　　　alert(this.x);
    　　}
    　　var o = {};
    　　o.x = 1;
    　　o.m = test;
    　　o.m(); // 1

  情况三： 作为构造函数调用
    所谓构造函数，就是通过这个函数生成一个新对象（object）。这时，this就指这个新对象。
    　　function test(){
    　　　　this.x = 1;
    　　}
    　　var o = new test();
    　　alert(o.x); // 1
    运行结果为1。为了表明这时this不是全局对象，对代码做一些改变：
    　　var x = 2;
    　　function test(){
    　　　　this.x = 1;
    　　}
    　　var o = new test();
    　　alert(x); //2
    运行结果为2，表明全局变量x的值没变。
情况四： apply调用
    apply()是函数对象的一个方法，它的作用是改变函数的调用对象，它的第一个参数就表示改变后的调用这个函数的对象。因此，this指的就是这第一个参数。
    　　var x = 0;
    　　function test(){
    　　　　alert(this.x);
    　　}
    　　var o={};
    　　o.x = 1;
    　　o.m = test;
    　　o.m.apply(); //0
    apply()的参数为空时，默认调用全局对象。因此，这时的运行结果为0，证明this指的是全局对象。
    如果把最后一行代码修改为
    　　o.m.apply(o); //1
    运行结果就变成了1，证明了这时this代表的是对象o。
29、怎样避免全局变量污染?ES5严格模式的作用，ES6箭头函数和ES5普通函数一样吗,es6的箭头函数和es5的function函数区别

1、减少使用var来定义变量。2、使用闭包

.es6

• es6箭头函数内部没有this,使用时会上朔寻找最近的this
• 不可以做构造函数,不能使用new命令,因为没有this
• 函数体内没有arguments,可以使用rest参数代替
• 不能用yield,不能使用generator函数

下面代码中的箭头函数arrows的this指向window

    let obj = {
        aaa: '123',
        arrows : () => {
            console.log('arrows',this);
        },
        func : function () {
            console.log('func',this);
        }
    }

    obj.arrows();   // window
    obj.func();     // obj

30、数组和对象有哪些原生方法，列举一下，分别是什么含义，比如连接两个数组用哪个方法，删除数组的指定项和重新组装数组(操作数据的重点)。

数组

length设置或返回 数组中元素的数目。
push() :向数组的末尾添加一个或多个元素，并返回新的长度，也就是添加元素后的数组长度。
shift():用于把数组的第一个元素从其中删除，并返回第一个元素的值。
unshift()：向数组的开头添加一个或更多元素，并返回新的长度。
pop():用于删除并返回数组的最后一个元素。
splice()：用于插入、删除或替换数组的元素。
concat():方法用于连接两个或多个数组。
join():用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。
toString():方法可把数组转换为字符串，并返回结果。
reverse():方法用于颠倒数组中元素的顺序。
slice():方法可从已有的数组中返回选定的元素。
sort():方法用于对数组的元素进行排序（从小到大）。

indexOf():返回获取项在数组中的索引
lastIndexOf():返回获取项在数组中出现的最后一次索引
forEach():循环遍历数组 参数是一个匿名函数 默认返回为undefined
map()：循环遍历数组 参数是一个匿名函数

对象

charAt(): 返回在指定位置的字符。
charCodeAt(): 返回在指定的位置的字符的 Unicode 编码。
concat():连接字符串。
indexOf():检索字符串。
match(): 找到一个或多个正则表达式的匹配。
replace():替换与正则表达式匹配的子串。
search(): 检索与正则表达式相匹配的值。
slice(): 提取字符串的片断，并在新的字符串中返回被提取的部分。
split(): 把字符串分割为字符串数组。
toLocaleLowerCase(): 把字符串转换为小写。
toLocaleUpperCase(): 把字符串转换为大写。
toLowerCase(): 把字符串转换为小写。
toUpperCase(): 把字符串转换为大写。
substr(): 从起始索引号提取字符串中指定数目的字符。
substring(): 提取字符串中两个指定的索引号之间的字符。