面试汇总

面试需要准备得东西

w3c标准：结构、表现、行为

结构标准分为html和xml，表现就css，行为就是dom和ecmascript

前后端分离

为什么要前后端分离，这样开发会更快，前端只考虑前端该做的事情，后端只考虑后端的逻辑，不需要考虑什么美学什么的，前端只要好好写好页面，行为方式，调接口。这样开发会更快，技术和业务更专注， 开发效率就提高了。

get方法用?传参在url后面，post方法 传递多个参数用&连接

jq就是一个封装好的库

jq是以数组的形式存储着每一个dom对象，为什么要将jq对象转为dom对象，因为jq并没有把所有的js的方法封装，有些方法jq不支持，所以就得转dom对象，在jq里边隐式迭代的意思就是遍历内部的dom元素（以伪数组方式存储）的过程就叫做隐式迭代

jq里面的事件委托思想：当给每个li注册点击事件的时候，就可以给ul注册一个点击事件，解绑的话是off

vue是一个封装好的框架

vuex是基于vue框架的的状态管理库，简单来说就是一个容器，用来装一些多层嵌套组件的传值，是以对象的方式表示

axios就是请求数据的默认是get请求，参数默认传到baseurl前面,headers是即将被发送的自定义请求头

子 =组件使用$emit发送，父组件使用$接收

为什么组件中的data必须是个函数，然后return一个函数，而new vue实例中，data可以直接是一个对象？

因为组件是用来复用的，js里对象是引用关系，这样作用域就不会被隔离，而new vue的实例，不存在复用，所以不存在对象的引用问题。

自定义组件的语法糖v-model是怎么实现的？

其实v-model本质上就是一个语法糖，利用v-model实现数据绑定以后，其实就是绑定了一个数据，然后又添加了一个input事件监听事件

<input v-model="cc">等价于
<input v-bind:value="cc" v-on:input="cc">

当用在组件上时v-model时是这样子的

<custom-input v-bind:value='cc' v-on:input='cc'></custom-input>

vue中scoped标签

在vue组件中，在style标签上添加scoped属性，以表示它的样式作用于当下的组件，使得该css样式不影响到其他组件或本组件的子组件，也保护的本组件的样式不受其他组件影响。很好的实现了样式私有化的目的，这是一个非常好的机制

原理

所谓的局部css，就是通过vue-loader这个插件，在编译打包的时候将带有scoped属性的css打上一个tag，同时将template内的所有html都打上一个相同的tag，最后通过css的属性选择器定位，造就了所谓的局部css。

使用

但是，在开发时我们有时需要对公共组价的样式进行修改，而如果公共组件添加了scoped属性，就会导致它的样式不易（不可）修改，这在项目开发中会造成一定影响，所以正确的做法应该是：

1.给公共组件写样式时，不添加scoped，这样别的组件在引用它时才可以对它的样式进行调整。

2.给非公共的组件添加 scoped，这样它自己内部的样式、它对公共组件样式的修改，都仅仅是在本组件有效，而不会影响其他组件对公共组件的使用。

实践

在项目中，使用的是 vue + Element UI 的开发模式，而在使用 Element UI 框架时，常常需要对其原本的样式进行调整，如果我们在使用时直接在组件的 style 对其进行修改而没有加上 scoped，就会导致这个UI组件的样式被全局修改了，往后的使用自然是会受到影响的。或者是我先前使用改过这个 UI 组件，那么它有可能会对先前的样式进行覆盖，并且很难排查。所以，我们应该在每一个组件的 style 加上 scoped

拓展

使用scope同时也会导致一个问题，在使用第三方UI框架如element-ui时，由于使用了scope导致本css无法对子组件的样式进行修改。此时解决方案有两个

不使用scope，这样可以对子组件样式进行修改，但因为这个修改是全局的，所以会同时修改到其他使用了相同UI组件的其他组件的样式。

使用>>>(css)或/deep/(less和sass)，这两个属性可以对样式进行深度选择

<style scope>
.a >>> .b {
  color:red;
}
style>

将会被编译成

.a[data-v-f3fada] .b {color: red}

这样实现了子组件样式的修改，同时也不会影响全局样式。。

css选择器的优先级

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

vue中八个生命周期除此之外还有其他的么

