vue 面试题 经常会被问到的面试题

vue 面试题 经常会被问到的面试题

俗话说机会只会垂青有准备的人,如果我们啥都不准备就去面试,90%可能会失败,大神级别的除外。所以不论做什么我们都要做好准备。 看看面试题查缺补漏,切勿只背面试题就感觉一切ok,最好我们还是要明白这其中的实现原理,不然面试官深入的问的时候,我们岂不尴尬了。下面总结一下vue 面试中经常会被问到面试题,分享出来一起加油。

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

⚠️ 注意: 源码中找答案compiler/codegen/index.js

总结:

  • 1. 显然v-for优先于v-if被解析(源码中判断循序)
  • 2. 如果同时出现,每次渲染都会先执行循环再判断条件,无论如何循环都不可避免,浪费了性能
  • 3. 要避免出现这种情况,则在外层嵌套template,在这一层进行v-if判断,然后在内部进行v-for循环
  • 4. 如果条件出现在循环内部,可通过计算属性提前过滤掉那些不需要显示的项

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

⚠️注意:源码中找答案:src\core\instance\state.js – initData()

总结:

Vue组件可能存在多个实例,如果使用对象形式定义data,则会导致它们共用一个data对象,那么状态 变更将会影响所有组件实例,这是不合理的;

采用函数形式定义,在initData时会将其作为工厂函数返 回全新data对象,有效规避多实例之间状态污染问题。而在Vue根实例创建过程中则不存在该限制,也 是因为根实例只能有一个,不需要担心这种情况。

 

3. 你知道vuekey的作用和工作原理吗?说说你对它的理解。

⚠️注意:源码中找答案:src\core\vdom\patch.js – updateChildren()

<script> 
        // 创建实例 
        const app = new Vue({ 
            el: '#demo', 
            data: { items: ['a', 'b', 'c', 'd', 'e'] }, 
            mounted () { 
                setTimeout(() => { 
                    this.items.splice(2, 0, 'f') 
                }, 2000); 
            }, 
        }); 
</script>

不实用key:

如果使用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只会替换其内部属性而不会触发过渡效果。

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

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

总结

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

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

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

  • 源码分析1:组件定义

// 组件定义

Vue.component('comp', { 

    template: '<div>this is a component</div>' 
})

组件定义,src\core\global-api\assets.js

<template> 
    <div> 
        this is a component     
    </div> 
</template> 

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

  • 源码分析2:组件化优点

lifecycle.js – mountComponent()  组件、Watcher、渲染函数和更新函数之间的关系

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

总结

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

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

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

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

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

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

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

【高效性 】

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

【 渐进式JavaScript框架】

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

7. 谈谈你对MVCMVPMVVM的理解?

【 答题思路 】:此题涉及知识点很多,很难说清、说透,因为mvc、mvp这些我们前端程序员自己甚至都没 用过。但是恰恰反映了前端这些年从无到有,从有到优的变迁过程,因此沿此思路回答将十分清楚。

总结 

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

8. 你了解哪些Vue性能优化方法?

【 答题思路 】:根据题目描述,这里主要探讨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); 
  } 
};

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

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

参考vue-virtual-scrollervue-virtual-scroll-list

  • 事件的销毁

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

created() { 
  this.timer = setInterval(this.refresh, 2000) }, 

  beforeDestroy() { 
     clearInterval(this.timer) 
  }
  • 图片懒加载

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

<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

 

 

 

 

 

 

持续更新… …

微信关注“优月优”公众号,获取免费赠书。
提醒:本站所有图书/视频资源均索引自互联网,版权争议与本站无关。如有侵权或其他争议的可能性,请发起版权投诉,因本站未参与任何制作、转制、存储等任一环节,故无法对涉及到的资源进行删除,本站会依据DMCA原则, 对涉及的资源链接进行删除。因为所有图书资源均不属于本站,本站只提供索引服务,故本站不保证任何资源的准确性,权威性,请使用者自行判断。
微信公众号
关注我们,每天及时接收最新的学习资料
12000人已关注
分享到:
赞(2) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