Vue面试题上1. v-if和v-for哪个优先级更高？如果两个同时出现，应该怎么优化得 2. Vue组件data为什么

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

到更好的性能？

源码中找答案compiler/codegen/index.js

<template>
    <p v-for="child in children" v-if="isFolder">{{child.title}}</p>
    <template v-if="isFolder">
        <p v-for="child in children">{{child.title}}</p> 
    </template>
</template>
<script> 
    const app = new Vue({
      el: '#demo',
      data() {
        return {
          children: [{ title: 'foo' }, { title: 'bar' }]
        }
      },
      computed: {
        isFolder() {
          return this.children && this.children.length > 0
        }
      },
    }); 
    console.log(app.$options.render);
</script>

两者同级时，渲染函数如下：

(function anonymous( ) { with(this){return _c('div',{attrs:{"id":"demo"}},[_c('h1',[_v("v-for和v-if谁的优先 级高？应该如何正确使用避免性能问题？")]),_v(" "), _l((children),function(child){return (isFolder)?_c('p', [_v(_s(child.title))]):_e()})],2)} })

_l包含了isFolder的条件判断两者不同级时，渲染函数如下:

(function anonymous( ) { with(this){return _c('div',{attrs:{"id":"demo"}},[_c('h1',[_v("v-for和v-if谁的优先 级高？应该如何正确使用避免性能问题？")]),_v(" "), (isFolder)?_l((children),function(child){return _c('p', [_v(_s(child.title))])}):_e()],2)} })

先判断了条件再看是否执行_l 结论：

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

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

源码中找答案：src\core\instance\state.js - initData()

Vue.component('comp', { 
    template:'<div @click="counter++">{{counter}}</div>', 
    data: {
        counter: 0
    } 
})
const app = new Vue({ el: '#demo' });

函数每次执行都会返回全新data对象实例,程序甚至无法通过vue检测

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

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

源码中找答案：src\core\vdom\patch.js - updateChildren() 测试代码

<!DOCTYPE html>
<html>
![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/5/4/171ddfc102dcceea~tplv-t2oaga2asx-image.image)
<body>
  <div id="demo">
    <p v-for="item in items" :key="item">{{item}}</p>
  </div>
  <script src="../../dist/vue.js"></script>
  <script>
    // 创建实例 
    const app = new Vue({
      el: '#demo',
      data: { items: ['a', 'b', 'c', 'd', 'e'] },
      mounted() {
        setTimeout(() => {
          this.items.splice(2, 0, 'f')
        }, 2000);
      }
    }); 
  </script>
</body>
</html>

如果使用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前面

结论

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

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

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

总结

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

5. 谈一谈对vue组件化的理解？

思路：组件化定义、优点、使用场景和注意事项等方面展开陈述，同时要强调vue中组件化的一些特点。

源码分析1：组件定义

组件定义，src\core\global-api\assets.js 代码示例

// 组件定义 
Vue.component('comp', { 
    template: '<div>this is a component</div>' 
})

源码片段：src\core\global-api\extend.js

Vue.extend = function (extendOptions: Object): Function {
    extendOptions = extendOptions || {}
    const Super = this
    const SuperId = Super.cid
    const cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {})
    if (cachedCtors[SuperId]) {
      return cachedCtors[SuperId]
    }

    const name = extendOptions.name || Super.options.name
    if (process.env.NODE_ENV !== 'production' && name) {
      validateComponentName(name)
    }

    const Sub = function VueComponent (options) {
      this._init(options)
    }
    Sub.prototype = Object.create(Super.prototype)
    Sub.prototype.constructor = Sub
    Sub.cid = cid++
    Sub.options = mergeOptions(
      Super.options,
      extendOptions
    )
    Sub['super'] = Super

    // For props and computed properties, we define the proxy getters on
    // the Vue instances at extension time, on the extended prototype. This
    // avoids Object.defineProperty calls for each instance created.
    if (Sub.options.props) {
      initProps(Sub)
    }
    if (Sub.options.computed) {
      initComputed(Sub)
    }

    // allow further extension/mixin/plugin usage
    Sub.extend = Super.extend
    Sub.mixin = Super.mixin
    Sub.use = Super.use

    // create asset registers, so extended classes
    // can have their private assets too.
    ASSET_TYPES.forEach(function (type) {
      Sub[type] = Super[type]
    })
    // enable recursive self-lookup
    if (name) {
      Sub.options.components[name] = Sub
    }

    // keep a reference to the super options at extension time.
    // later at instantiation we can check if Super's options have
    // been updated.
    Sub.superOptions = Super.options
    Sub.extendOptions = extendOptions
    Sub.sealedOptions = extend({}, Sub.options)

    // cache constructor
    cachedCtors[SuperId] = Sub
    return Sub
  }