你要创建哪个生命周期，生命周期就是从开始到结束，看你想在哪个阶段创建生命周期，如果想在开始前创建一个的话，那我就只能在后台写一个脚本。或者js做个脚本

vue和react得区别

1、设计的思想不同

2、对数据变换的感知不同

3、 react整体是函数式的思想，把组件设计成纯组件，状态和逻辑通过参数传入，所以在react中，是单向数据流，推崇结合

4、 vue的思想是响应式的，也就是基于是数据可变的，通过对每一个属性建立Watcher来监听，当属性变化的时候，响应式的更新对应的虚拟dom

因为vue是把html，css，js组合到一起，用各自的处理方式，vue有单文件组件，可以把html、css、js写到一个文件中，html提供了模板引擎来处理。即以前学的初级html的知识都可以用，在页面搭建时没有很强的逻辑性，vue都帮忙写好了 ， 而对于react，如果学过强语言，应该会更加习惯使用，react的思路是all in js，通过js来生成html，所以设计了jsx，还有通过js来操作css，社区的styled-component、jss等。

如果想要你的应用小和快的话，建议使用vue，如果构建大型的应用程序的话，建议使用react，vue.js的作者尤雨溪曾经说过，vue构建小的很快

for in 和 for of的区别

for in 一般用于遍历对象的可枚举属性。以及对象从构造函数原型中继承的属性。对于每个不同的属性，语句都会被执行。
不建议使用for in 遍历数组，因为输出的顺序是不固定的。如果迭代的对象的变量值是null或者undefined, for in不执行循环体，建议在使用for in循环之前，先检查该对象的值是不是null或者undefined，for…of 语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句

Bootstrap 栅格原理

网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。

浏览器的兼容问题

尽量和并和压缩css和js文件。（将css文件和并为一个。将js合并为一个）
　　原因：主要是为了减少http请求次数以及减少请求资源的大小
　　打包工具：
　　webpack
　　gulp
　　grunt
.　　…
2、尽量所使用的字体图标或者SVG图标来代替传统png图
　　因为字体图标或者SVG是矢量图，代码编写出来的，放大不会变形，而且渲染速度快

3、采用图片的懒加载（延迟加载）
　　目的为了，减少页面第一次加载过程中http的请求次数
　　具体步骤：
　　　　1、页面开始加载时不去发送http请求，而是放置一张占位图
　　　　2、当页面加载完时，并且图片在可视区域再去请求加载图片信息

4、能用css做的效果，不要用js做，能用原生js做的，不要轻易去使用第三方插件。
　　避免引入第三方大量的库。而自己却只是用里面的一个小功能，要按需加载

5、使用雪碧图或者是说图片精灵
　　把所有相对较小的资源图片，绘制在一张大图上，只需要将大图下载下来，然后利用
　　图片定位来讲小图展现在页面中（background-position:百分比，数值）

6、减少对cookie的使用（最主要的就是减少本地cookie存储内容的大小），因为客户端操作cookie的时候，这些信息总是在客户端和服务端传递。如果上设置不当，每次发送

一个请求将会携带cookie

7、前端与后端进行数据交互时，对于多项数据尽可能基于json格式来进行传送。相对于使用xml
　　来说传输有这个优势
　　目的：是数据处理方便，资源偏小

8、前端与后端协商，合理使用keep-alive

9、前端与服务器协商，使用响应资源的压缩

10、避免使用iframe
　　不仅不好管控样式，而且相当于在本页面又嵌套其他页面，消耗性能会更大。因为还回去加载这个嵌套页面的资源

11、在基于ajax的get请求进行数据交互的时候，根据需求可以让其产生缓存（注意:这个
缓存不是我们常看到的304状态码，去浏览器本地取数据），这样在下一次从相同地址获取是数据
时，取得就是上一次缓存的数据。（注意：很少使用，一般都会清空。根据需求来做）

代码优化相关

1、在js中尽量减少闭包的使用
　　原因：使用闭包后，闭包所在的上下文不会被释放

2、减少对DOM操作，主要是减少DOM的重绘与回流（重排）
　　关于重排（回流）的分离读写：如果需要设置多个样式，把设置样式全放在一起设置，不要一条一条的设置。使用文档碎片或者字符串拼接做数据绑定（DOM的动态创建）

3、在js中避免嵌套循环和"死循环"(一旦遇到死循环，浏览器就会直接卡掉)

