明灭的烟头 / IT / 2020前端最新面试题(vue篇)

分享

   

2020前端最新面试题(vue篇)

2020-10-24  明灭的烟头
由于疫情原因,原本每年的“金三银四”仿佛消失,随之而来的是找工作的压力,这里给要面试的小伙伴们总结了到目前为止我遇到的前端面试题,仅供参考哦,第一次写博客,如有错误之处,还请指出。

一. vue方面










10.介绍下什么是<keep-alive />
11.watch能监听到数组的pop行为吗
12.watch如何实现深度监听
13.vue中如何解决页面不重新渲染问题



1.vue-router有两种传参方式
(1)通过在router.js文件中配置path的地方动态传递参数 eg: path: '/detail/:id' 然后在组件内通过this.$route.params.id即可获取

(2).在router-link标签中传递参数

<router-link :to={params: {x: 1}} />
  • 1

  • 2

  • 3

  • 4

  • 5

  • 1

  • 2

  • 3

  • 4

  • 5

也通过this.$route.params获取

注意:这里通过router-link传递参数的方式是隐式传参

2.v-if和v-for一起使用的弊端以及解决办法
由于v-for的优先级比v-if高,所以导致每循环一次就会去v-if一次,而v-if是通过创建和销毁dom元素来控制元素的显示与隐藏,所以就会不停的去创建和销毁元素,造成页面卡顿,性能下降。

解决办法:在v-for的外层或内层包裹一个元素来使用v-if

3.beforeDestroy里面一般进行什么操作
beforedestoryed是组件销毁之前执行的一个生命周期,在这个生命周期里,我们可以进行回调函数或定时器的清除,不用的dom元素的清除等
4.vue同级组件间怎么传值
1.如果是兄弟组件,可通过父元素作为中间组件进行传值 2.通过创建一个bus,进行传值
// 创建一个文件,定义bus中间件,并导出const bus = new Vue()// 在一个组件中发送事件bus.$emit('事件名称', 传递的参数)// 在另一个组件中监听事件bus.$on('事件名称', 得到传过来的参数)123456123456
5.vue中父组件如何获取子组件的属性和方法
vue中通过在子组件上定义ref属性来获取子组件的属性和方法,代码如下:
// 这里是父组件<templete><child ref='child'/></templete><script>method: {getChild () {this.$refs.child.属性名(方法名)}}</script>
  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

  • 11

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

  • 11

6.watch和computed的区别
watch作用通常是由一个值影响多个值的改变并且能监听到这个值变化时,会去执行一个回调函数,此时我们可以在这个回调函数中做一些逻辑处理

computed是根据依赖的值衍生出一个新的值,并且依赖的值可以有多个,只有当被依赖的值发生改变时,才会重新去执行计算

7.vue父组件和子组件生命周期的顺序
1.渲染过程顺序:

父组件beforeCreate() -> 父组件created() -> 父组件beforeMount() -> 子组件beforeCreate() ->子组件created() -> 子组件beforeMount() -> 子组件mounted() -> 父组件mounted()
2.更新过程顺序:
父组件更新过程:
父组件beforeUpdate() -> 父组件updated()
子组件更新过程:
父组件beforeUpdate() -> 子组件beforeUpdate() -> 子组件updated() -> 父组件updated()
3.销毁过程
父组件beforeDestroy() -> 子组件beforeDestroy() -> 子组件destroyed() -> 父组件destroyed()

8.vue中父组件能监听到子组件的生命周期吗
父组件能够监听到子组件的生命周期,通过@hook:进行监听代码如下:
// 这里是父组件<template><child@hook:mounted='getChildMounted'/></template><script>method: {getChildMounted () {// 这里可以获取到子组件mounted的信息}}</script>1234567891011121312345678910111213
9.vue中的事件修饰符主要有哪些?分别是什么作用

.stop: 阻止事件冒泡
.native: 绑定原生事件
.once: 事件只执行一次
.self:将事件绑定在自身身上,相当于阻止事件冒泡
.prevent: 阻止默认事件
.caption: 用于事件捕获

10.介绍下什么是keep-alive
keep-alive是用于做组件缓存的,只会执行一次,不会被销毁。被keep-alive包裹的组件,没有create和beforeDestroyed等方法,但是有activated和deactivated方法。
11.watch能监听到数组的pop行为吗
对于有返回值的数据,watch就能监听到,比如数组的pop,push, unshift,map等行为。
12.watch如何实现深度监听
watch: {obj: {handler: function(val) {},deep: true // 深度监听}}
  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

13.vue中如何解决页面不重新渲染问题
(1).修改对象属性后页面未重新渲染可以使用 this.$set(对象名称, '属性名', '属性值') (2).使用this.$forceUpdate()方法可重新渲染页面

2020前端最新面试题(HTML,CSS与JavaScript篇)

2020前端最新面试题(HTML,CSS与JavaScript篇)

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多
    喜欢该文的人也喜欢 更多

    ×
    ×

    ¥.00

    微信或支付宝扫码支付:

    开通即同意《个图VIP服务协议》

    全部>>