上述代码说明组件继承与Vue示例，同样也集成Vue的options，但自己的options不会污染的Vue。

vue-loader会编译template为render函数，最终导出的依然是组件配置对象。

// 单文件组件
<template> 
    <div>this is a component </div> 
</template>

源码分析2：组件化优点 lifecycle.js - mountComponent()

组件、Watcher、渲染函数和更新函数之间的关系

//  执行渲染和更新，虚拟dom转换为真实dom
export function mountComponent (
  vm: Component,
  el: ?Element,
  hydrating?: boolean
): Component {
  // ...
  let updateComponent
  if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
    // ...
  } else {
    updateComponent = () => {
      // vm._render()：虚拟dom
      vm._update(vm._render(), hydrating)
    }
  }

  // we set this to vm._watcher inside the watcher's constructor
  // since the watcher's initial patch may call $forceUpdate (e.g. inside child
  // component's mounted hook), which relies on vm._watcher being already defined
  new Watcher(vm, updateComponent, noop, {
    before () {
      if (vm._isMounted && !vm._isDestroyed) {
        callHook(vm, 'beforeUpdate')
      }
    }
  }, true /* isRenderWatcher */)
  // ...
}

上述代码可以看出，组件与Watcher是一一对应的，组件化可以缩小diff的范围，从而达到性能优化的目的。

源码分析3：组件化实现构造函数，src\core\global-api\extend.js 实例化及挂载，src\core\vdom\patch.js - createElm()

组件构造函数的生命是自上而下的（跟到叶子），实例化是自下而上的（叶子到跟）

总结

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

6. 谈一谈对vue设计原则的理解？

在vue的官网上写着大大的定义和特点：

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

所以阐述此题的整体思路按照这个展开即可。

渐进式JavaScript框架：

与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

易用性

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

灵活性

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

高效性

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

7. 你了解哪些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>
    <liv-for="user in activeUsers" :key="user.id"> {{ user.name }} </li>
  </ul>
</template>
<script>
  export default {
    computed: {
      activeUsers: function () {
        return this.users.filter(user => user.isActive)
      }
    }
  } 
</script>

长列表性能优化

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

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

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

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

参考vue-virtual-scroller、vue-virtual-scroll-list

事件的销毁

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

图片懒加载

对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载，等到滚动到可视区域后再去加载。
```
<img v-lazy="/static/img/1.png">
```
参考vue-lazyload

第三方插件按需引入

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

import Vue from 'vue'; 
import { Button, Select } from 'element-ui'; 
Vue.use(Button)
Vue.use(Select)

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

<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>
    <ChildComp />
  </div>
</template>
<script>
  export default {
    components: {
      ChildComp: {
        methods: {
          heavy() { /* 耗时任务 */ }
        },
        render(h) {
          return h('div', this.heavy())
        }
      }
    }
  }
</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>

SSR
加快首屏渲染速度

8. 你对Vue3.0的新特性有没有了解？

根据尤大的PPT总结，Vue3.0改进主要在以下几点：

更快
- 虚拟DOM重写
- 优化slots的生成
- 静态树提升
- 静态属性提升
- 基于Proxy的响应式系统
更小：通过摇树优化核心库体积
更容易维护：TypeScript + 模块化
更加友好
- 跨平台：编译器核心和运行时核心与平台无关，使得Vue更容易与任何平台（Web、Android、iOS）一起使用
更容易使用
- 改进的TypeScript支持，编辑器能提供强有力的类型检查和错误及警告
- 更好的调试支持
- 独立的响应化模块
- Composition API