4、把css放在body上，把js放在body下面
　　让其先加载css（注意：这里关于优化没有多大关系）

5、减少css表达式的使用

6、css选择器解析规则所示从右往左解析的。减少元素标签作为对后一个选择对象

7、尽量将一个动画元素单独设置为一个图层（避免重绘或者回流的大小）
　　注意：图层不要过多设置，否则不但效果没有达到反而更差了

8、在js封装过程中，尽量做到低耦合高内聚。减少页面的冗余代码

9、css中设置定位后，最好使用z-index改变盒子的层级，让盒子不在相同的平面上

10、css导入的时候尽量减少@import导入式，因为@import是同步操作，只有把对应的样式导入后，才会继续向下加兹安，而link是异步的操作

11、使用window.requestAnimationFrame(js的帧动画)代替传统的定时器动画
　　如果想使用每隔一段时间执行动画，应该避免使用setInterval，尽量使用setTimeout
　　代替setInterval定时器。因为setInterval定时器存在弊端：可能造成两个动画间隔时间
　　缩短

12、尽量减少使用递归。避免死递归
　　解决：建议使用尾递归

13、基于script标签下载js文件时，可以使用defer或者async来异步加载

14、在事件绑定中，尽可能使用事件委托，减少循环给DOM元素绑定事件处理函数。

15、在js封装过程中，尽量做到低耦合高内聚。减少页面的冗余代码

16、减少Flash的使用

三、存储

1、结合后端，利用浏览器的缓存技术，做一些缓存（让后端返回304，告诉浏览器去本地拉取数据）。（注意：也有弊端）可以让一些不太会改变的静态资源做缓存。比如：一些图片，js，cs

2、利用h5的新特性（localStorage、sessionStorage）做一些简单数据的存储，
　　避免向后台请求数据或者说在离线状态下做一些数据展示。

四、其他优化

避免使用iframe不仅不好管控样式，而且相当于在本页面又嵌套其他页面，消耗性能会更大。因为还回去加载这个嵌套页面的资源页面中的是数据获取采用异步编程和延迟分批加载，使用异步加载是数据主要是为了避免浏览器失去响应。如果你使用同步，加载数据很大并且很慢那么，页面会在一段时间内处于阻塞状态。目的：为了解决请求数据不耽搁渲染，提高页面的渲染效率。解决方法：需要动态绑定的是数据区域先隐藏，等数据返回并且绑定后在让其显示延迟分批加载类似图片懒加载。减少第一次页面加载时候的http请求次数

3、页面中出现音视频标签，我们不让页面加载的时候去加载这些资源（否则第一次加载会很慢）
　　解决方法：只需要将音视频的preload=none即可。
　　目的：为了等待页面加载完成时，并且音视频要播放的时候去加兹安音视频资源

4、尽量将一个动画元素单独设置为一个图层（避免重绘或者回流的大小）
　　注意：图层不要过多设置，否则不但效果没有达到反而更差了

代码维护

尽量在写代码得时候，写上标签，这样有可读性，不在css代码中包含js，

浏览器存储

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eCs6hY3m-1586494094576)(C:\Users\X250\AppData\Roaming\Typora\typora-user-images\1584372982264.png)]

webStorage是本地存储，数据不是由服务器请求传递的。从而它可以存储大量的数据，而不影响网站的性能。

Web Storage的目的是为了克服由cookie带来的一些限制，当数据需要被严格控制在客户端上时，无须持续地将数据发回服务器。比如客户端需要保存的一些用户行为或数据，或从接口获取的一些短期内不会更新的数据，我们就可以利用Web Storage来存储。

注意：删除cookie时，必须传递用于设置cookie的完全相同的路径，域和安全选项，除非您依赖于默认选项。

即：设置cookie时如果设置了path属性或secure属性，删除的时候要带着这些属性，否则无法成功删除cookie。

vue父传子

• 子组件在props中创建一个属性，用以接收父组件传过来的值
• 父组件中注册子组件
• 在子组件标签中添加子组件props中创建的属性
• 把需要传给子组件的值赋给该属性

子组件传值就是通过this.$emit()的方式将值传递给父组件

mvvm

MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象（桥梁）。

在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理

原型链

