2019前端面试题汇总（主要为Vue）

结业之后就在一向合肥小公司事变，没有老司机、没有技能气氛，在技能的阶梯上我只能独自探索。老板也只会画饼果腹，前程一片苍茫看不到任何但愿。于是乎，我坚决告退，在新年开工之际来到杭州，这里的互联网公司应该是合肥的几十倍吧。。。。

刚来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值，详细实现如下：

import Vue from 'vue'  
const component = {  
  props: ['value'],  
  template: `  
    <div>  
      <input type="text" @input="handleInput" :value="value">  
    </div>  
  `,  
  data () {  
    return {  
    }  
  },  
  methods: {  
    handleInput (e) {  
      this.$emit('input', e.target.value)  
    }  
  } 
}  
new Vue({  
  components: {  
    CompOne: component  
  },  
  el: '#root',  
  template: `  
    <div>  
      <comp-one :value1="value" @input="value = arguments[0]"></comp-one>  
    </div>  
  `,  
  data () {  
    return {  
      value: '123'  
    }  
  }  
}) 

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

我们在父组件中做了两件事，一是给子组件传入props，二是监听input变乱并同步本身的value属性。那么这两步操纵可否再精简一下呢？谜底是可以的，你只必要修改父组件：

template: `  
    <div>  
      <!--<comp-one :value1="value" @input="value = arguments[0]"></comp-one>-->  
      <comp-one v-model="value"></comp-one>  
    </div>  
  ` 

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

6. Vue中怎样监控某个属性值的变革？

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!