前端面试题：

Vue的data为什么是一个函数

vue的data实质上就是一个闭包，vue是单页面应用，是由很多组件构成的，Vue中的data是函数的时，组件实例化的时候这个函数建辉被调用，返回一个对象，计算机会给这个对象分配一个内存地址，每次复用组件，就会返回新的data，类似于给每个组件实例创建一个私有数据空间。组件复用不会引起数据的相互影响。

1、vue的双向绑定原理是什么？里面的关键点在哪里？

• Vue的内部通过数据劫持结合发布者——订阅者的模式，
• 通过Object.defineProject() 来劫持各个属性的setter、getter方法来监听数据地改变
• 在数据改变的时候发布信息给订阅者（watcher），订阅者通过触发响应的回调（update）来更新视图。

2、实现水平垂直居中的方式？

flex布局:

利用弹性布局(flex)，实现水平居中，其中justify-content 用于设置弹性盒子元素在主轴（横轴）方向上的对齐方式

给容器设置：

• display: flex;

• justify-content: center; 主轴对齐方式，默认是横轴

• align-items: center;  纵轴对齐方式，默认是纵轴

flex-结合子项设置：

        父盒子：display: flex;

        子盒子：margin: auto;   // 水平垂直居中

绝对定位：

        父组件：position: relative;

        子组件：position: absolute;

                       left: 50%;
                       top: 50%;
                       transfrom: translate(-50%,-50%);

                       

table-cell实现：

        父组件：display: table-cell;

                        vertical-align: middle;

                        text-align: center;

        子组件：display: inline-block;

3、常用伪元素有哪一些？

:before ： 在元素之前添加内容。(这个前端必会)　

:after ： 在元素之后添加内容。(这个前端必会)

:first-letter： 向文本的第一个字母添加特殊样式   

:first-line:   向文本的首行添加特殊样式

4、移动端如何适配不同屏幕尺寸？

一、为了让页面在不同屏幕尺寸下兼容运行，字体/元素的大小等能够动态变化。

二、利用网易的适配方案使用vw作为单位，不用写js，只需要：

    根据设计稿宽度算出来html字体的大小，并且以vw作为单位，
    vw: 视图窗口的宽度，1vw = 视图窗口宽度的1%，如果视图窗口，
            1800px 1vw=18px
    vh: 视图窗口的高度，1vh = 视图窗口高度的1%

5、本地存储有哪一些？他们三者有什么区别？

cookie、localStorage和sessionStorage;

在这里我们把cookie、session、localStorage、sessionStorage一块说说；

1、cookie和session：
        同：cookie和session都是用来跟踪浏览器用户身份的会话方式；
        异：（1）存储位置及安全性：cookie保存在客户端、session保存在服务器端（因此比cookie的安全性更高）（可以通过对cookie进行cookie欺骗，考虑到安全性，使用session）；
        （2）存储内容：cookie只可以存储String(字符串)类型的对象、session能够存储任意的java对象；
        （3）内存大小：单个cookie保存的数据不能超过4kb，很多浏览器也限制一i个站点最多可以保存20个cookie；session大小没有限制；

        （4）性能：session保存的东西越多，会影响服务器性能，session过多，增加服务器压力；
        （5）使用方式：cookie机制：如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束，这种cookie简称会话cookie。如果在浏览器中设置了cookie的过期时间，cookie被保存在硬盘中，关闭浏览器后，cookie数据仍然存在，直到过期时间结束才消失。
session机制：当服务器收到请求需要创建session对象时，首先会检查客户端请求中是否包含sessionid。如果有sessionid，服务器将根据该id返回对应session对象。如果客户端请求中没有sessionid，服务器会创建新的session对象，并把sessionid在本次响应中返回给客户端。通常使用cookie方式存储sessionid到客户端，在交互中浏览器按照规则将sessionid发送给服务器。如果用户禁用cookie，则要使用URL重写，可以通过response.encodeURL(url) 进行实现；API对encodeURL的结束为，当浏览器支持Cookie时，url不做任何处理；当浏览器不支持Cookie的时候，将会重写URL将SessionID拼接到访问地址后。

        应用场景：

        cookie：（1）判断用户是否登陆过网站，以便下次登录时能够实现自动登录（或者记住密码）。如果我们删除cookie，则每次登录必须从新填写登录的相关信息。

　　　　（2）保存上次登录的时间等信息。

　　　　（3）保存上次查看的页面

　　　　（4）浏览计数   

        session：Session 用于保存每个用户的专用信息，变量的值保存在服务器端，通过SessionID来区分不同的客户。

　　（1）网上商城中的购物车。

　　（2）保存用户登录信息。

　　（3）将某些数据放入session中，供同一用户的不同页面使用。

　　（4）防止用户非法登录。

2、localStorage和sessionStorage:

        HTML5的WebStorage提供了两种API：localStorage（本地存储）和sessionStorage（会话存储）

        两者的不同之处：

        （1）生命周期：localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。sessionStorage的生命周期仅在当下的会话有效，在关闭了浏览器窗口后就会被销毁

        （2）存储大小：localStorage和sessionStorage的存储数据大小一般都是：5MB；

        （3）存储位置：localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信。

        （4）存储内容类型：localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理；

        （5）获取方式：localStorage：window.localStorage;   sessionStorage：window.sessionStorage;

        （6）、应用场景：localStorage：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据。sessionStorage：敏感账号一次性登录；

1、cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

2、存储大小限制也不同。cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，

如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

3、数据有效期不同。sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

6、JS的数据类型？如何判断js的数据类型?

1、js的数据类型：
        基本数据类型：number、string、null、undefined、boolean、symbol(es6)
        引用数据类型：array、object、function
2、判断数据类型：
   （1）typeof 检测一些基本数据类型

            typeof 返回的值类型都是字符串类型
            typeof 判断基本数据类型时，除了null 的输出结果为‘ object’ 的字符串，
            typeof 判断引用类型时，除了函数会输出function的字符串，其他都是object的字符串
   （2）instanceof 
            instanceof 用来判断对象的具体类型，说白了就是判断一个对象是不是另外一个对象的实例，比如a instanceof B 用来判断 a 是不是 B的实例,那么咱们就可以证明let arr = [1,2,3]; console.log(typeof arr); 这行代码为什么不能用typeof判断了，当然null无法判断，因为null属于基本数据类型，它是无法通过instanceof判断的。
3、附加：数据存储位置：