2020前端面试总结

Vue是什么:是一套用于构建用户界面的渐进式框架

Vue的核心是什么:数据驱动/组件化

for in 和 for of 的区别

for…in 循环:只能获得对象的键名,不能获得键值
for…of 循环:允许遍历获得键值

什么是时候用Vue.nextTick()
vue实现响应式并不是数据发生变化后dom立即变化,而是按照一定的策略来进行dom更新。

$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM

mvvm的理解
简单的说,ViewModel就是View(视图)与Model(处理业务逻辑)的连接器,View与Model通过ViewModel实现双向绑定。

Vuex是什么
答:状态管理工具,俗称数据仓库

Vuex有什么
State:要操作的数据
Getter:从仓库中往外面取东西
Mutation 同步往仓库中操作数据
this.$store.commit(传递参数)
Action异步往仓库操作数据
Modules 理解为仓库中的一个一个小房间(即可分类管理)

vue组件交互行为,调用dispath方法触发action相关处理,若页面状态需要改变,则调用commit方法提交mutation修改state,通过getters获取到state新值,重新渲染vue components

vuex中获取的数据使用v-model绑定会出问题,不能直接对vuex里面的数据进行更改,需要使用set方法,向vuex直接提交新值

Vuex能做什么
答:做数据共享和传递(不同页面之间的数据传递)
单一状态树管理,让数据的修改脉络更加清晰,便于定位问题,模块化

vuex的优缺点
优点
解决了非父子组件的消息传递(将数据存放在state中)
减少了AJAX请求次数,有些情景可以直接从内存中的state获取
缺点
刷新浏览器,vuex中的state会重新变为初始状态

ajax的底层原理

ajax利用XMLHttpRequest的异步请求完成,通过open设置相关的请求信息,绑定onreadyStateChange事件,根据服务器返回状态的不同来做不同的处理

同步和异步

同步:按照任务的顺序执行任务,前一个任务没有执行结束,下一个任务不会执行,要等待上一个任务执行结束
异步:是同一时间内可以做多件事

axios中的拦截

axios.interceptors.request.use 请求拦截
axios.interceptors.reponse.use 响应拦截

promiss

promiss的状态:pending,resolve,rejected,状态不受外界影响,一旦改变就不会再变,主要用来异步操作
缺点:1.一旦建立就会立即执行中途无法取消
2.如果不设置回调函数promiss内部抛出错误,不会反应到外部

事件循环机制

当任务进入执行栈区分同步还是异步,同步会进入主线程,异步会进入event table注册函数,当指定的事件完成时,event table会将函数移入event quene,当栈中的代码执行完毕,执行栈中的任务为空时,就会读取任务队列(Event quene)中的事件,去执行相应的回调,如此循环,形成js的事件循环机制

宏任务和微任务

宏任务就是每次执行栈执行的代码就是一个宏任务(包括每次从事件队列中获取一个事件回调并放到执行栈中执行),每一个宏任务(task)会从头到尾讲这个任务执行完毕,不会执行其他,浏览器为了能够使得js内部task与DOM任务能够有序的进行,会在下一个task执行结束后,在下一个task执行开始前,对页面重新渲染

微任务:理解在当前宏任务(task)执行结束后立即执行的任务
也就是说,在当前task任务后,下一个task之前,在渲染之前

Vue双向数据绑定原理
答:Vue.js是采用数据劫持结合发布者-订阅者模式的方式,通过object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调

Sass有什么优点
答:可以使用变量 简单的逻辑处理 函数等
缺点:文件体积和复杂度不可控,调试难度增加

定义组件的时候data为什么是函数而不是对象
答:因为对象是引用类型,组件可能会被多个实例同时引用。如果data值为对象,将导致多个实例共享一个对象,其中一个组件改变data属性值,其它实例也会受到影响

Vue和jquery的区别是什么?哪些场景适合?
答:一个model+view+viewModel框架,数据模型model,viewModel连接两个
区别:vue数据驱动,通过数据来显示视图层而不是节点操作。
场景:数据操作比较多的场景,更加便捷

active-class是哪个组件的属性?
答:vue-router模块的router-link组件

keep-alive的作用是什么,会触发那些生命周期
答:对组件进行缓存,触发activated deactivated

v-on可以监听多个方法吗 v-on的修饰符
可以,.stop阻止时间冒泡 .prevent阻止当前时间默认行为 .once绑定对的事件只会触发一次 .self当事件是从事件绑定的元素本身触发时才触发回调

v-for中key的作用
key的作用主要是为了高效的更新虚拟DOM

什么是RESTful API?怎么使用?
答:是一个api的标准,无状态请求。请求的路由地址是固定的,如果是tp5则先路由配置中把资源路由配置好。标准有:.post .put .delete

生命周期常用场景
beforecreate : 可以在这加个loading事件,在加载实例时触发, 记录进入时间
created : 初始化完成时的事件写在这里,如在这结束loading事件,发送网络请求
mounted : 挂载元素,获取到DOM节点
updated : 如果对数据统一处理,在这里写上相应函数
beforeDestroy : 离开页面之前,销毁定时器 记录结束时间(统计用户停留的时间)
nextTick : 更新数据后立即操作dom

导航钩子
全局钩子:router.BeforeEach(to,from,next)
组件内的钩子:beforeRouteEnter(to,from,next) Update Leave
独享路由的钩子:beforeEnter(to,from,next)

组件传值
父子传值:Props
子父传值:emitjsemit() 兄弟传值:通过一个公共的js,emit() $on()
父孙传值:provide (函数) inject(对象)

箭头函数和普通函数的区别
箭头函数是匿名函数,不能作为构造函数,不能使用new
箭头函数没有原型属性
箭头函数不绑定arguments,取而代之用rest参数…解决
箭头函数不绑定this,会捕获其所在的上下文的this值,作为自己的this值

闭包 闭包的优缺点
闭包就是内部函数可以访问到外部函数里的参数和变量
this的指向问题
内存泄露
引用的变量可能发生变化

原型链

在访问对象的属性和方法时,会在当前对象中查找,如果没有找到,会一直沿着原型链上–proto–上查找,直到找到object.protopyte(原型的顶端)为止,这就是原型链
什么是Http协议
对客户端和服务器端之间数据传输的格式规范格式简称为“超文本传输协议”。

http协议由什么组成

请求报文包括三部分:
(1).请求行:包含请求方法,URI,HTTP版本协议
(2).请求首部字段
(3).请求内容实体
响应报文包含三部分:
(1).状态行:包含HTTP版本,状态码,状态码原因短语
(2).响应首部字段
(3).响应内容实体

前后端分离的好处

js可以做很大部分的数据处理工作,对服务器的压力减小到最小
后台错误不会直接反映到前台
前后端职责不清

微信登录的简单流程

1.通过wx.login()获取登录凭证code
2.通过button组件的open-type=“getUserInfo”, 获取用户信息
3.将获取到的登录凭证和用户信息传递到自己的服务器
4.在自己的服务器上将登录凭证发送到微信的服务器上换取openid和session_key
5.利用用户提交的信息在自己的服务器上注册用户账号(等等…)
6.将注册之后的信息返回给微信小程序
7.将注册信息保存起来以便以后使用

小程序的双向绑定和vue哪里不一样

小程序直接this.data的属性是不可以同步到视图的,必须调用:this.setData({nobind:true})

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章