vue面试中，经常会被问到的面试题

2018-10-18 本文已影响977人前端_周瑾

看看试题，只是为了查漏补缺，看看自己那些方面还不懂。切记不要以为背了面试题，就万事大吉了，最好是理解背后的原理，这样面试的时候才能侃侃而谈。不让稍微有水平的面试官一看就能看出，是否真才实学还是刚好背中了这道题。
（都是一些基础的vue面试题，大神不用浪费时间往下看）

一、对于MVVM的理解？

MVVM 是Model - View - ViewModel 的缩写
Model 代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。
View 代表UI组件，它负责将数据模型转化成UI 展现出来。
ViewModel 监听模型数据的改变和控制试图行为、处理用户交互、简单理解就是一个同步View和Model的对象，连接Model和View。
在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，model 和 ViewModel 之间的交互是双向的，因此View 数据的变化会同步到Model 中，而Model数据的变化也会立即反应到View上。
** ViewModel** 通过双向数据绑定把View 层和model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM，不需要关注数据状态的同步问题，复杂的数据状态维护完全由MVVM 来统一管理。

二、Vue的生命周期

点我跳转vue的生命周期详细介绍

三、Vue 实现数据双向绑定的原理：Object.defineProperty()

vue实现数据双向绑定主要是：采用 数据劫持结合发布者-订阅者模式 的方式，通过 Object.defineProperty() 来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回掉。当把一个普通 JavaScript 对象传给Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用Object.defineProperty 将他们转为 getter/setter。用户看不到getter / setter ，但是在内部它们让vue追踪依赖，在属性被访问和修改时通知变化。

vue的数据双向绑定将MVVM作为数据绑定的入口，整合Observer，Complie 和 Watcher三者，通过Observer来监听自己的model的数据变化，通过Complie来解析编译模板指令(vue中是用来解析 {{ }} ），最终利用watcher搭起observer和complie之间的通信桥梁，达到数据变化 ==》视图更新，视图交互变化（input）==》数据model变更双向绑定效果。
js实现简单的双向绑定

<body>
    <div id="app">
        <input type="text" id="txt">
        <p id="show"></p>
    </div>
</body>
<script type="text/javascript">
    var obj = {};
    Object.defineProperty(obj, 'txt', {
        get: function () {
            return obj
        },
        set: function (newValue) {
            document.getElementById('txt').value = newValue;
            document.getElementById('show').innerHTML = newValue;
        }
    })
    document.addEventListener('keyup', function (ev) {
        obj.txt = ev.target.value;
    })
</script>

四、Vue 组件间的参数传递

1.父组件与子组件传值
父组件传给子组件：子组件通过props方法接受数据；
子组件传给父组件：$emit方法传递参数;
2.非父子组件间的数据传递，兄弟组件传值
EventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接受事件，项目比较小时，用这个比较合适；
VueX，创建一个数据仓库，整个项目全局都可以往这个仓库存放数据和读取数据

五、Vue的路由实现：hash模式和 history模式
hash模式：在浏览器中符号 “#” 以及#后面的字符称之为hash，用window.location.hash读取；
特点：hash虽然在URL中，但不被包括在HTTP请求中，用来指导浏览器动作，对服务端安全无用，hash不会重新加载页面。

history模式：history 采用HTML5的新特性；且提供了两个新方法：pushState（）、replaceState（）可以对浏览器历史纪录栈进行修改，以及popState事件监听到状态变更。

六、 Vue与Angular以及React的区别？
（版本不断更新，以下区别有可能不是很正确，我的工作中只用到vue，对angular和react不怎么熟）
1.与AngularJs的区别
相同点：都支持指令，内置指令和自定义指令；都支持过滤器：内置过滤器和自定义过滤器；都支持双向数据绑定，都不支持低端浏览器；

不同点：AngularJs的学习成本高，比如Dependency、Injecttion特性，而vue.js本身提供的API都比较简单、直观；在性能上，AngularJs依赖对数据做脏检查，所以watcher越多越慢；Vue.js使用基于依赖追踪的观察并且使用异步队列更新，所以的数据都是独立触发的。

2. 与React的区别
相同点：
React采用独特的JSX语法，Vue.js 在组件开发中也推崇编写.vue特殊文件格式，对文件内容都有一些约定，两者都需要编译后使用;中心实现相同：一切都是组件，组件实例之间可以嵌套；都提供合理的钩子函数，可以让开发者定制化底去处理需求，都不内置列数Ajax，Route等功能到核心包，而是以插件的方式加载;在组件开发中都支持mixins的特性了；

不同点：
React采用Virtual DOM会对渲染出来的结果做脏检查；Vue.js在模板中提供了指令，过滤器等，可以非常方便，快捷的操作Virtual DOM。

七、Vue路由的钩子函数

首页可以控制导航跳转，beforeEach，afterEach等。一般用于页面title的修改，一些需要登录才能调整页面重定向功能。
beforeEach 主要的3个参数to，from，next；
to : route即将进入的目标路由对象、
from： route当前导航正要离开的路由、
next： function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转

八、Vuex是什么？怎么使用？那种功能场景使用它？

只要来读取的状态集中放在store中；改变状态的方式就是提交mutations。这是个同步的实物；异步逻辑应该封装中action中。
在main.js引入store，注入。新建一个目录store，...export。
场景有：单页面应用，组件之间的状态，音乐播放，登录状态，加入购物车

vuex.jpg

state
Vuex 使用单一状态树，既每个应用将仅仅包含一个store实例，单单一状态树和模块化并不冲突。存放的数据状态，不可以直接修改里面的数据。
mutations
mutations定义的方法动态修改Vuex的store中的状态或数据。
getters
类似vue的计算属性，主要用来过滤一些数据。
action
action可以理解为通过mutations里面处理数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。view层通过store.dispath来分配action。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment(context) {
      context.commit('increment')
    }
  }
})

modeules
项目特别复杂的时候，可以让每一个模块拥有自己的state，mutation，action，getters，使得结构非常清晰，方便管理

  const modulesA = {
    state: { ... },
    mutations: { ... },
    actions: { ... }
    }
  }

  const modulesB = {
    state: { ... },
    mutations: { ... },
    actions: { ... }
    }
  }

const store = new Vuex.store({
  modules: {
    a: modulesA,
    b: modulesB
  }
})

九、对Keep-Alive的了解？

keep-alive 是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
在vue 2.1.0的版本之后，keep-alive新加入了两个属性： include( 包含的组件缓存）与exclude(排除的组件不缓存，优先级大于include）
使用方法

 <keep-alive include="inclde_components" exclude="exclude_components">
      <component>
        <!-- 该组件是否缓存取决与include 和 exclude 属性-->
      </component>
  </keep-alive>

参数解释
include -- 字符串或者正则表达式，只要名称匹配的组件会被缓存
exclude -- 字符串或者正则表达式，任何名称匹配的组件都不被缓存
include 和exclude 的属性允许组件有条件的缓存。而这都可以用 " , " 分割字符串、正则表达式、数组。单使用正则或者是数组是，要记得用 v-bind
示例

<!-- 逗号分隔字符串，只有组件a与b被缓存。 -->
<keep-alive include="a,b">
  <component></component>
</keep-alive>

<!-- 正则表达式 (需要使用 v-bind，符合匹配规则的都会被缓存) -->
<keep-alive :include="/a|b/">
  <component></component>
</keep-alive>

<!-- Array (需要使用 v-bind，被包含的都会被缓存) -->
<keep-alive :include="['a', 'b']">
  <component></component>
</keep-alive>