2019年度年度web前端面试题总结前端面试题总结(主要为主要为Vue面试题面试题)
转眼2019又要过去了，作为一名前端码农，又熬过一个没日没夜的年头，头发又少了不少，去年的学习计划一
半也没完成，唉。。。现在为大家总结一下这一年面试的几家公司的关于前端面试题吧
毕业之后就在一直合肥小公司工作，没有老司机、没有技术氛围，在技术的道路上我只能独自摸索。老板也只会画饼充饥，前
途一片迷茫看不到任何希望。于是乎，我果断辞职，在新年开工之际来到杭州，这里的互联网公司应该是合肥的几十倍吧。。
。。
刚来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)
}
评论0