原型链的核心其实就只有一个：属性共享和独立的控制，当你的对象实例需要独立的属性，所有做法的本质都是在对象实例里面创建属性。若不考虑太多，你大可以在Person里面直接定义你所需要独立的属性来覆盖掉原型的属性。总之，使用原型继承的时候，要对于原型中的属性要特别注意，因为他们都是牵一发而动全身的存在。现在最常用的方法是组合模式。

有什么要问面试官得

1. 公司项目中运用到的技术；
2. 如果自己有幸被贵公司选中，需要掌握什么技术，需要掌握到什么程度，大概需要在什么时间范围内；
3. 公司业务流程和团队建设等等；

架构

感觉前端的小项目完全没有架构可言啊，用官方的脚手架直接撸就是了。
不过硬扯的话，那还是有几点可以将的：
1.css：公共css的配置，每个组件自身的css其实是很少的，大多数可以重用的css都可以抽出来，比如说bootstrap里面的utils；
2.权限控制：后台管理类的网站都会有这样的功能
3.ajax请求的全局配置：axios之类的库都可以进行全局的请求配置和错误处理
4.功能组件和公共模块的设计和抽离
5.响应式布局的处理：如果pc兼容移动的，也可以讲讲页面布局上的处理
6.缓存和更新
7.数据流的设计
8.seo处理/单元测试等等
如果是自己配的打包工具，那还可以讲讲打包上的设计
总之面试就是往你会的上面扯，即使偏题了也比答不出来的好，有经验的面试官会从你接触过的东西里面挖深的考你

跨域

怎么出现得跨域，同源不同域，不同端口啊什么的

怎么解决呢：通过jsonp解决

通常为了减轻web服务器的负载，我们把js、css，img等静态资源分离到另一台独立域名的服务器上，在html页面中再通过相应的标签从不同域名下加载静态资源，而被浏览器允许，基于此原理，我们可以通过动态创建script，再请求一个带参网址实现跨域通信。

后端可以直接设置，用原生ajax，或者jq都可以

less得好处

less是动态的样式表语言，通过简单，明了的语法定义，使编写css 的工作变得非常简单，在实际项目开发中，大大提高了前端工程师的工作效率
css需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，造成这些困难的很大原因源于css是一门非程序性语言，没有变量，函数，scope等概念
less在css基础上引入了变量，混入，运算以及函数等功能，大大简化了css的编写，并且降低了css的维护成本，less可以让我们用更少的代码做更多的事。
原文链接：https://blog.csdn.net/heart_is_sunny/article/details/98102349

new操作符

(1) 创建一个新对象；

(2) 将构造函数的作用域赋给新对象（因此 this 就指向了这个新对象） ；

(3) 执行构造函数中的代码（为这个新对象添加属性） ；

(4) 返回新对象

vue响应式原理

Vue 的响应式原理是核心是通过 ES5 的保护对象的 Object.defindeProperty 中的访问器属性中的 get 和 set 方法，data 中声明的属性都被添加了访问器属性，当读取 data 中的数据时自动调用 get 方法，当修改 data 中的数据时，自动调用 set 方法，检测到数据的变化，会通知观察者 Wacher，观察者 Wacher自动触发重新render 当前组件（子组件不会重新渲染）,生成新的虚拟 DOM 树，Vue 框架会遍历并对比新虚拟 DOM 树和旧虚拟 DOM 树中每个节点的差别，并记录下来，最后，加载操作，将所有记录的不同点，局部修改到真实 DOM 树上。

vue路由传参数得方法

方法一：用name传递参数

routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    }
]
在相应路由里接收 :console.log(this.$route.name) // Hello

方法二：使用name来匹配路由，然后通过params来接收参数

基本语法：

<router-link :to="{name:xxx,params:{key:value}}">valueStringrouter-link>
示例：<router-link :to="{name:'Home',params:{username:'jspang',id:'555'}}">router-link>
在相应路由里接收 :console.log(this.$route.params) // {username: "jspang", id: "555"}

方法三：使用path来匹配路由，然后通过query来接收参数 方法同：name来匹配路由传参

示例：
在相应路由里接收 :console.log(this.$route.query) // {username: "jspang", id: "555"}

方法四：利用url传递参数----在配置文件里以冒号的形式设置参数。

示例：{
    path:'/params/:newsId/:newsTitle',
    component:Params
}
<router-link to="/params/198/jspang website is very good">params</router-link>

方法五：直接再跳转路径后面拼接参数

