Vue 常见面试问题，你可能都知道，但能答好吗？

GitHub 地址，后面继续补充，star不迷路。

• 计算属性（computed）、方法（methods）和侦听属性（watch）的区别与使用场景
• Vue 生命周期的理解
• Vue 双向绑定，为何不能经过修改下标来通知视图发生变化。
• 简述 Vue 中的 MVVM 模型
• Vue 路由中 hash 模式和 history 模式区别
• Vue 路由中 $route 和 $router 的区别

计算属性（computed）、方法（methods）和侦听属性（watch）的区别与使用场景

methods VS 计算属性

咱们能够将同一函数定义为一个 method 而不是一个计算属性。对于最终的结果，两种方式确实是相同的。然而，不一样的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会从新求值。这就意味着只要 message 尚未发生改变，屡次访问 reversedMessage 计算属性会当即返回以前的计算结果，而没必要再次执行函数。相比而言，只要发生从新渲染，method 调用总会执行该函数。总之，从新计算开销很大的话请选计算属性，不但愿有缓存的请选methods。

watch VS 计算属性

当你在模板内使用了复杂逻辑的表达式时，你应当使用计算属性。

侦听属性是一个对象，键是须要观察的表达式，值是对应回调函数。值也能够是方法名，或者包含选项的对象。
当你有一些数据须要随着其它数据变更而变更时，或者当须要在数据变化时执行异步或开销较大的操做时，你可使用 watch。

Vue 生命周期的理解

如何解释vue的生命周期才能令面试官满意？

• beforeCreate

在实例初始化以后，数据观测 (data observer) 和 event/watcher 事件配置以前被调用。

• created

在实例建立完成后被当即调用。在这一步，实例已完成如下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

• beforeMount

在挂载开始以前被调用：相关的 render 函数首次被调用。
该钩子在服务器端渲染期间不被调用。如下周期在服务端渲染期间都不被调用。

• mounted

el 被新建立的 vm.$el 替换，并挂载到实例上去以后调用该钩子。若是 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。注意 mounted 不会承诺全部的子组件也都一块儿被挂载。若是你但愿等到整个视图都渲染完毕，能够用 vm.$nextTick 替换掉 mounted。

• beforeUpdate

数据更新时调用，发生在虚拟 DOM 打补丁以前。这里适合在更新以前访问现有的 DOM，好比手动移除已添加的事件监听器。

• updated

因为数据更改致使的虚拟 DOM 从新渲染和打补丁，在这以后会调用该钩子。

• activated

keep-alive 组件激活时调用。

• deactivated

keep-alive 组件停用时调用。

• beforeDestroy

实例销毁以前调用。在这一步，实例仍然彻底可用。

• destroyed

Vue 实例销毁后调用。调用后，Vue 实例指示的全部东西都会解绑定，全部的事件监听器会被移除，全部的子实例也会被销毁。

Vue 双向绑定，为何不能经过修改下标来通知视图发生变化。

Vue为何不能检测数组变更

变异方法：

Vue 包含一组观察数组的变异方法，因此它们也将会触发视图更新。这些方法以下： push(), pop(), shift() ,unshift(), splice(), sort(), reverse()

替换数组：

filter(), concat() 和 slice() 。这些不会改变原始数组，但老是返回一个新数组。当使用非变异方法时，能够用新数组替换旧数组：

注意事项:

因为 JavaScript 的限制，Vue 不能检测如下变更的数组：

• 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
• 当你修改数组的长度时，例如：vm.items.length = newLength

变通方法：

• Vue.set(vm.items, indexOfItem, newValue)
• vm.items.splice(indexOfItem, 1, newValue)

简述 Vue 中的 MVVM 模型

Vue是以数据为驱动的，Vue自身将DOM和数据进行绑定，一旦建立绑定，DOM和数据将保持同步，每当数据发生变化，DOM会跟着变化。

ViewModel是Vue的核心，它是Vue的一个实例。Vue实例是做用在某个HTML元素上的，这个HTML元素能够是body，也能够是某个id所指代的元素。 DOM Listeners和Data Bindings是实现双向绑定的关键。DOM Listeners监听页面全部View层DOM元素的变化，当发生变化，Model层的数据随之变化；Data Bindings监听Model层的数据，当数据发生变化，View层的DOM元素随之变化。

Vue 路由中 hash 模式和 history 模式区别

hash模式

hash 出如今 URL 中，但不会被包含在 http 请求中，对后端彻底没有影响，所以改变 hash 不会从新加载页面。

特色：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动做，hash不会重加载页面。

history模式

history 利用了 html5 history interface 中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器记录栈，在当前已有的 back、forward、go 基础之上，它们提供了对历史记录修改的功能。只是当它们执行修改时，虽然改变了当前的 URL ，但浏览器不会当即向后端发送请求。

原理：

hash 模式的原理是 onhashchange 事件，能够在 window 对象上监听这个事件。
history ：hashchange 只能改变 # 后面的代码片断，history api （pushState、replaceState、go、back、forward） 则给了前端彻底的自由，经过在window对象上监听popState()事件。

Vue 路由中 $route 和 $router 的区别

$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。$router是“路由实例”对象包括了路由的跳转方法，钩子函数等。