1.浏览器的缓存策略
HTTP缓存有多种规则,根据是否需要向服务器重新发起请求来分类,将其分为强制缓存、对比缓存。
2.vue2的生命周期
vue生命周期分为四个阶段:创建、挂载、更新、销毁。
创建前:beforeCreate 创建后:Created
挂载前:beforeMount 挂载后:mounted
更新前:beforeUpdate 更新后:updated
销毁前:beforeDestroy 销毁后:destroyed
3.http的常见的状态码
1xx(临时响应)
表示临时响应并需要请求者继续执行操作的状态码
2xx (成功)
表示成功处理了请求的状态码。
200 -- 服务器成功返回网页
3xx (重定向)
表示要完成请求,需要进一步操作。通常,这些状态代码用来重定向。
304(未修改)自从上次请求后,请求的网页未修改过。服务区返回此响应时,不会返回网页内容。
4xx (请求错误)
404 --请求网页不存在
401 -- 没有权限
5xx (服务器错误)
这些状态代码表示服务器在尝试处理请求时发生内部错误。这些错误可能是服务器本身的错误,而不是请求错误。
500 -- 服务器内部错误
503 -- 服务不可用
4.标准盒子模型和IE怪异盒子模型
标准盒模型又称W3C标准盒模型,其中标准盒模型的width等于content的宽度,标准盒模型的height等于content的高度。
标准盒模型计算公式:width(content)+padding+border+margin
怪异盒模型又称IE盒子模型,其中怪异盒子模型的width等于content+padding+border的宽度,怪异盒子模型的height等于content + padding + border 。
怪异盒大小的计算公式:width(content + padding + border) + margin
怪异盒模型的计算公式:width宽度+margin的值。(其中width值包含了padding、border、content)
5. 如何清除浮动?
为何要清除浮动?
- 浮动布局,float:left;会使当前元素脱离文档流,从而失去对父级元素的支撑,如果此时父级元素没有设置高度, 下面的元素就会挤上去,因此需要清除浮动。
1. 给浮动元素的父级元素设置overflow:hidden;
2. 在浮动元素的同级下添加一个空标签,并且设置clear:both;
3. 浮动元素的父级元素使用:
::after{ Clear:both; Content:“”; Display:block; }
6. es6的新增语法?
ES6新增特性常用的有:let/const、箭头函数、模版字符串、解构赋值、模块导入(import)、模块导出 (export default、export)、promise,还有一些数组字符串的新方法
7. vue子父组件传值?
Vue组件传值的方式大致有三种:父传子、子传父、兄弟组件传值
父传子: $ props
子传父: $emits
兄弟组件: event bus / vuex实现
8. let、 const、 var的区别?
1. var变量挂载到window上
2. var存在变量提升,let、const不存在变量提升
3. var可以重复声明 ,let、const重复声明会报错
4. let、 const 可以生成块级作用域
5. let 、const会形成一个暂时性死区
6. const
(1) 一旦声明就必须赋值
(2) 声明后不能在修改
(3) 如果声明的是复合类型数据,可以修改其属性
9. computed和watch的区别?
Computed
Computed:是vue独有的特性计算属性,可以对data中的依赖项再次进行重新计算得到一个新的值。
支持缓存,不支持异步
Watch
Watch:是监听data和计算属性中的新旧变化。
不支持缓存,支持异步。
10. vue3常用的api?
vue3使用composition API,相比于vue2的options API而言,我们可以按需引入需要使用的api,而不是必引入所有的阿皮,从而提高了项目打包构建的速度,减少了项目打包后的体积。
1. setup函数时composition api的入口函数,我们的变量、方法、函数等都是在该函数里定义的
2. Reactive 方法使用来创建一个响应式的数据对象,该api很好的解决了vue2通过defineproperty实现数据响应式的缺陷
3. Ref 底层通过reactive包装了一个对象,然后将值传递给该对象的value属性,可以将ref(prop)理解为reactive({value:prop}),所以访问ref包装的对象时需要加上 .value
4. toref 是将某个对象中的某个值转化为响应式数据,接受两个参数,第一个参数为Obj对象,第二个参数为对象的属性名。
5. torefs 的作用就是将传入对象所有的属性的值
11. js常见的创建方式?
一. 直接创建方式
创建语法:
var 对象变量名 = new Object();
对象变量名. property1 = value1;
对象变量名. propertyN = valueN;
对象变量名. methodName1 = function([参数列表]){
//函数体
}
对象变量名. methodNameN = function([参数列表]){
//函数体
}
二. 对象初始化方式
创建语法
var 对象变量名 = {
property1 : value1,
property2 : value2,
propertyN : valueN,
methodName1 : function([parameter_list]){
//函数体
},
methodNameN : function([parameter_list]){
//函数体
}
}
三. 构造函数方法
创建语法
function 构造函数([参数列表]){
this.属性 = 属性值;
this.属性N = 属性值N;
this.函数1 = function([参数列表]){
//函数体
} ;
this.函数N = function([参数列表]){
//函数体
} ;
}
四. Prototype原型方法
创建语法
function 对象构造器( ){
}
对象构造器.prototype.属性名=属性值;
对象构造器.prototype.函数名 = function([参数列表]){
//函数体
}
五. 混合的构造函数、原型方式
创建语法
function 对象构造器([参数列表]){
}
对象构造器.prototype.函数名 = function([参数列表]){
//函数体
}
12. ==和===的区别?
== 是非严格意义上的相等(值相等就相等)
=== 是严格意义的相等,会比较两边的数据类型和值大小(值和引用地址都相等才相等)
== 会自动转换类型 ,=== 不会自动转换
13. 阻止事件冒泡的方式?
1. event.stopPropagation()方法
这是阻止事件冒泡方法,阻止事件向document上蔓延,但是默认事件仍然会执行,当你调用这个方法的时候,如果点击一个连接,这个连接任然会被打开。
2. event.preventDefault()方法
这是阻止默认事件的方法,调用此方法时,链接不会被打开,但是会发生冒泡,冒泡会传递到上一层的父元素
3. return false
这个方法比较暴力,他会同时阻止事件冒泡也会阻止默认事件,不仅阻止了事件往上冒泡,而且阻止了事件本身。
14. http请求方法有哪些?
常用的方法有:get 、post 、put 、delete
GET : 请求指定的页面信息,并返回实体主体。
POST:向指定资源提交数据进行处理请求。
PUT : 从客户端向服务器传送的数据取代指定的文档的内容。
DELETE:请求服务器删除指定的页面
15. rem和em的区别?
rem和em都是相对单位,主要参考的标签不同:
rem:是相对于根字号,几相对于 html 标签的font-size实现的,浏览器默认字号是font-size:16px;
em:是相对于父元素标签的字号,和百分比%类似,%也是相对于父级的,只不过%相对于父级宽度的,而em相对于父级字号的。
16. 实现一个div上下左右居中的三种方法?
1. 通过给div设置绝对定位,并且left、right、top、bottom都设置为0 . margin:auto;即可水平垂直居中
通过给div设置绝对定位,left为50%,top为50%,再给div设置
transform:translate(-50%,-50%,0)flex布局 给父级div设置display:flex; 水平居中jusitify:content:center; 垂直居中:align-item:center;即可
17. v-for和v-if的区别?
当他们处于同一个节点时,v-for 的优先级比v-if更高,这意味着v-if将分别重复运行于每个v-for循环中。 当想为仅有的一些项渲染节点时,这种优先级就会十分的有效。
18. router传参的方式?
1. query 传参 ---刷新不丢失
2. Params 传参 ----刷新丢失
注意:只能用name不能用path :
3. 直接跳转 $router.push()
19. v-if和v-show的区别?
相同:v-if 和v-show都是可以控制domy元素的显示和隐藏;
不同:v-show只是改变display属性,dom元素并未消失,切换时不需要重新渲染页面;v-if直接将dom元素从页面删除,再次切换需要重新的渲染页面.
20. urI输入到地址栏后发生了什么?
1. DNS解析
2. TCP连接
3. 发送HTTP请求
4. 服务器处理请求并返回需要的数据
5. 浏览器解析渲染页面
6. 连接结束
输入一个域名,域名要通过DNS解析找到这个域名对应的服务器地址(ip),通过TCP连接请求链接服务,通过WEB服务器(Apache)返回数据,浏览器根据返回数据构建DOM树,再把css形成一个样式表,这两个东西就结合,变成了render树,页面上通过重绘和回流的过程,渲染到页面来。
21. Number和parselnt的区别?
Number()可以把任何的数据转换为数值或NaN;
parseInt()只能把字符串或数值转换为数值。
Number()把空字符串转换为0,而parseInt()则是转换为NaN
22. axios的封装有哪一些?
① 首先在src目录中新建一个request文件夹,然后在里面新建一个http.js.
② 在文件http.js引入axios
③ 环境切换设置 baseURL后端即服务器的地址
④ 设置请求超时
⑤ 请求头设置
⑥ 请求拦截
⑦ 响应式拦截
⑧ Api调用http.js
23. vueRouter的原理?
1. 利用H5的history API 实现
2. 利用URL的hash实现(router后面带#号)
3. Abstract
hash方案兼容性好,而history主要针对高级浏览器
24. 什么是同源策略?
同源指的是域名、协议、端口号相同。
同源策略就是浏览器的一个安全限制,它阻止了不同【域】之间进行的数据交互。
25. NextTick的作用?
vue只能给的nextTick主要用于数据动态变化后,DOM还没有及时更新的问题,用nextTick就可以获取数据更新后的最新的DOM变化。