Vue面试准备 1. v-if和v-for哪个优先级更高？如果两个同时出现，应该怎么优化得到更好的性能？ 2. Vue

1. v-if和v-for哪个优先级更高？如果两个同时出现，应该怎么优化得到更好的性能？

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

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

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

3.vue中key的作用和工作原理吗？说说你对它的理解

// 首次循环patch A 
A B C D E
A B F C D E
// 第2次循环patch B
B C D E 
B F C D E
// 第3次循环patch E
C D E
F C D E
// 第4次循环patch D
C D 
F C D
// 第5次循环patch C
C
F C
// oldCh全部处理结束，newCh中剩下的F，创建F并插入到C前面

  1. key的作用主要是为了高效的更新虚拟DOM，其原理是vue在patch过程中通过key可以精准判断两 个节点是否是同一个，从而避免频繁更新不同元素，使得整个patch过程更加高效，减少DOM操 作量，提高性能。
  2. 另外，若不设置key还可能在列表更新时引发一些隐蔽的bug
  3. vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。

Diff算法

  1.diﬀ算法是虚拟DOM技术的必然产物：通过新旧虚拟DOM作对比（即diﬀ），将变化的地方更新在真 实DOM上；另外，也需要diﬀ高效的执行对比过程，从而降低时间复杂度为O(n)。
  2.vue 2.x中为了降低Watcher粒度，每个组件只有一个Watcher与之对应，只有引入diﬀ才能精确找到 发生变化的地方
  3.vue中diﬀ执行的时刻是组件实例执行其更新函数时，它会比对上一次渲染结果oldVnode和新的渲染 结果newVnode，此过程称为patch。
  4.diﬀ过程整体遵循深度优先、同层比较的策略；两个节点之间比较会根据它们是否拥有子节点或者文 本节点做不同操作；比较两组子节点是算法的重点，首先假设头尾节点可能相同做4次比对尝试，如果 没有找到相同节点才按照通用方式遍历查找，查找结束再按情况处理剩下的节点；借助key通常可以非 常精确找到相同节点，因此整个patch过程非常高效。

谈一谈对vue组件化的理解

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

谈一谈对vue设计原则的理解

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

vue为什么要求组件模版只能有一个根元素?

实例化Vue时 Vue其实并不知道哪一个才是我们的入口。如果同时设置了多个入口，那么vue就不知道哪一个才是这个‘类’

在webpack搭建的vue开发环境下，使用单文件组件时：

 template这个标签，它有三个特性：
 1. 隐藏性：该标签不会显示在页面的任何地方，即便里面有多少内容，它永远都是隐藏的状态，设置 了display：none； 
 2. 任意性：该标签可以写在任何地方，甚至是head、body、sciprt标签内； 
 3. 无效性：该标签里的任何HTML内容都是无效的，不会起任何作用；只能innerHTML来获取到里面 的内容。
一个vue单文件组件就是一个vue实例，如果template下有多个div那么如何指定vue实例的根入口呢， 为了让组件可以正常生成一个vue实例，这个div会自然的处理成程序的入口，通过这个根节点，来递归 遍历整个vue树下的所有节点，并处理为vdom，后再渲染成真正的HTML，插入在正确的位置。

diﬀ中patchvnode方法，用来比较新旧节点，深度优先同级比较

谈谈你对MVC、MVP和MVVM的理解

这三者都是框架模式，它们设计的目标都是为了解决Model和View的耦合问题。
MVC模式出现较早主要应用在后端，如Spring MVC、ASP.NET MVC等，在前端领域的早期也有应用，如Backbone.js。它的优点是分层清晰，缺点是数据流混乱，灵活性带来的维护性问题。
MVP模式在是MVC的进化形式，Presenter作为中间层负责MV通信，解决了两者耦合问题，但P层过于臃肿会导致维护问题。
MVVM模式在前端领域有广泛应用，它不仅解决MV耦合问题，还同时解决了维护两者映射关系的大量繁杂代码和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复用DOM

    <template> 
        <div class="cell"> 
            <!--这种情况用v-show复用DOM，比v-if效果好--> 
            <div v-show="value" class="on"> 
                <Heavy :n="10000"/>  
            </div>  
            <section v-show="!value" class="off"> 
                <Heavy :n="10000"/>  
            </section> 
        </div>
    </template>

