常见的Vue面试题

1、v-for和v-if的优先级

先判断了条件再看是否执行!
结论:

1.显然v-for优先于v-if被解析(把你是怎么知道的告诉面试官)
2.如果同时出现，每次渲染都会先执行循环再判断条件,无论如何循环都不可避免，浪费了性能
3.要避免出现这种情况，则在外层嵌套template,在这一-层进行v-if判断， 然后在内部进行v-for循环

2、Vue组件data为什么必须是个函数而Vue的根实例则没有此限制?
源码中找答案: src\corelinstance\state.js - initData()
函数每次执行都会返回全新data对象实例

结论
Vue组件可能存在多个实例，如果使用对象形式定义data，则会导致它们共用一个data对象，那么状态变更将会影响所有组件实例，这是不合理的;采用函数形式定义，在initData时会将其作为工厂函数返回全新data对象，有效规避多实例之间状态污染问题。而在Vue根实例创建过程中则不存在该限制，也是因为根实例只能有一个，不需要担心这种情况。

3、你知道vue中key的作用和工作原理吗?说说你对它的理解。源码中找答案:src\core\vdom\patch.js-updateChildren()

结论

1. key的作用主要是为了高效的更新虚拟DOM,其原理是vue在patch过程中通过key可以精准判断两个节点是否是同一个，从而避免频繁更新不同元素，使得整个patch过程更加高效，减少DOM操作量,提高性能。

2.另外，若不设置密钥还可能在列表更新时引发-些隐蔽的错误

3. vue中在使用相同标签名元素的过渡切换时,也会使用到key属性，其目的也是为了让vue可以区分它们，否则Vue只会替换其内部属性而不会触发过渡效果.

4. 你怎么理解vue中的diff算法?

源码分析1:必要性，lifecycle.js- mountComponent()
组件中可能存在很多个data中的key使用
源码分析2:执行方式,patch.js- patchVnode()
patchVnode是diff发生的地方，整体策略:深度优先，同层比较
源码分析3:高效性,patch.js-updateChildren()

6. 
   总结
   1.diff算法是虚拟DOM技术的必然产物:通过新旧虚拟DOM作对比(即diff)，将变化的地方更新在真实DOM上;另外，也需要diff高效的执行对比过程，从而降低时间复杂度为O(n)。
   2.vue2.x中为了降低Watcher粒度，每个组件只有一个Watcher与之对应，只有引入diff才能精确找到发生变化的地方。
   3.vue中diff执行的时刻是组件实例执行其更新函数时，它会比对上一次渲染结果oldVnode和新的渲染结果newVnode，此过程称为patch。
   4.dif寸程熬体尊循深度代先，同县比协的策略，两个节占之间比较会根据它们是否拥有子节占或者文本节占做不同操作;比较两组子节点是算法的重点，首先假设头尾节点可能相同做4次比对尝试，如果没有找到相同节点才按照通用方式遍历查找，查找结束再按情况处理剩下的节点;借助key通常可以非常精确找到相同节点，因此整个patch过程非常高效。
   5、谈一谈对vue组件化的理解?
   回答总体思路:
   组件化定义、优点、使用场景和注意事项等方面展开陈述，同时要强调vue中组件化的一些特点。
   源码分析1:组件定义
   //组件定义
   vue. component('comp'， {template: '<div>this is a component</div>'})
   组件定义，src\core\global-api\assets.js
   <template>
   <div>this is a component</div>
   </template>
   vue-loader会编译template为render函数，最终导出的依然是组件配置对象。
   开i
   总结

   1.组件是独立和可复用的代码组织单元。组件系统是Vue核心特性之一，它使开发者使用小型、独立和通常可复用的组件构建大型应用;
   2.组件化开发能大幅提高应用开发效率、测试性、复用性等;
   3.组件使用按分类有:页面组件、业务组件、通用组件;
   4.vue的组件是基于配置的，我们通常编写的组件是组件配置而非组件，框架后续会生成其构造函数，它们基于VueComponent，扩展于Vue;
   5.vue中常见组件化技术有:属性prop，自定义事件，插槽等，它们主要用于组件通信、扩展等;
   6.合理的划分组件，有助于提升应用性能;
   7.组件应该是高内聚、低耦合的;
   8.遵循单向数据流的原则。

6、谈一谈对vue设计原则的理解?
在vue的官网上写着大大的定义和特点:
。渐进式JavaScript框架
●易用、灵活和高效
所以阐述此题的整体思路按照这个展开即可。
渐进式JavaScript框架:
与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动
易用性
vue提供数据响应式、声明式模板语法和基于配置的组件系统等核心特性。这些使我们只需要关注应用的核心业务即可，只要会写js、html和css就能轻松编写vue应用。
灵活性
渐进式框架的最大优点就是灵活性，如果应用足够小，我们可能仅需要vue核心特性即可完成功能;随着应用规模不断扩大，我们才可能逐渐引入路由、状态管理、vue-cli等库和工具，不管是应用体积还是学习难度都是一个逐渐增加的平和曲线。
高效性
超快的虚拟DOM和diff算法使我们的应用拥有最佳的性能表现。
追求高效的过程还在继续，vue3中引入Proxy对数据响应式改进以及编译器中对于静态内容编译的改进都会让vue更加高效。
灵活性
渐进式框架的最大优点就是灵活性，如果应用足够小，我们可能仅需要vue核心特性即可完成功能;随着应用规模不断扩大，我们才可能逐渐引入路由、状态管理、vue-cli等库和工具，不管是应用体积还是学习难度都是一个逐渐增加的平和曲线。
高效性
超快的虚拟DOM和diff算法使我们的应用拥有最佳的性能表现。
追求高效的过程还在继续，vue3中引入Proxy对数据响应式改进以及编译器中对于静态内容编译的改进都会让vue更加高效。

谈谈你对MVC、MVP和MVVM的理解?
总结
。这三者都是框架模式，它们设计的目标都是为了解决Model和View的耦合问题。
●MVC模式出现较早主要应用在后端，如Spring MVC、ASP.NETMVC等，在前端领域的早期也有应用，如Backbonejs。它的优点是分层清晰，缺点是数据流混乱，灵活性带来的维护性问题。
，MVP模式在是MVC的进化形式，Presenter作为中间层负责MV通信，解决了两者耦合问题，但P层过于臃肿会导致维护问题。
，MVM模式在前端领域有广泛应用，它不仅解决MV耦合问题，还同时解决了维护两者映射关系的大量繁杂代码和DOM操作代码，在提高开发效率、可读性同时还保持了优越的性能表现。