目录
十二、组件间传值方式?兄弟组件怎么传值?父组件绑定事件传子组件?
前言
今天参加了一个面试 ,主要是围绕vue来问的,记录一下吧~
一、说一下虚拟DOM?
1.虚拟dom是什么?
虚拟dom是基于js模拟的一个dom节点。
2.虚拟dom是怎么产生的?
在vue中当我们写下一句代码模板的时候,会发生一下步骤:
- vue会把模块通过渲染函数(render)生成一个虚拟节点(VNode)。
- 当Model发生变化的时候,vue又会生成一个新的虚拟dom,这时候vue会通过diff算法对比新旧dom之间的差距,然后通过path算法把有差异的地方渲染到页面上,从而实现了局部更新。
3.虚拟dom的优点
因为是通过虚拟节点进行对比再局部更新,避免了直接操作真实dom,减少了浏览器的重绘和重排,从而提高了浏览器的性能,减少内存的消耗。
同时由于虚拟dom是基于js的,所以具有跨平台的优点,可在node 等环境中应用。
二、说一下vue-router?有几种模式?
1.vue-router是什么?
vue-router是vue中的路由管理器,vue是单页面开发的,通过路由来构建页面使得不用刷新页面就可以更新dom,降低dom消耗,在vue中非常的重要。(但是它也有缺点,就是首次加载比较慢。)
vue-router有三个组件:
router-link 跳转(实质是a标签,可以设置to属性跳转和传参)
router-view 子级路由显示
keep-alive 路由缓存(如tab切换,记录之前状态)
2.vue-router有几种模式?区别是什么?
router中有两种模式:hash(哈希模式)和history(历史模式)。
2.1 hash模式
路由默认hash模式,通过hash模式模拟url,这会让url中有个#符号,标志着当前处于hash模式,例如:http://locahost:8080/#/index。
当#后面的路由发生变化的时候,不会重新发起请求,但是会更新页面,这不就是适用于单页面页面嘛。
可以使用 window.location.hash获取值
原理:
hash模式通过hashChange方法监听hash变化,每个页面都有不同的hash值,即使页面刷新,也能定位到刷新时的哪个页面。
方法:
在这种模式下,会生成一个hashHistory对象,这个对象有两种方法:push()和replace()。
例如,HashHistory.push(’/log‘)会将/log这个路由放在栈顶端,此时页面就会跳转过去。
HashHistory.replace('/log')会将栈中最顶端的路由替换调,此时页面也会跳转过去。
优点:
- hash不存在http请求中,因此hash值改变不会重新加载页面
- hash可以通过hashChange方法监听,可以前进或后退(历史访问栈中有记录)
- 兼容性比较好
缺点:
- 有#符号,不利于seo搜索,看起来不美观
- 只有路由不同于当前路由才会触发hashChange方法
- 只能添加短字符串
2.1 history模式
history更像请求一样,没有了#符号,每次都相当于一个请求,但是需要服务器配置,如果没有配置则会出现404的页面。
可以通过window.location.pathname获取值
原理
history是基于h5中的pushState()和replaceState()和浏览器的popState()。例如:http://locahost:8080/index。
方法:
pushState()改变地址,不会发起请求;window.history.pushState(stateObj,title,url);
replaceState()可以读取历史栈中的记录,也修改浏览器记录;window.history.replaceState(stateObj,title,url)
注意:可以指定stateObj为任意类型数据,title可以后续使用
优点:
- 没有#,看起来美观了
- 即使输入一模一样的路由,也会触发popState(),也会把记录记录再栈中
缺点:
- 属于http请求,借助history,pushState()实现页面无刷新跳转,会请求服务器,所以必须和服务端请求url保持一致,否则出现404
- 兼容性差,特定浏览器才支持
3.vue-router有哪些方法?
3.1 跳转方法
this.$router.push() //跳转路由
this.$router.replace() //替换当前路由
this.$router.go() //可传入正负,表示前进或后退
this.$router.back() //回退上一步
3.2 传参方式
这里先说一下,route里面包含了路由信息 ,例如:query params path fullpath matched等,通常获取信息就是用这个,如:this.$route.query.id
router则是实例,包含跳转方法和钩子函数。如:this.$router.push()
3.2.1 声明式导航传参(不建议)
第一种,用?号拼接
传参(?拼接):
<router-link :to="{path:'/home?id=111'}"></router-link>
取值:
this.$route.query.id
第二种,需要在route里面配置:
route.js里面配置:
{
path: '/home/:id',//配置属性
name: 'home',
component: () => import('@/views/home/index'),
},
传值:
<router-link :to="{path:'/home/111'}"></router-link>
取值:
this.$route.params.id
3.2.2 编程式传参(实际开发中常用)
第一种 query ,指定path
传值:
this.$router.push({
path:'/home',//指定path
query:{
id:'111'
}
})
取值:
this.$route.query.id
第二种 params,指定name
传值:
this.$router.push({
name:'home', //指定params
params:{
id:'111'
}
})
取值:
this.$route.params.id
params和query的区别?
直观的区别就是query显示在url上,params不显示在路由上。
页面一刷新,query不会不见,params会不见。
4.路由使用步骤?
三个步骤:
引入并应用vue-router —— 创建路由规则和对象 —— 实例化路由对象
这里要说一下,我们通常会重定向根路径,让用户输入 / 时候跳转home页面,如下:
{
path: '/', //根目录路由为/
component: Layout, //指定使用Layout组件布局
redirect: '/home', //重定向至/home页面
}
同时在route对象最后,协商通配符* ,当没有以上页面的时候,即可以跳转到404页面,如下:
{
path: '*', // 此处需特别注意置于最底部
redirect: '/404',
},
5.路由导航守卫?
除了跳转和配置页面这些功能,我们还可以用路由来对跳转前后做处理,最常见的如:没有登陆却输入首页的路由,此时就需要路由导航。
路由导航守卫有三种:全局导航守卫、单路由导航守卫、组件内导航守卫
5.1 全局导航守卫
beforeEach: 全局前置守卫 ,进入路由之前
beforeResolve:全局解析守卫,在beforeRouteEnter之后调用
afterEach:全局后置守卫 ,进入路由之后
最常见的就是利用beforeEach判断是否登录,未登录则跳转到登录页面;
跳转新页面后利用afterEach后将滚动条重置到顶部
5.2 单路由导航守卫
beforeEnter 页面进入之前 如果不想写全局的可以配置在route单个路由里面,使用方法和beforeEach差不多
5.3 组件内导航守卫
beforeRouteEnter:进入组件之前,这个时候dom还没生成,所以要用next()去访问from to next
beforeRouteUpdate: 两个相同组件参数被改变时会触发,如从详情页1 跳转到详情页2 ,url中的参数改变了,就会触发这个方法
beforeRouteLeave:离开组件时调用
6.如何动态配置路由?
可以在路由表中配置constantRouter和ansycRouter两个路由,constant路由对象包括常用的login register 404等页面 ,anyncRouter则是后端返回的角色的路由 ,我们拿到数据后通过 router.addRoutes(anyncRouter)将权限加进去就可以啦。
当然以上针对多种角色,如果只有一两种角色我们可以前端自己通过meta在路由中配置,根据后端返回的角色信息去配置路由。
三、v-if和v-show的区别?性能哪个更好?
v-if和v-show都可以控制dom的显示和隐藏,v-if操纵dom渲染与否,v-show只是通过display:none把元素隐藏了,实际dom中依旧存在。
v-show适用于页面频繁切换的场景。v-if适用于不被频繁切换的场景。
v-show是渲染成本高,v-if是dom切换成本高。相对来说,v-show比v-if的性能好一些,因为v-if操作dom消耗性能。
四、盒子塌陷问题?如何解决?
盒子塌陷场景常见于外盒子设置固定款 ,内盒子设置百分比且有margin或padding的时候。解决方案有很多种,目前认为最好的是是使overflow:hidden让他形成BFC就不会出现这种情况啦。
五、什么阶段可以操作dom?
这里考察vue生命周期(可以熟悉一下)
在mounted的时候可以操纵dom,因为此时dom已经渲染完成了。
1. 什么时候可以发起请求呢?
created、beforeMounted、mounted可以发起请求 ,这一阶段data已经创建完成了
2. 如果要发起异步请求在哪一步比较好呢?
created,因为这个阶段能更快的访问服务器,减少加载时间;同时可以保持一致性,因为ssr不支持bedoreMounted mounted
六、讲一下axsio原理?异步原理?
axsio是基于promise的http请求,那么这里就能考察promise的理解,包括有那些方法。。,同时可能会遇见async awiat,问他的原理,然后问和promise的区别 ,优缺点,然后继续追问异步、同步、调用栈、消息队列、事件轮询。。。。所以这里考察的内容就有这些多,这里强推小jerry有话说的系列文章一节课彻底弄懂promise、async、await(一),非常的通俗易懂。
1.axsio是什么?
axsio是基于promise的一个http库,可用在浏览器和node中。本质上用promise实现对XMLHttpRequest的封装,因此需要实现一个ajax,或者基于http,也可以说对ajax进行了封装),所以还是要结合promise对象进行处理。
2.axsio的特性?
- 因为是基于promise的库,所以支持一切promise的api。返回结果也是一个promise对象。
- 在浏览器或node中都能使用。浏览器中创建XMLHttpRequest请求;node中根据核心http实现;
- 有请求拦截器和响应拦截器,对响应数据自动转化为json。
- 支持防御XSRF
- 支持多种请求,如:get post put delete
- 支持取消请求
3.缺点
- 不支持jsonp,需要自己封装
- 基于xhr实现,所以无法在service worker,web worker中使用
4.ajax是什么?
ajax是对xmlHttpRequest对象的封装,实现页面局部更新,提高用户体验感。
主要原理:客户端向ajax引擎发起请求,ajax引擎向服务器发起请求,服务器处理器请求后返回给ajax引擎,ajax将结果显示在页面上,实现局部刷新。
5.ajax步骤
- 创建一个xmlHttpRequest对象
- 设置对象url及验证信息
- 编写回调函数
- 发起请求
- 异步获取返回信息
- js更新dom
6.ajax优缺点
优点:
- 减少服务端请求,提高站点性能
- 局部更新,减少用户等待焦虑,提高了用户体验感
- 被广泛支持的标准化技术,在js浏览器中就可以运行,不需要插件
- 异步实现数据交互,不影响用户页面操作
- 界面和应用相分离
缺点:
- 取消back和history功能,后退键失效
- 对seo和移动端不友好
- 与服务端交互信息暴露,不安全
- 违背url与资源定位的初衷
- 客户端代码多,开发成本高
- 破环程序异常处理机制
7.ajax与axsio的区别?
ajax是对xhr的封装,axsio是promise封装的http请求,其中也对ajax进行了封装。他们都能实现异步更新页面。
8.异步原理?
我们有同步和异步之分,首先说一下同步,同步是指当我们执行程序的时候,按顺序执行,前一步完成了菜会执行下一步,如果有一步卡住了,等待时间就会很长,更恐怖的是后面会奔溃(专业用词叫阻塞),这也是同步的一个缺点。
那异步就是执行程序的时候,把他们都放在一个执行栈中,当执行主线程的时候遇见了耗时比较长的如:setTimeout、setInterver等,就会他们放到消息队列(这里还会有微任务、宏任务、事件轮询,推荐大家去看这一篇:一节课彻底弄懂promise、async、await(一))中去,等当前函数执行到最后的时候,就会去执行消息队列中的任务。执行完后在继续主线程执行。
目前实现异步的方法有两种:promise和async awiat
9.promise和async?
我们程序中出现”回调地狱“,promise的出现就是解决方法之一。
promise和async都是异步实现方法,所以不会出现阻塞的情况。
async是基于promise的,比promise更加的简洁,代码可读性更高,且返回的也是一个promise对象(如果不是对象,就返回表达式结果)。
promise需要.then来调用,async采用了generator的语法糖,所以不需要then直接就能调用并返回结果。
promise用.then和.catch捕捉结果,而async的try catch捕捉。
七、v-if和ref可以一起用吗?
不可以,因为v-if为false的时候不会渲染dom ,此时用ref去获取dom是没有任何作用的。
八、后端做了类型限制前端还需要做吗?优点是什么?
需要,如果前端不校验数据重复提交 http请求过多消耗性能,同时用户体验也不好,所以前端最好还是校验一下。
九、项目中遇见不会的东西怎么做?
先自己思考、不会再问人
要巧用工具:bing stackoverflow等
十、详情返回列表如何让他停留上一页的状态?
可以用vuex保留数据,返回时重新调用
可以用cookie
(我觉得可以用keep-alive 也可行下次试试)
十一、canvas画布用过吗?
略~
十二、组件间传值方式?兄弟组件怎么传值?父组件绑定事件传子组件?
1. 父传子
通过props传参
2. 子传父
子组件:通过$emit(“方法”,“参数”)
父组件:组件上绑定方法使用,如:@click="方法(参数)"
3. 兄弟组件
1.可以通过vuex实现
2.evenbus实现
- js中new Vue实例
- 在要使用的组件中import这个文件
- 传递 :this.root.$emit("方法","参数")
- 监听:this.root.$on(方法)
十三、hr面
上一家离职原因?
职业规划?
期望薪资?
最大收获?
总结
以上就是今天要讲的内容,面试题不仅仅是背题,也会拓展知识面,后续工作中若遇见bug也能第一时间定位问题,这一点是非常重要的,每一个知识点都要熟悉,才会和其他的融会贯通,好啦,今天就到这里啦~希望对你有帮助,后续也会继续更新面试题,感兴趣就关注我等待吧