示例： 
在相应路由里接收 :console.log(this.$route.query.a)

path匹配路由传参只能用query去接收参数，name来匹配路由只能用params去接收参数

jq

1.什么是jQuery？

jQuery是一个快速，轻量且功能丰富的客户端JavaScript库/框架，
它有助于遍历HTML DOM，制作动画，添加Ajax交互，操纵页面内容，
更改样式并提供很酷的UI效果。
它是最受欢迎的客户端库之一，根据调查，它在每个第二个网站上就会有一个使用。

2.为什么我们使用jQuery？

易于使用和学习。
易于扩展。
跨浏览器支持（IE 6.0 +，FF 1.5 +，Safari 2.0 +，Opera 9.0+）
易于用于DOM操作和遍历。
大池内置方法。
AJAX功能。
更改或应用CSS，创建动画的方法。
事件检测和处理。
满足各种需求的大量插件。

jq和js有什么区别

JavaScript是一种语言虽然jQuery是一个用JavaScript语言构建的库，它有助于使用JavaS

vue导航守卫

导航钩子有3个参数：

1、to:即将要进入的目标路由对象；

2、from:当前导航即将要离开的路由对象；

3、next ：调用该方法后，才能进入下一个钩子函数（afterEach）。

​ next()//直接进to 所指路由
​ next(false) //中断当前路由
​ next(‘route’) //跳转指定路由
​ next(‘error’) //跳转错误路由

window.onload()和jq document.ready得区别

$(function(){}) 和 $(document).ready(function())，这两个方法的效果都是一样的，都是在dom文档树加载完之后执行一个函数,（注意，这里面的ready是DOM树加载完成，不是onload的页面资源加载完成的）。document.ready和window.onload的区别是：上面定义的document.ready方法在DOM树加载完成后就会执行，而window.onload是在页面资源（比如图片和媒体资源，它们的加载速度远慢于DOM的加载速度）加载完成之后才执行。也就是说$(document).ready要比window.onload先执行。

vue $router和$route的区别

router为VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，例如history对象。。。经常用的跳转链接就可以用this.$router.push，和router-link跳转一样。。。

this.$router.push会往history栈中添加一个新的记录。

route相当于当前正在跳转的路由对象。。可以从里面获取name,path,params,query等。。

打印this.$route和this.$router。

js继承得几种方式

借助构造函数实现继承

借助原型链实现继承

js和jq对象的转换

DOM对象转为jQuery对象 $(js对象);

jQuery对象转为DOM对象

jquery对象[index];      //方式1（推荐）

  jquery对象.get(index);  //方式2

es6使用箭头函数需要注意的方法

主要就是this的问题，箭头函数没有它自己的this值，箭头函数内的this值继承自外围作用域，谁定义的函数，this指向谁

箭头函数要实现类似纯函数的效果，必须剔除外部状态。所以箭头函数不具备普通函数里常见的 this、arguments 等，当然也就不能用 call()、apply()、bind() 去改变 this 的指向

对于箭头函数来说，并没有自己的 this ，它的 this 将始终指向让它生效的对象，即它的外部调用者：

函数体内的this对象就是定义时所在的对象，而不是使用时所在的对象。
this指向的固定化并不是因为箭头函数内部有绑定的this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。正是因为它没有this，所以不能用作构造函数。
2.不可以当做构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
3.不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以使用rest参数代替。
4.不可以使用yield命令，因此箭头函数不能用作Genertor函数。
注：由于箭头函数没有自己的this,所以也就不能用call()、apply()、bind().

call 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象，第二个参数差别就来了：

call的参数是直接放进去的，第二第三第n个参数全都用逗号分隔，直接放到后面 obj.myFun.call(db,‘成都’, … ,‘string’ )；

apply的所有参数都必须放在一个数组里面传进去 obj.myFun.apply(db,[‘成都’, …, ‘string’ ]);

bind除了返回是函数以外，它 的参数和call 一样。

vue.js路由mode配置之去掉url上默认的#

如果需要去掉#，只需将mode的默认值’hash’改为’history’即可。

vue中key的作用

key的作用主要是为了高效的更新虚拟DOM

登录权限得一个判断怎么解释，还有登录上去得用户名存到哪

验证完以后，回返token，token是令牌，存在localstorge，用户得基本信息，登录成功后也会和token一并返回回来

