我以为我对Vue很了解，直到我遇到了阿里的面试官

ゝ一纸荒年。 2022-11-18 05:42 222阅读 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中组件生命周期调用顺序是什么样的？**

*  组件的调用顺序都是先父后子,渲染完成的顺序是先子后父。
 *  组件的销毁操作是先父后子，销毁完成的顺序是先子后父。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81NjEzNDM4MQ_size_16_color_FFFFFF_t_70]

#### Vue 热点面试题 ####

> 1.  vue-cli工程
> 2.  vue核心知识点
> 3.  vue-router
> 4.  vuex
> 5.  http请求
> 6.  UI样式
> 7.  常用功能
> 8.  MVVM设计模式

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81NjEzNDM4MQ_size_16_color_FFFFFF_t_70 1]

### Web前端资料，思维导图+实战源码+知识点、面试题+精品课程 ###

> [【完整资料下载地址（点击此处）】][Link 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81NjEzNDM4MQ_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81NjEzNDM4MQ_size_16_color_FFFFFF_t_70]: /images/20221022/b83de6563219446c8a49c44ddedfe191.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81NjEzNDM4MQ_size_16_color_FFFFFF_t_70 1]: /images/20221022/849fd6b575b54480893a461843665b56.png
[Link 1]: https://jq.qq.com/?_wv=1027&k=59wygKyt
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81NjEzNDM4MQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/341503064fec4e12ac6a9415d58d7e21.png