9道vue面试题

2020-05-06  本文已影响0人  Sunshine_0676

2.VUE组件data为什么必须是函数

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

3.Vue中key的作用和工作原理

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

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

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

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

易用性

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

灵活性

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

高效性

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

7.对MVC、MVP和MVVM的理解

MVC

具备着View、Controller和Model
Model:负责保存应用数据，与后端数据进行同步
Controller: 负责业务逻辑，根据用户行为对Model数据进行修改
View: 负责视图展示，将Model中的数据可视化出来

MVP

MVP与MVC很接近，P指的是Presenter,presenter可以理解为一个中间人。
它负责着View和Model之间的数据流动，防止view和model之间直接交流。

MVVM(Model-View-ViewModel)

ViewModel通过实现一套数据响应式机制自动响应Model中数据变化；
同时ViewModel会实现一套更新策略自动将数据变化转换为视图更新；
通过事件监听响应View中用户交互修改Model中数据。
这样再ViewModel中就减少了大量DOM操作代码。
MVVM在保持View和Model松耦合的同时，还减少了维护他们关系的代码，使用户专注于业务逻辑，兼顾开发效率和可维护性。

总结

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

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

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

<template>
  <div id="app">
    <keep-alive>
      <router-view />
    </keep-alive>
  </div>
</template>

<template v-if="show">
   <p v-for="v in list" :key="v.id">外层包一个template<p>
</template>

export default {
  data: ()  => ({
    users: []
  }),
  async created() {
    this.users = Object.freeze(获取来的数据)
  }
}

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

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

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


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

参考项目： vue-lozyload https://github.com/hilongjw/vue-lazyload

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

<template functional>
</template>

const base = this.base //不要频繁引用this.base

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

上一篇下一篇

猜你喜欢

热点阅读