vue总结

v-for和v-if 优先级

v-for 优先于 v-if，如果外层有判断，可以先在外层判断，如果循环list里面需要有v-if判断，为了防止render函数多次渲染，可以用计算属性对list先进行过滤

vue 组件data为什么必须是个函数而Vue的根实例则没有此限制

vue组件可能存在多个，如果用对象形式定义data，将会公用一个对象，造成污染。采用函数形式定义，在initData时会将其作为工厂函数返回全新data对象，有效规避多实例之间状态污染问题，而在vue根实例创建的过程中则不存在该现在，因为根实例只有一个

vue中key的作用和工作原理

1、key的作用主要是为了高效的更新虚拟DOM，其原理是vue在patch过程中通过key可以精准判断两个节点是否是同一个，从而避免频繁更新不同元素，使得整个patch过程更加高效，减少DOM操作量，提高性能
例：对一个数组插入元素，会从头先开始匹配，当匹配对不上时，会从后再往前匹配，看两数组最后元素是否匹配，当匹配不上后，执行插入操作
2、若不设置key还可能在列表更新时引发一些隐蔽的bug
3、vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分他们，否则vue只会替换其内部属性而不会触发过渡效果

vue组件总结

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

vue设计原则

渐进式JavaScript框架
易用、灵活和高效

渐进式框架：
与其他大型框架不同的是，vue被设计为可以自底向上逐层应用。vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与别的类库结合使用时，vue也完全能够为复杂的单页应用提供驱动

易用性
vue提供数据响应式、声明式模板语法和基于配置的组件系统等核心特性。这些使我们只需要关注应用的核心业务即可，只要会js、html和css就能轻松编写vue应用

灵活性
渐进式框架的最大有点就是灵活性，如果应用足够小，我们可能仅需要vue核心特性即可完成功能，随着应用规模不断扩大，我们才可能逐渐引入路由、状态管理、vue-cli等库和工具，不管是应用体积还是学习难度都是一个逐渐增加的平和曲线

高效性
超快的虚拟DOM和diff算法使我们的应用拥有最佳的性能表现
追求高效的过程还在继续，vue3中引入proxy对数据响应式改进以及编译器中对于静态内容编译的改进都会让vue更加高效

mvc、mvp和mvvm

1、这三者都是框架模式，他们设计的目标都是为了解决modal和view的耦合问题
2、mvc模式出现较早主要应用在后端，它的优点是分层清晰，缺点是数据流混乱，灵活性带来的维护性问题
3、MVP模式是在mvc的进化形式，presenter作为中间层负责MV通信，解决了两者耦合问题，但P层过于臃肿会导致维护问题
4、MVVM模式在前端领域有广泛应用，它不仅解决了MV耦合问题，还同时解决了维护两者映射关系的大量繁杂代码和DOM操作代码，在提高开发效率、可读性同时还保持了优越的性能表现

vue性能优化方法

1、路由懒加载
2、keep-alive缓存页面
3、v-show复用DOM
4、v-for遍历避免同时使用v-if
5、长列表性能优化
如果列表是纯粹的数据展示，不会有任何改变，就不需要做响应化

如果是大数据长列表，可采用虚拟滚动，只渲染少部分区域的内容

6、事件的销毁
vue组件销毁时，会自动解绑它的全部指令及事件监听器，但是仅限于组件本身的事件

7、图片懒加载
对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载，等到滚动到可视区域后再去加载

8、第三方插件按需引入
像element-ui这样的第三方组件库可以按需引入避免体积太大