第一次前端面试 自己总结的面试题

面试

mvc和MVVM区别

mvc model view controller 通信单项

mvvm ：model view viewmodel 双向通信

盒子模型：

就是又一个个盒子组建而成，每个html元素都可以成为盒模型 盒子模型

盒子模型就只有content高度

ie盒子模型content+margin+padding高度

BFC 块级格式化上下文

html5语义化

更加清晰元素作用 ，方便编码，方便后期对代码的维护和升级 ，阅读更加方便

新增语法hearder 、nav、aside（侧边栏标签）footer（尾部标签） audio（音频） video（视频）

css3

calc 计算 可以计算 width: calc(100% -100px- 100px);

css3 选择器

id选择器 calss选择器 标签选择器 子选择器 （ul>li) 通配符选择器（*） 伪类选择器

css中外边距折叠原理

两个div 重叠在一块

解决方法： 浮动，float position

border边框折叠一起 box-sizing：‘border-box’

css清除浮动

1、父盒子定义高度height

2、在子盒子后加一个盒子 style clear：both

3、在父盒子添加 overflow ：hidden

4、在父盒子后加伪类：：after{content：‘’，display ：block；clear：both}

css隔行变色

ul li :nth-child(2n/2n+1){}

css中水平竖直居中div

1、justify-content：center

align-items:center

2、position fixed 上下左右都为0 margin:auto

3、父position:relative

子：positon:absolute

top:50%

left:50%

transform:translate(-50%,-50%)

左侧固定width 右侧自适应

father： display：flex

right： flex：1

行内元素和块级元素区别

行内会在一条直线上 行内不能包含块级元素 设置weight hight margin padding无效

块级会占一行 能包含行内元素

js数据类型：

基本数据：number\string\boolean\undefind\null\ symbol\bigint

对象数据：array\Object\Function

var let const

var: 存在变量提升 声明全局变量

let const 是es6 新增的 拥有块级作用域 cosnt 声明常量，不能修改 let 声明变量 可以修改

浅拷贝和深拷贝

浅拷贝：Object.assign(o, obj)

深拷贝： var o = JSON.stringify(obj)

o = JSON.parse(o)

Es6新增方法

let const 解构赋值 const{data：res} =

##

异步操作

promise

promise .then (.catch)

回调函数

await async

Dom 和Bom

Dom 文档对象模型 主要是数据 内容

Bom 浏览器对象模型 浏览器交互方法和接口

修改数组的方法

forEach 、map、shift、unshift、splice、push、sort、

join 以什么方法合并字符串 split以什么方法截断字符串

this指向

总是指向调用他的对象

普通函数和settimeout 和立即执行函数 指向window

闭包

：内部函数访问外部函数的变量 条件：函数内嵌套函数 内部函数使用外部变量

缺点 ：使用之后 不会变成垃圾对象清除内存

应用：防抖和节流

function fn() {

div.innerHTML = input.value

}

function fangdou1(fn) {

let timer;

return function() {

clearTimeout(timer)

timer = setTimeout(() => {

fn()

}, 3000)

}

}

input.addEventListener('keydown', fangdou1(fn))

原型和原型链

原型：显式原型 prototype 每个函数都有个prototype属性 成为显示原型

原型链：隐式原型 proto 每个实例对象都有——proto——属性 被称为 隐式原型

实例对象中的 ——proto—— 指向构造函数中的 显示原型prototype

bind - call - apply区别

call()和apply会调用函数 能改遍函数内部this指向 call（arul ,aru2) apply(arul1,[arul2])对应数组

bind 不会立即调用函数 能改遍函数被捕this指向

vue数据双向绑定原理

v-model == v-bind 和 v-click

：value = 'msg' @blur='msg =$event.target .value '

vue声明周期

beforcreate

created

beformounted

mounted

beforupdate

updated

befordestory

destoryed

activated 活跃

deactivated 不活跃

errorCaptured 出错调用

vue中 v-if 和 v-show区别

都可以 不显示出来元素

v-if 会销毁元素 时间慢

v-show 只是隐藏元素

vue中 key作用

做元素唯一标识 更新虚拟Dom 不使用index 因为数据增删改查 会修改index

vue中keep-alive

让元素或者组件缓存不销毁

同时调用activated (显示时调用)和 deactivated（隐藏时调用）

路由守卫

router.beforeEach(to,form,next)

to 去哪

form 从哪来

next（） 必须有

vue父子间通信

父传子： props：{son：{}} ：son = 'father'

子传父： $emit(son) 父： @son = 'father'

子传子： 在main.js 中添加 Vue.prototype.EventBus = new Vue()

在子组件传出eventBus事件 一个this.eventBus.$emit('事件1'，实参) 另一个传入this.eventBus.$on('事件1'，（形参)=>{fn函数})

VUE slot

插槽： 普通插槽 就是一个占位符 匿名插槽 多个slot 有name 使用template #name

http状态码

1XX ：请求数据

2XX： 成功

3XX：修改 重定向

4XX：客户端错误

5XX： 服务器错误

XMLHttpRequest.readyState请求状态码

0：没做呢

1：建立未发送

2：发送中

3：部分可用

4：响应完成

vue页面跳转方式

1、a href‘跳转页面’

2、router_link to=‘跳转页面’

3、this.router.push（{path：'跳转页面'}）

Vue中获取dom元素

this.$refs