说一说cookie,sessionStorage,localStorage的区别?
1、他们都是浏览器的本地存储,而区别在于cookie是由服务器写入,sessionStorage,localStorage是由前端写入;
2、cookie的生命周期是由服务器写入时就设置完成的,sessionStorage是在页面关闭时自动清除,localStorage如果写入就一直存在,除非手动将其删除;
3、cookie的存储空间较小,大概只有4kb左右,而sessionStorage,localStorage的存储空间相对较大,大概5MB左右。
4、cookie,sessionStorage,localStorage数据共享遵循同源原则,不过sessionStorage限制必须是同一个页面。
5、前端给后端发送请求时会自动将cookie携带,而sessionStorage,localStorage不会被携带。
6.(加分项)由于他们的区别,他们的使用场景也不同,cookie一般会用于存储登录验证信息SessionID或者token;LocalStorage存储不会轻易变动的数据,减少服务器压力;SessionStorage可以检测用户是否刷新、进入页面。
JS数据类型有哪些,区别是什么?
JS数据类型分为两类:
第一种是基本数据类型,其中包含7种类型(Number数字类型、String字符类型、boolean布尔类型、Null空类型、Undefined未定义类型、BigInt、Symbol),(加分项)其中BigInt为Transact-SQL的系统数据类型,当整数值超过int范围才可以使用;而Symbol是ES6引入的一种新的原始数据类型,他的特点就是没有重复的数据,可作为Object的key;
第二种是引用数据类型,通常用Object代表,普通对象Object,数组array,日期Date,正则RegExp、函数function、Math数学函数都属于Object;
区别就在于这两种数据类型的存储方式不同。基本数据类型直接存储在栈中,占用空间小,是被频繁使用的数据;引用数据类型存储在堆内存中,占用空间大。引用数据类型在栈中存储了指针,指针推向实体的起始地址,当解释器寻找引用值时,会检索其在栈中的地址,取得地址后从堆中获取实体。
说一说JavaScript有几种方法判断变量的类型?
1.typeof判断基本类型,判断引用类型时,除了function,其他返回Object。
2.instance of
3.constructor
4.Object.prototype.toString.call()
说一说样式优先级的规则是什么?
!important>style>id>class>*
说一下浮动
脱离文档流,盒子塌陷,影响其他元素排版
Css选择器的优先级排序?
答:css选择器的优先级:important>行内样式>id>类>标签>*。
写出盒子模型的组成部分?
答:margrin外边距 padding内边距 border边框 content内容。
请说出CSS中"position"属性可能的取值,并分别描述他们?
答:position中有fixed固定定位、relative相对定位、absolute绝对定位、static静态定位;其中,fixed固定定位不会根据屏幕的滚动去改变位置、relative相对定位通常作为微调去使用,位置虽然改变,但是占位还是在原点、absolute绝对定位通常配合相对定位去使用,绝对定位不会受到网页大小的变化而被影响、static静态定位是position属性的默认值,无论怎么设置left、right、top、bottom都不会改变他的位置;
display的值和作用?
答:display中有4个值,none的作用是隐藏标签且不占位、block是将标签转换为块级标签、inline-block是将标签转换为行内块标签、inline是将标签转换成行内标签;
css3的新特性。
答:1、圆角效果;2、图形化边界;3、块阴影与文字阴影;4、使用RGBA实现透明效果;5、渐变效果;6、使用“@Font-Face”实现定制字体;7、多背景图;8、文字或图像的变形处理;9、多栏布局;10、媒体查询等。
Js数据类型有哪些?
答:JS的数据类型有number数字类型、string字符串类型、boolean布尔类型、null空置、未定义Underfined。
CSS的引用方式有哪些?它们的区别?
答:css的引用方式有:link标签引入外部css文件,@import引入外部css文件,行内引入<div style="color:red"></div>,嵌入引用<style></style>,通常写在<head>部分中
Overflow:hidden的三层意思?
答:1.清除浮动样式、2.隐藏超出部分、3.解决坍塌问题
SPA单页面应用程序是什么?他有什么优点和缺点?
答:SPA单页面应用程序就是由一个主页面和多个页面片段组成的一个网页,通过动态重写来完成和用户的交互,不会跳转或者访问其他页面
SPA的优点:
用户交互时响应较快,体验好。前后端分离,分工明确、维护相对容易
SPA的缺点: 不利于搜索引擎的抓取,首次渲染的速度较慢
说一说CSS尺寸设置的单位
1.px:绝对像素
2.rem:相对于根元素像素
3.em:相对于父元素像素
4.vw:视口宽度
5.vh:适口高度
说一说浏览器如何渲染页面的
1.浏览器先拿到HTML,将HTML转换成DOM树
2.然后将CSS样式转换成stylesheet
3.根据DOM树和stylesheet创建布局树
4.当布局树创建完成后,页面就会根据布局树将页面绘制到屏幕上
说一说null和undefined的区别,如何让一个属性变为null
1.null表示定义的变量赋值为null
2.undefined表示定义的变量未赋值
3.null通过typeof判断类型是'object',而undefined是undefined
4.让属性变为null只需要给属性赋值为null就可以了
说一说es6中箭头函数
1.箭头函数写法简洁
2.没有this,this只能通过call()或者apply()调用上下文的this
3.不能被new
4.没有arguments
5.没有原型和super
说一说this指向(普通函数,箭头函数)
1.普通函数指向window
2.箭头函数指向上下文作用域中的this
说一下token 能放在cookie中吗?
能,token一般用于判断用户是否登录。
token的认证流程:
1.客户端使用用户名和密码请求登录
2.服务器接收到请求后,验证用户名和密码
3.验证通过后,服务端会给客户端签发一个token
4.客户端接收到token后会将token存放在cookie里
5.客户端每次向服务端发送请求时都要带着token
6.服务端收到请求后,验证请求里的token,验证成功后返回对应的数据
说一说computed和watch的区别?
computer计算属性:当变量中的值发生变化时,才会执行代码,否则将从缓存中返回存储的值。
watch监听器:当数据发生修改时,监听器会返回修改前或修改后的数据。
说一说HTML语义化?
HTML语义化提高了代码的可读性,有利于SEO,有利于内容的结构化。
常见的语义化标签有:header、footer、main、section、nav
说一说 v-if 和 v-show区别?
v-if和v-show的作用都是用来控制元素的隐藏和显示的指令。
区别在于v-if只有条件为true时会对元素进行渲染,一般用于不频繁切换的元素上;
v-show不管条件为true还是false都会对元素进行渲染,通过display:none来控制元素的隐藏;
v-model的使用。
表单数据双向绑定
获取表单元素
表单值变化,会触发变量的值变化
变量的值变化,表单的元素也变化
简单讲一讲ES6的一些新特性(至少答出三点)。
箭头函数=>、let命令、cons命令、rest参数
什么是vuex?Vuex解决了什么问题?
uex 是 Vue 配套的 公共数据管理工具,它可以把一些共享的数据,保存到 vuex 中,方便 整个程序中的任何组件直接获取或修改我们的公共数据;
vuex是为了保存组件之间共享数据而诞生的,如果组件之间有要共享的数据,可以直接挂载到vuex中,而不必通过父子之间传值了,如果组件的数据不需要共享,此时,这些不需要共享的私有数据,没有必要放到vuex中。
只有共享的数据,才有权利放到vuex中;组件内部私有的数据,只要放到组件的data中即可。
根据刚才的描述,我们可以得出一个结论:vuex是一个全局的共享数据存储区域,就相当于是一个数据的仓库。
var、let、const之间的区别?
1、var声明的范围是函数作用域,let和const声明的范围是块作用域
2、var声明的变量会被提升到函数作用域的顶部,let和const声明的变量不存在提升,且具有暂时性和死区特性
3、var允许在同一个作用于中重复声明一个变量,let和const不允许
4、const的行为与let基本相同,唯一一个重要的区别就是,使用const声明的变量必须进行初始化,且不能被修改
vue全家桶包含技术。
1、vue-cli:脚手架
2、vuerouter:路由管理
3、vuex:应用程序开发的状态管理模式
4、axios:前后端数据交互
5、ui框架-vant:轻量,可靠的移动端vue组件库
vue的生命周期。
vue的生命周期为创建、挂载、更新、销毁,其过程有8种
1、beforeCreate组件实例创建之前
2、Created组件实例创建完毕
3、beforeMount组件DOM挂载完毕
4、Mounted组件DOM挂载完毕
5、beforeUpdate组件实例更新之前
6、Updated组件实例更新完毕
7、beforeDestory组件实例销毁之前
8、Destoryed组件实例销毁完毕
vue父组件向子组件传递数据?
在占位符中:子组件中接收的数据名=“父组件的数据”
在子组件的props属性中接收数据props:['子组件中接收的数据名“]
在子组件中使用子组件中接收的数据名
v-show和v-if指令的共同点和不同点?
共同点是v-show和v-if都是控制标签的显示隐藏
不同点是v-show不管在true或者false的情况下都会对标签进行渲染,只是通过控制display:none样式来显示隐藏
而v-if是在true时创建标签,false直接销毁标签
说出几种vue当中的指令和它的用法?
v-if创建标签或销毁标签
v-show控制标签display:none
v-for:根据数组或者对象里的数据进行循环渲染,生成标签并赋值数据
v-bind:绑定样式
v-model:对数据进行绑定
v-html:可以识别标签 xss风险
v-text:不能识别标签可识别文本
分别简述computed和watch的使用场景?
都是用来监听数据的变化
computed效率比较高,如果数据有变化的时候才会去执行,不然会去读缓存的数据
区别就是computed里面放了随机数,computed不会执行,但是watch会执行
单页面应用和多页面应用区别及优缺点?
单页面应用SPA读取速度快,用于登录,注册界面,节省开发成本单不利于搜索引擎搜索
多页面应用每次跳转都会去到新的html文件,优点是页面渲染快、缺点是跳转慢
vue路由传参方法?
params,query。
params:在router-link内部绑定to(:to/v-bind:to)传递参数,参数以键值对的方式存在,他的传值保密性比query好。接收值this.$route.params.参数名
<router-link :to="{name:'home',params:{参数名:‘数据’}}"></router-link>,name在路由规则(routes)中必需要写。
query:to属性中一个是path(路由跳转的地址),另一个就是要传递的值,这个值会出现在浏览器的地址栏。接收值this.$route.query.参数名
<router-link :to="{path:'/home',query:{参数:‘参数值’}}"></router-link>