美文网首页vue面试题Vue.js
2021 Vue面试中,经常会被问到的Vue高频面试题集中整理,

2021 Vue面试中,经常会被问到的Vue高频面试题集中整理,

作者: 程序员阿野 | 来源:发表于2021-04-13 18:52 被阅读0次

    金三银四,国内互联网招聘市场继续发力,岗位竞争空前激烈。问了几位 HR 朋友,发现了几种声音:

    “投简历的人挺多,但是合适的却很少。”

    “好不容易挖来人,结果2轮面试被刷了,现在大厂搬砖的也是参差不齐...”

    “在招前端,要么学历不够,要么只会纸上谈兵,要么能力一般,还狮子大张口....”

    好岗位的确不缺,匹配者却很少。

    大厂,高薪,高等级人人想要,门槛却一个比一个高。

    不过,话说回来,跳槽成功的人确实也不在少数,福利待遇也确实不赖。前不久,朋友超人就通过三轮面试,跳槽进了阿里,继续做前端。

    所以说,打铁还需自身硬。他做了三年前端,工作务实,能干,跳槽大厂也在情理之中!

    说到面试,问了他的情况。他说“ Vue实现原理问挺多,还有它的各种优化手段。再有就是业务逻辑.......“

    照此看来,对于现在的前端求职者,只会用 Vue是不够的了,还需深挖它的内部框架和实现原理。

    接下来,超全的前端 Vue学习资料这就来啦,需要的朋友赶紧收藏~

    Vue知识要点

    为什么 Vuex的mutation中不能做异步操作?

    • Vuex中所有的状态更新的唯一途径都是mutation,异步操作通过 Action 来提交 mutation实现,这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
    • 每个mutation执行完成后都会对应到一个新的状态变更,这样devtools就可以打个快照存下来,然后就可以实现 time-travel 了。如果mutation支持异步操作,就没有办法知道状态是何时更新的,无法很好的进行状态的追踪,给调试带来困难。

    为什么v-for和v-if不建议用在一起

    • 当 v-for 和 v-if 处于同一个节点时,v-for 的优先级比 v-if 更高,这意味着 v-if 将分别重复运行于每个 v-for 循环中。如果要遍历的数组很大,而真正要展示的数据很少时,这将造成很大的性能浪费
    • 这种场景建议使用 computed,先对数据进行过滤

    组件中的data为什么是一个函数?

    • 一个组件被复用多次的话,也就会创建多个实例。本质上,这些实例用的都是同一个构造函数。
    • 如果data是对象的话,对象属于引用类型,会影响到所有的实例。所以为了保证组件不同的实例之间data不冲突,data必须是一个函数。

    nextTick的实现原理是什么?

    • 在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后立即使用 nextTick 来获取更新后的 DOM。
    • nextTick主要使用了宏任务和微任务。
    • 根据执行环境分别尝试采用Promise、MutationObserver、setImmediate,如果以上都不行则采用setTimeout定义了一个异步方法,多次调用nextTick会将方法存入队列中,通过这个异步方法清空当前队列。

    Vue不能检测数组的哪些变动?Vue 怎么用 vm.$set() 解决对象新增属性不能响应的问题?

    • Vue 不能检测以下数组的变动:
      • 第一类问题
        // 法一:Vue.set Vue.set(vm.items, indexOfItem, newValue)
        // 法二:Array.prototype.splice vm.items.splice(indexOfItem, 1, newValue)
      • 第二类问题,可使用 splice:vm.items.splice(newLength)
      • 当你利用索引直接设置一个数组项时,例如vm.items[indexOfItem] = newValue
      • 当你修改数组的长度时,例如:vm.items.length = newLength
        解决办法:
    • vm. $set 的实现原理是:
      • 如果目标是数组,直接使用数组的 splice 方法触发相应式;
      • 如果目标是对象,会先判读属性是否存在、对象是否是响应式,最终如果要对属性进行响应式处理,则是通过调用defineReactive 方法进行响应式处理( defineReactive 方法就是 Vue 在初始化对象时,给对象属性采用 Object.defineProperty 动态添加 getter 和 setter 的功能所调用的方法)

    Vue中组件生命周期调用顺序是什么样的?

    • 组件的调用顺序都是先父后子,渲染完成的顺序是先子后父。
    • 组件的销毁操作是先父后子,销毁完成的顺序是先子后父。


      在这里插入图片描述

    Vue 热点面试题

    1. vue-cli工程
    2. vue核心知识点
    3. vue-router
    4. vuex
    5. http请求
    6. UI样式
    7. 常用功能
    8. MVVM设计模式
    在这里插入图片描述

    相关文章

      网友评论

        本文标题:2021 Vue面试中,经常会被问到的Vue高频面试题集中整理,

        本文链接:https://www.haomeiwen.com/subject/pcbclltx.html