① 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：逻辑层
• 特点：
  1. viewModel有一套数据响应机制和一套视图更新策略来完成数据的双向绑定。
  2. 通过事件监听响应view中用户操作修改model中数据。
  3. 这样就在viewModel中减少了大量的DOM操作代码。使用户专注逻辑，兼顾开发效率和维护性。

⑦ Vue的优化

路由懒加载

• 动态引入组件，需要用到的时候在进行加载。

const router = new VueRouter({
  routes:[
    {path:'/foo' , component: () => {import ( './Foo.vue' ) } }
  ]
})

keep-alive 缓存页面

• 通过配置include，exclude进行区分。

<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组件销毁时，会自动解绑它的全部指令以及事件监听器，但是仅限于组件本身的事件。

图片懒加载

• vue-lazyload插件

 <img v-lazy="1.png">

第三方插件按需引入

• 如 element-ui里的组件

变量本地化

• 遇到需要频繁操作的变量，建议用变量存到本地，在进行操作，可以减少读取操作。

SSR 服务端渲染