v-for 遍历避免同时使用 v-if (如果有条件判断就用计算属性过滤数据）

    <template>  
        <ul>  
            <li v-for="user in activeUsers" key="user.id">   
                {{ user.name }}  
            </li> 
        </ul>
   </template> 
   <script>  
       export default {     
           computed: {     
               activeUsers: function () {        
                   return this.users.filter(function (user) {    
                       return user.isActive   
                   })     
                }   
             }
           } 
       </script>

长列表性能优化

如果列表是纯粹的数据展示，不会有任何改变，就不需要做响应化

    export default { 
        data: () => ({    users: []  }),
        async created() { 
            const users = await axios.get("/api/users");  
            this.users = Object.freeze(users); 
        } 
    };

如果是大数据长列表，可采用虚拟滚动，只渲染少部分区域的内容参考vue-virtual-scroller vue-virtual-scroll-list

<recycle-scroller  class="items"  :items="items"  :item-size="24" > 
    <template v-slot="{ item }">   
        <FetchItemView :item="item" @vote="voteItem(item)"/> 
   </template>
</recycle-scroller

事件的销毁
- Vue 组件销毁时，会自动解绑它的全部指令及事件监听器，但是仅限于组件本身的事件
图片懒加载
- 对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载，等到滚动到可视区域后再去加载
第三方插件按需引入
- 像element-ui这样的第三方组件库可以按需引入避免体积太大。

无状态的组件标记为函数式组件

<template functional> 
    <div class="cell">
        <div v-if="props.value" class="on"></div>
        <section v-else class="off"></section> 
   </div>
</template>
<script>
    export default {  props: ['value'] }
</script>

子组件分割

变量本地化

    <template>  
        <div :style="{ opacity: start / 300 }">    {{ result }}  </div> 
    </template>
    
    <script> 
    import { heavy } from '@/utils'
    export default {
    props: ['start'], 
    computed: {   
        base () { return 42 },    
        result () {     
        const base = this.base // 不要频繁引用this.base 
        let result = this.start 
        for (let i = 0; i < 1000; i++) { 
                result += heavy(base)     
            }     
            return result  
           }
          }
       } 
  </script>

vue3.0 新特性

更快
- 虚拟DOM重写
- 优化slots的生成（vue3中可以单独重新渲染父级和子级确保实例正确的跟踪依赖关系避免不必要的父子组件重新渲染）
- 静态树提升（使用静态树提升，这意味着 Vue 3 的编译器将能够检测到什么是静态的，然后将其提升，从而降低了渲染成本。）
  - 跳过修补整棵树，从而降低渲染成本
  - 即使多次出现也能正常工作
- 静态属性提升
- 基于Proxy的响应式系统（Vue 2的响应式系统使用 Object.deﬁneProperty 的getter 和 setter。Vue 3 将使用 ES2015 Proxy 作为其观察机制，这将会带来如下变化：）
  - 组件实例初始化的速度提高100％
  - 使用Proxy节省以前一半的内存开销，加快速度，但是存在低浏览器版本的不兼容
  - 为了继续支持 IE11，Vue 3 将发布一个支持旧观察者机制和新 Proxy 版本的构建
更小：通过摇树优化核心库体积
更容易维护：TypeScript + 模块化
更加友好
- 跨平台：编译器核心和运行时核心与平台无关，使得Vue更容易与任何平台（Web、 Android、iOS）一起使用
更容易使用
- 改进的TypeScript支持，编辑器能提供强有力的类型检查和错误及警告
- 更好的调试支持
- 独立的响应化模块
- Composition API

Vue面试准备

1. v-if和v-for哪个优先级更高？如果两个同时出现，应该怎么优化得 到更好的性能？

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

3.vue中key的作用和工作原理吗？说说你对它的理解

Diff算法

谈一谈对vue组件化的理解

谈一谈对vue设计原则的理解

vue为什么要求组件模版只能有一个根元素?

谈谈你对MVC、MVP和MVVM的理解

vue性能优化的方法

vue3.0 新特性

1. v-if和v-for哪个优先级更高？如果两个同时出现，应该怎么优化得到更好的性能？