前端 vue 和知识共享的必备面试问题!
以下是回答问题:
1,vue的双向绑定原理是什么?里面的关键点在哪里?
使用object.defineProperty()的set和get进行数据劫持,结合发布-订阅模式
前后端分手大师——MVVM 模式
MVVM框架的的核心就是双向绑定,MVVM是model:数据库
view:html和css
viewModel:js
双向绑定的核心是object.defineProperty()
2,实现水平垂直居中的方式?
flex布局
line-height和height一样高,text-align:center
position定位
3,常用伪元素有哪一些?
after和before,first-child(),last-child(),hover,active,nth-child,
4,移动端如何适配不同屏幕尺寸?
rem,vh,vw和flex布局,媒体查询
5,本地存储有哪一些?他们三者有什么区别?
本地存储有localStorage,sessionStorage,cookie(放在请求中)
6,JS的数据类型?如何判断js的数据类型?
基本类型:string,number,null,undefined,boolen,symbol
引用类型:object,function,array
对象、数组、null 返回的值是 object,可以使用instanceof和object.prototype.toString.call()
7,说一下ES6的新特性有哪些?
let const 定义
模板字符串
set函数,map函数
promise
箭头函数
扩展运算符
8,Let、const、var三者有什么区别?
let 块级作用域内有效
var 块级作用域外也有效
const 常量
9,数组去重有哪些办法?
new Set 去重
reduce方法去重,includes
10,说一下深拷贝和浅拷贝,如何自己实现一个深拷贝?
JSON.parse(JSON.stringify(obj))
11,Vue的生命周期有哪一些?说一下它们每个阶段做什么操作?
beforeCreated,created, beforeMounted,mounted, beforeUpdate,updated, beforeDestroy,destroyed
DOM构建/渲染前:beforeCreate、created、beforeMount、mounted
DOM渲染后:beforeUpdate、updated
离开页面:beforeDestroy、destroyed
13,Vuex有几个属性及作用?
state,getters,mutations,actions,modules
14,computed和watch的区别
computed计算属性,有get和set属性,会有缓存机制,调用return返回结果,多个值影响一个值的时候
watch监听属性,监听某个值变化,一个值影响多个值
15,说一下防抖和节流。怎么实现?
settimeout
防抖是为了防止防止点击多次出现抖动(搜索框)
节流是一段时间内保证可以点击一次,避免多余的点击(滚动加载)
16,Vue的导航守卫有哪一些?
全局前置守卫,beforeEach(to, from, next)
组件守卫,beforeRouterEnter,beforeRouterUpdate,beforeRouterLeave,
全局后置守卫,afterEach
17,你的登录拦截怎么实现的?
全局守卫beforeEach进行验证是否有token,有的话可以登录,没有的话跳转登录页
或者拦截器进行拦截
19,闭包是什么?如何实现?
闭包就是函数中调用另一个函数,可以访问到父级函数中的变量,避免使用全局变量,造成污染
20,Vue2.0和vue3.0有什么区别?
双向绑定的原理不一样,object.defineProterty,proxy
生命周期不一样,vue3.0中是setup代替了credted,其他的都是加了on
vue3.0中可以用vue2.0,但是vue2.0中不可以用vue3.0
vue3.0中template可以不用最外层包裹一个标签
vue2.0中v-if >v-for,vue3.0中v-for > v-if
vue2.0是选项式api(option api),vue3.0是组合式api(composition api)
32,原型和原型链
对象中有个_proto_,和函数中的prototype是相等的
33,async await 函数
//async较好的用法
async function testAsync(){
//返回一个Promise对象
return new Promise((resolve, reject)=>{
//处理异步任务
setTimeout(function () {
resolve("testAsync")
}, 1000);
})
}
//async通常用于声明一个处理异步任务且返回了Promise对象的函数
promise 状态pending,fulfilled,rejected
promise 对象初始化状态为 pending
resolve,pending---->fulfilled
rejected,pending---->rejected
34,子组件和父组件之间生命周期加载
加载渲染过程
父组件beforeCreated,created,beforeMounted,子组件beforeCreated,created,beforeMounted,mounted,父组件mounted
更新过程
父组件beforeUpdate,子组件beforeUpdate,子组件updated,父组件updated
销毁过程
父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed
mixins的beforeCreated -> 父beforeCreated ->mixins的created -> 父created -> minxins的beforeMounted ->
父beforeMounted ->子beforeCreated -子created -> 子beforeMounted ->子mounted ->mixins的mounted -> 父mounted
35,flex:1
flex-grow 1,flex-shrink 1,flex-basis 0
项目放大比例值为1,项目缩小比例值为1,项目占据空间为0%
36,前端的缓存机制,强制缓存和协商缓存
37,手写一个防抖
// 防抖 定时器实现(立即执行版本)
function debounce(fn, delay){
let timer = null;
return function(){
clearTimeout(timer);
timer = setTimeout(()=> {
fn.apply(this, arguments);
}, delay)
}
}
事件触发了之后,开启一个定时器,当在这个时间内继续触发,会清除之前的定时器,重新计时
从浏览器中输入URL到返回页面的过程?
解析域名-->三次握手-->发起请求 --> 响应请求 --> 返回响应 --> 解析渲染
38,重绘,回流
重绘是修改样式,但是没有影响几何属性(修改了颜色或者背景色)
回流是影响了几何属性
重绘不一定导致回流,回流一定会导致重绘
39,websocket
40,事件机制
41,iframe传值
42,标准盒子模型和普通盒子模型的区别
标准盒模型(box-sizing:content-box),实际宽度 = 设置的width + border + padding
怪异盒模型(box-sizing:border-box),实际宽度 = 设置的宽度width
43,图片垂直怎么做,vertical-align:middle
44,为什么不能对dom进行频繁的操作
dom渲染每次都会重绘和回流,会造成vue性能下降
dom操作慢是因为dom和js的跨界交流,js引擎和渲染引擎之间进行交流
减少dom操作的方式:
1,缓存DOM对象
2,在内存中操作元素
3,一次性DOM节点生成
4,通过类修改样式
'https://segmentfault.com/a/1190000000490322'具体参照文档
虚拟dom的应运而生
js会生成一个虚拟的dom
diff算法会比较两次dom之间的差异
patch算法一次性的给真实dom赋值,避免多次操作dom
45,基本数据类型和引用数据类型的区别,堆和栈,深拷贝和浅拷贝
基本数据类型是放在栈内存中的
引用数据类型是存放在堆内存中的
比较上的区别:基本数据类型是值的比较,引用类型是引用地址的比较
赋值上的区别:基本类型赋值直接=,引用类型赋值是对象引用
46,diff算法主要用于哪里
diff算法就是进行虚拟节点对比,并返回一个patch对象,用来存储两个节点不同的地方,最后用patch记录的消息去局部更新Dom。
diff的过程就是调用名为patch的函数,比较新旧节点,一边比较一边给真实的DOM打补丁
47,jquery的增删改查
基础语法是:$(selector).action()
$('p').hide()
$('.test').hide() class是test的
$('#test').hide() id是test的
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
48,node中间件
49,项目中有遇到过什么难点
50,SSR技术,是服务端渲染(Server-side Rendering),服务端渲染出html后返回给前端,直接展示,静态页面可以前端自己写,
但是需要动态请求数据的,会出现白屏,或者很慢,用户体验不是很好,可以使用SSR
上一篇: Vue 章节高频前端面试问题汇总(上)
下一篇: Vue [前端面试问题