① v-if 和 v-for 那个优先级更高？如果两者写在同一个标签，该如何优化？
- 通过源码了解到render函数中，
v-for优先级高于v-if
- 解决方法：在
v-for外层嵌套一个template标签，在该标签上进行v-if，可能会避免不必要的循环来提高性能。
如果v-for中，item根据条件渲染，则用计算属性，将需要渲染的过滤出来，提高性能。
② 为何组件的data需要是一个函数，而根实例却可以是对象形式？
- 因为
Vue组件可能存在多个实例，如果使用对象形式的data，则会导致他们共用一个data对象，那么状态变更将会影响所有组件实例，这样是不合理的。采用函数形式定义，在初始化data时，源码中的工厂函数会返回全新的data对象，有效规避污染问题。而在vue根实例创建过程中，则不存在该问题。因为根实例只有一个。
③ 为何要使用key？
- 一句话概括：可以提高diff算法效率，提高性能。
- 详细：key的作用是为了高效的更新虚拟DOM，通过源码分析出，patch过程中需要通过key可以精准判断出两个节点是否是同一个，从而避免频繁更新，使得整个patch过程更加高效。减少DOM操作提高性能。
- 另外：不设置key还可能在更新列表时引发一些隐蔽的bug。
④ 介绍以下diff算法？
- 我认为diff算法是虚拟DOM的必要产物，在比较DOM的时候，如果拿两个真实DOM比较，考虑到时间复杂度的话，是不可取的。所以需要采用虚拟DOM来提高比较效率。
- diff过程：
- diff过程整体遵循深度优先、同层比较的策略；比较两组子节点，如果没有找到相同子节点，就会采用通用方法进行遍历比较，查找结束后会按情况处理剩下的节点。借助key通常可以非常精确的找到相同节点。因此整个patch过程非常高效。
⑤ 介绍以下vue的思想
-
vue是渐进式，易用的一个JavaScript框架
渐进式
- 有核心功能和附加产物，如果做做简单功能则学习核心功能即可，如果项目较为庞大需要用到
vue-router、vuex等路由和状态管理插件，则需要额外学习。循序渐进的过程就叫做渐进式。
易用性
- 只需要会css、js、html就可以进行上手开发，文档教程有中文较为详细。
⑥ MVC、MVP、MVVM区别?
- 他们都是一种架构模式，MVVM是由MVC、MVP衍生出来的一种产物。都是为了解决Model和View耦合的问题。
MVC
- 前端的MVC具备着：
view、controller、model三个层面。
- view：负责视图展示，将model中的数据可视化
- controller：负责业务逻辑，根据用户行为对Model数据进行修改
- model：负责保存应用数据，与后端数据进行同步
- 缺点：不得不把一个完整的页面分割，导致代码编写效率低下。
MVP
- 主要把
controller层换成了Presenter 层，减少view层的逻辑操作
- 同事数据流都是双向的，
view不能直接操作model，必须经过presenter层的处理
- 缺点：逻辑都在
presenter层，导致该层过于臃肿
MVVM
-
view、model、viewModel
- view：视图展示层
- model：数据层，与后端数据同步
- viewModel：逻辑层
- 特点：
- viewModel有一套数据响应机制和一套视图更新策略来完成数据的双向绑定。
- 通过事件监听响应view中用户操作修改model中数据。
- 这样就在viewModel中减少了大量的DOM操作代码。使用户专注逻辑，兼顾开发效率和维护性。
⑦ Vue的优化
路由懒加载
const router = new VueRouter({
routes:[
{path:'/foo' , component: () => {import ( './Foo.vue' ) } }
]
})
keep-alive 缓存页面
<template>
<div id="app">
<keep-alive>
<router-view />
</keep-alive>
</div>
</template>
v-show 渲染常切换组件
v-for避免和v-if同时出现在一个标签
- 因为v-for 比 v-if优先级高，这会造成渲染错误。
- 解决方法：在v-for外层包一个 template标签，在template标签上进行v-if
长列表优化（策略：利用cpu资源换内存资源）
- 如果是静态数据，那么可以将数据在计算属性中返回并且Object.freeze()进行冻结，这样可以减少读取操作的次数。
- 如果是动态数据，可以采用虚拟滚动：监听用户滚动行为，做出响应视图更新（只渲染少部分内容区域）
- 虚拟滚动插件：
vue-virtual-scroller 、vue-virtual-scroll-list
事件销毁
- 订阅发布事件
- 定时器任务
- vue组件销毁时，会自动解绑它的全部指令以及事件监听器，但是仅限于组件本身的事件。
图片懒加载
<img v-lazy="1.png">
第三方插件按需引入
变量本地化
- 遇到需要频繁操作的变量，建议用变量存到本地，在进行操作，可以减少读取操作。
SSR 服务端渲染