别人看到的和自己看不到的是因为后台鉴权，返回不同的权限，但是是在token中，像那些头像啊或者用户名啊一般存在本地存储里，也没啥不安全的，都在用户那，而且token都是加密的

vue得双向绑定是用什么模式

是观察者模式， 也叫发布订阅模式，在这种模式中，一个订阅者订阅发布者，当一个特定的事件发生的时候，发布者会通知（调用）所有的订阅者。实现代码如下：

var EventCenter = (function(){
    var events = {};
    function on(event, handler){
        events[event] = events[event] || [];
        events[event].push({
            handler: handler
        });
    }

    function fire(event, args){
        if (!events[event]) {return}
        for (var i = 0; i < events[event].length; i++) {
            events[event][i].handler(args);
        }

data里面的属性可以在那操作

data可以在创建操作

闭包

如过不想在js中共享数据的话就可以使用闭包，闭包是指有权访问另一个函数作用域中的变量的函数

v-for和v-if优先级

v-for比v-if具有更高的优先级

vue的生命周期有什么作用

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

promise和.then的区别

传递给promise的函数是同步执行的，但是后续then调用始终是异步执行的。

set和map的区别

set结构类似于数据结构，map是键值对组合

vue.js实现双向绑定的原理

使用object.defineproperty通过数据劫持的方式做数据绑定，发布者订阅者模式

在js中和=的区别

“==”：叫相等运算符

“===”：叫严格运算符

它们两有什么区别呢？

== ：表示值相等则都为true

===：表示 不仅要值相等，双方类型也要相等才为true

js中清空数组的方法

splice函数

给数组的length属性赋值为0

直接赋值新数组

js中undefined和nodefined的区别

undefined 1、变量没赋初始值 2、函数没有返回值

not defined是javascript在运行我们的javascript代码时，遇到没有定义就用来运算的变量时爆出来的错误。

js中null和undefined的区别

Number转换的值不同，Number(null)输出为0, Number(undefined)输出为NaN

null表示一个值被定义了，但是这个值是空值
作为函数的参数，表示函数的参数不是对象

作为对象原型链的终点 （Object.getPrototypeOf(Object.prototype)）

定义一个值为null是合理的，但定义为undefined不合理（var name = null）　　　　　　
undefined表示缺少值，即此处应该有值，但是还没有定义
变量被声明了还没有赋值，就为undefined

调用函数时应该提供的参数还没有提供，该参数就等于undefined

对象没有赋值的属性，该属性的值就等于undefined

函数没有返回值，默认返回undefined

map和foreach的区别

map()会分配内存空间存储新数组并返回，forEach()不会返回数据。

forEach()允许callback更改原始数组的元素。map()返回新的数组。

vue中data为什么是个函数

组件中的data数据都应该是相互隔离，互不影响的，基于这一理念，组件每复用一次，data数据就应该被复制一次，之后，当某一处复用的地方组件内data数据被改变时，其他复用地方组件的data数据不受影响

路由和组件的常用两种懒加载方式：

vue异步组件实现路由懒加载

component：resolve=>([‘需要加载的路由的地址’，resolve])

es提出的import(推荐使用这种方式)

const HelloWorld = （）=>import(‘需要加载的模块地址’)

插槽

插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。

具名插槽其实就是在父组件中添加一个 slot='自定义名字' 的属性，
然后在子组件中的 里面添加 `name='自定义名字'` 即可 如果父组件中有一部分没有添加 `slot` 属性，则此处就是`默认的插槽`，在子组件中的 直接就是使用的父组件的默认插槽部分

作用域插槽父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。
不过，我们可以在父组件中使用 slot-scope 特性从子组件获取数据
前提是需要在子组件中使用 :data=data 先传递 data 的数据

清除浮动的几种方式

额外标签法，在最后一个浮动标签后，新加一个标签，给其设置clear：both(不推荐)

父级添加overflow：hidden

使用伪元素after清除浮动

.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}


"fahter clearfix">
"big">big
"small">small


"footer">

优点：符合闭合浮动思想，结构语义化正确

缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.

推荐使用

使用before和after双伪元素清除浮动

.clearfix:after,.clearfix:before{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}

"fahter clearfix">
"big">big
"small">small

"footer">
优点：代码更简洁

缺点：用zoom:1触发hasLayout.

浏览器存储