2019年度web前端面试题总结(主要为Vue面试题)-创新互联

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

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

MVVM分为Model、View、ViewModel三者。

Model 代表数据模型，数据和业务逻辑都在Model层中定义；

View 代表UI视图，负责数据的展示；

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

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

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

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

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

当一个Vue实例创建时，vue会遍历data选项的属性，用 Object.defineProperty 将它们转为 getter/setter并且在内部追踪相关依赖，在属性被访问和修改时通知变化。

每个组件实例都有相应的 watcher 程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。

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

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

import Vue from 'vue'
const component = {
 props: ['value'],
 template: `
  

   
  
 `,
 data () {
  return {
  }
 },
 methods: {
  handleInput (e) {
   this.$emit('input', e.target.value)
  }
 }
}
new Vue({
 components: {
  CompOne: component
 },
 el: '#root',
 template: `
  

   
  
 `,
 data () {
  return {
   value: '123'
  }
 }
})