web开发要学多久，学习路线图必不可少

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设计模式

最后

不管是要离职还是继续坚持，最重要的是要走出舒适区，可能我们还只是工作了两三年，没有这种感觉，但凡事要做长远打算，按照自己的节奏去走好每一步。小编为面试的小伙伴们准备了前端面试资料和前端学习思维导图及资料，免费分享给大家，希望在想走出困境或离开舒适区时，对你有帮助。

-1627022580000)]
[外链图片转存中…(img-xm4WclEE-1627022580002)]

点击这里免费领取上述资料