专栏名称: SegmentFault思否
SegmentFault (www.sf.gg)开发者社区,是中国年轻开发者喜爱的极客社区,我们为开发者提供最纯粹的技术交流和分享平台。
目录
相关文章推荐
程序员的那些事  ·  清华大学:DeepSeek + ... ·  2 天前  
程序员小灰  ·  3个令人惊艳的DeepSeek项目,诞生了! ·  昨天  
OSC开源社区  ·  宇树王兴兴早年创业分享引围观 ·  3 天前  
OSC开源社区  ·  升级到Svelte ... ·  4 天前  
程序猿  ·  “未来 3 年内,Python 在 AI ... ·  4 天前  
51好读  ›  专栏  ›  SegmentFault思否

2019 前端面试题汇总(主要为 Vue)

SegmentFault思否  · 公众号  · 程序员  · 2019-02-22 08:00

正文

毕业之后就在一直合肥小公司工作,没有老司机、没有技术氛围,在技术的道路上我只能独自摸索。老板也只会画饼充饥,前途一片迷茫看不到任何希望。于是乎,我果断辞职,在新年开工之际来到杭州,这里的互联网公司应该是合肥的几十倍吧。。。。

刚来3天,面试了几家公司,有些规模比较小,有些是创业公司,也有些已经发展的不错了;今天把最近的面试题目做个汇总,也给自己复个盘,由于我的技术栈主要为Vue,所以大部分题目都是Vue开发相关的。

1. 谈谈你对MVVM开发模式的理解

MVVM分为Model、View、ViewModel三者。

  • Model:代表数据模型,数据和业务逻辑都在Model层中定义;

  • View:代表UI视图,负责数据的展示;

  • ViewModel:负责监听Model中数据的改变并且控制视图的更新,处理用户交互操作;

Model和View并无直接关联,而是通过ViewModel来进行联系的,Model和ViewModel之间有着双向数据绑定的联系。因此当Model中的数据改变时会触发View层的刷新,View中由于用户交互操作而改变的数据也会在Model中同步。

这种模式实现了Model和View的数据自动同步,因此开发者只需要专注对数据的维护操作即可,而不需要自己操作dom。

2. Vue 有哪些指令?

v-html、v-show、v-if、v-for等等。

3. v-if 和 v-show 有什么区别?

v-show 仅仅控制元素的显示方式,将 display 属性在 block 和 none 来回切换;而v-if会控制这个 DOM 节点的存在与否。当我们需要经常切换某个元素的显示/隐藏时,使用v-show会更加节省性能上的开销;当只需要一次显示或隐藏时,使用v-if更加合理。

4. 简述Vue的响应式原理

当一个Vue实例创建时,vue会遍历data选项的属性,用 Object . defineProperty 将它们转为getter/setter并且在内部追踪相关依赖,在属性被访问和修改时通知变化。 每个组件实例都有相应的watcher程序实例,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的setter被调用时,会通知watcher重新计算,从而致使它关联的组件得以更新。

5. Vue中如何在组件内部实现一个双向数据绑定?

假设有一个输入框组件,用户输入时,同步父组件页面中的数据。

具体思路:父组件通过props传值给子组件,子组件通过 $emit 来通知父组件修改相应的props值,具体实现如下:

  1. import Vue from 'vue'


  2. const component = {

  3.  props: ['value'],

  4.  template: `

  5.    <div>

  6.      <input type="text" @input="handleInput" :value="value">

  7.     div>

  8.  `,

  9.  data () {

  10.    return {

  11.    }

  12.  },

  13.  methods: {

  14.    handleInput (e) {

  15.      this.$emit('input', e.target.value)

  16.    }

  17.  }

  18. }


  19. new Vue({

  20.  components: {

  21.    CompOne: component

  22.   },

  23.  el: '#root',

  24.  template: `

  25.    <div>

  26.      <comp-one :value1="value" @input="value = arguments[0]">comp-one>

  27.    div>

  28.  `,

  29.  data () {

  30.    return {

  31.      value: '123'

  32.    }

  33.  }

  34. })

可以看到,当输入数据时,父子组件中的数据是同步改变的:

我们在父组件中做了两件事,一是给子组件传入props,二是监听input事件并同步自己的value属性。那么这两步操作能否再精简一下呢?答案是可以的,你只需要修改父组件:

  1. template : `

  2.    <div>

  3.      

  4.      <comp-one v-model="value">comp-one>

  5.    div>

  6.  `

v-model 实际上会帮我们完成上面的两步操作。

6. Vue中如何监控某个属性值的变化?

比如现在需要监控data中, obj . a 的变化。Vue中监控对象属性的变化你可以这样:

  1. watch: {

  2.      obj: {

  3.      handler (newValue, oldValue) {

  4.        console.log ('obj changed')

  5.      },

  6.      deep: true

  7.    }

  8.  }

deep属性表示深层遍历,但是这么写会监控obj的所有属性变化,并不是我们想要的效果,所以做点修改:

  1. watch: {

  2.   'obj.a': {

  3.      handler (newName, oldName) {

  4.        console.log('obj.a changed')

  5.      }

  6.   }

  7.  }

还有一种方法,可以通过computed 来实现,只需要:

  1. computed: {

  2.    a1 () {

  3.      return this. obj.a

  4.    }

  5. }

利用计算属性的特性来实现,当依赖改变时,便会重新计算一个新值。

7. Vue中给data中的对象属性添加一个新的属性时会发生什么,如何解决?

示例:

  1.  

  2.    

    •      

    • v-for="value in obj" :key="value">
    •        {{value}}

    •      

    •    

    •    

    •  

  3. export default {

  4. data () {

  5. return {

  6. obj : {

  7. a : 'obj.a'

  8. }

  9. }

  10. },

  11. methods : {

  12. addObjB () {

  13. this . obj . b = 'obj.b'

  14. console . log ( this . obj )

  15. }

  16. }

  17. }

  18. 点击button会发现, obj . b 已经成功添加,但是视图并未刷新:

    原因在于在Vue实例创建时, obj . b 并未声明,因此就没有被Vue转换为响应式的属性,自然就不会触发视图的更新,这时就需要使用Vue的全局api—— $set ()

    1. addObjB () {

    2.      // this.obj.b = 'obj.b'

    3.      this.$set(this.obj, 'b', 'obj.b')

    4.      console.log(this.obj)

    5.    }

    $set () 方法相当于手动的去把 obj . b 处理成一个响应式的属性,此时视图也会跟着改变了:

    8. delete和Vue.delete删除数组的区别

    delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。

    Vue . delete 直接删除了数组 改变了数组的键值。

    1.    var a=[1,2,3,4]

    2.    var b=[1,2,3,4]

    3.    







    请到「今天看啥」查看全文