单页面、多页面的区别
单页面的优缺点
优点：
- 具有桌面应用的即时性、网站的可移植性和可访问性
- 用户体验好、快，内容的改变不需要重新加载整个页面
- 良好的前后端分离，分工更明确 缺点：
- 不利于搜索引擎的抓取
- 首次渲染速度相对较慢
v-if、v-show的区别？
控制手段：
v-if显示隐藏是将DOM元素整个添加或删除v-show隐藏则是为该元素添加css---display:none，DOM元素依旧存在编译过程：- v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件
- v-show只是简单的基于css切换
v-modal的使用
v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：
- v-bind绑定一个value属性；
- v-on指令给当前元素绑定input事件。
vue如何监听对象或者数组某个属性的变化
监听对象的变化：
- watch: 通过watch中的deep属性，监听对象的所有属性。
watch: {
user: {
handler: function (val) {
console.log(val)
},
deep: true
}
},
- object.assign()对象复制：新建一个空对象将对象复制进空对象再赋值给监听的值，这种方法可以监听到对象属性的新增和修改。
this.user = Object.assign({}, this.user)
- this.$set(你要改变的对象，你要改变的key，你要改成什么value)
this.$set(this.obj,'a','tom') // 改变对象
监听数组的变化：
-
watch(同上)
-
this.$set(你要改变的数组，你要改变的位置，你要改成什么value)
this.$set(this.arr,0,'tom') // 改变数组
- 调用数组的方法
splice()、 push()、pop()、shift()、unshift()、sort()、reverse()
$router和$route的区别
-
$route为当前router跳转对象里面可以获取name、path、query、params等
-
$router为VueRouter实例，想要导航到不同URL，则使用router.push方法
vue路由的钩子函数
首页可以控制导航跳转，beforeEach，afterEach等，一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。
beforeEach主要有3个参数to，from，next：
-
to：route即将进入的目标路由对象，
-
from：route当前导航正要离开的路由
-
next：function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转。
vue常用的修饰符
- .prevent: 提交事件不再重载页面；
- .stop: 阻止单击事件冒泡；
- .self: 当事件发生在该元素本身而不是子元素的时候会触发；
- .capture: 事件侦听，事件发生的时候会调用
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
Vue组件通信入门之Provide和Inject机制
原理：父组件中通过provide来提供变量，子组件中通过inject来注入变量。
provide/inject需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。
从父组件的provide属性传入一个对象，子组件（或者是孙组件，只要是子级组件）可以用inject属性接收父组件的provide属性。
// 父级组件提供 'foo'
var Provider = {
provide: {
foo: 'bar'
},
// ...
}
// 子组件注入 'foo'
var Child = {
inject: ['foo'],
created () {
console.log(this.foo) // => "bar"
}
// ...
}
VUE的优势，为啥选中这个框架？
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。
Vue的路由实现：hash模式 和 history模式
-
hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用window.location.hash读取； 特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。 hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 www.xxx.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。
-
history模式：history采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。 history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 www.xxx.com/items/id。后端… /items/id 的路由处理，将返回 404 错误。Vue-Router 官网里如此描述：“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。”
vue路由的钩子函数
首页可以控制导航跳转，beforeEach，afterEach等，一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。
beforeEach主要有3个参数to，from，next：
to：route即将进入的目标路由对象，
from：route当前导航正要离开的路由
next：function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转。
$route 和 $router的区别？
- $route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。
- $router是“路由实例”对象包括了路由的跳转方法，钩子函数等。
vue常用的修饰符？
.prevent: 提交事件不再重载页面；
.stop: 阻止单击事件冒泡；
.self: 当事件发生在该元素本身而不是子元素的时候会触发；
.capture: 事件侦听，事件发生的时候会调用
vuex是什么？怎么使用？哪种功能场景使用它？
vuex作为vue官方出品的状态管理框架，以及其简单API设计、便捷的开发工具支持，在中大型的vue项目中得到很好的应用。
场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车
state
Vuex 使用单一状态树,即每个应用将仅仅包含一个store 实例，但单一状态树和模块化并不冲突。存放的数据状态，不可以直接修改里面的数据。
mutations
mutations定义的方法动态修改Vuex 的 store 中的状态或数据。
getters
类似vue的计算属性，主要用来过滤一些数据。
action
actions可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。view 层通过 store.dispath 来分发 action。
vue中使用了哪些设计模式
- 单例模式：new多次，只有一个实例
- 发布订阅模式：eventBus
- 观察者模式:watch和dep
- 中介者模式:vuex
- 工厂模式:传入参数可以创建实例
直接给一个数组项赋值，Vue能检测到变化么？
vue不能检测到以下数组的变化：
- 当利用索引直接设置一个数组项时，
- 当修改数组的长度时 解决办法： 第一个问题解决
// Vue.set
Vue.set(vm.items,indexOfItem,newValue)
// vm.$set,Vue.set的一个别名
vm.$set(vm.items,indexOfItem,newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem,1,newValue)
第二个问题解决办法
// Array.prototype.splice
vm.items.splice(newLength)
