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