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、附加:数据存储位置: