1、 export和export default的区别
export default xxx
import xxx from './'
export xxx
import {xxx} from './'
在一个文件或模块中，export、import可以有多个，export default仅有一个
通过export方式导出，在导入时要加{ }，export default则不需要
2、 vue nexttick
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
this.$nextTick(()=>{
})
1、异步说明
Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新
2、事件循环说明
简单来说，Vue 在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。
场景：
1、 点击按钮显示原本以 v-show = false 隐藏起来的输入框，并获取焦点。
2、 点击获取元素宽度。
3、 使用 swiper 插件通过 ajax 请求图片后的滑动问题。
3、 插槽
应用场景：比如你开发一个组件, 里面一些子元素希望是由调用者来定义, 就可以定义slot, 这样组件只负责核心功能, 其他非核心可以用户自由定义, 增加组件的灵活性 可扩展性。
单个插槽
父组件在子组件<slot> </slot>处插入内容。
命名插槽
solt元素可以用一个特殊的特性name来进一步配置如何分发内容。多个插槽可以有不同的名字。这样可以将父组件模板中 slot 位置，和子组件 slot 元素产生关联，便于插槽内容对应传递
作用域插槽scoped slots
可以访问子组件内部数据的可复用插槽(reusable slot)，如下面user.data
在父级中，具有特殊特性 slot-scope 的<template> 元素必须存在，表示它是作用域插槽的模板。slot-scope 的值将被用作一个临时变量名，此变量接收从子组件传递过来的 prop 对象。
简而言之：父组件提供样式，子组件提供数据内容。父组件:
<child>
<template slot-scope="user">
<div class="tmpl">
<span v-for="item in user.data">{{item}}</span>
</div>
</template>
</child>
4、 VueX
只用来读取的状态集中放在store中； 改变状态的方式是提交mutations，这是个同步的事物； 异步逻辑应该封装在action中。
在main.js引入store，注入。新建了一个目录store，….. export 。
场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车
5、 keep-alive
keep-alive是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。keep-alive新加入了两个属性: include(包含的组件缓存) 与 exclude(排除的组件不缓存，优先级大于include) 。
<keep-alive include='include_components' exclude='exclude_components'>
<component>
<!-- 该组件是否缓存取决于include和exclude属性 -->
</component>
</keep-alive>
keep-alive生命周期钩子函数：activated、deactivated
6、 vue生命周期
总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。
1、创建前/后： 在beforeCreated阶段，vue实例的挂载元素$el和**数据对象**data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有。
2、载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。
3、更新前/后：当data变化时，会触发beforeUpdate和updated方法。
4、销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。
7、 created和mounted的区别
created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
8、 hash和 history模式
hash模式：
在浏览器中符号“#”，#以及#后面的字符称之为hash，用window.location.hash读取；
特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。
hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.xxx.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。
history模式：
history采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。history 模式下，前端的URL必须和实际向后端发起请求的 URL一致，如 http://www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理，将返回 404 错误。Vue-Router 官网里如此描述：“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。”
通过history api，我们丢掉了丑陋的#，不怕前进，不怕后退，就怕刷新，f5，（如果后端没有准备的话）,因为刷新是实实在在地去请求服务器的。
9、 vue常用的修饰符
.stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡；
.prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（比如a的跳转、submit的提交）；
.capture：与事件冒泡的方向相反，事件捕获由外到内；
.self：只会触发自己范围内的事件，不包含子元素；
.once：只会触发一次。
.sync：允许子组件改变props属性值并更新到父组件中。
<child :name.sync="name"></child> // 父组件
// 子组件事件
changePropsInChild(){
this.$emit('update:name', value);
}
.passive ：在监听元素滚动事件的时候，会一直触发onscroll事件，在pc端是没啥问题的，但是在移动端，会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给onscroll事件整了一个.lazy修饰符
<div v-on:scroll.passive="onScroll">...</div>
.native：监听自定义标签根标签的事件，将原生事件绑定到组件上
下面的例子：1、4会打印
<div id="app">
<button @click="add('1')">普通的html标签</button><br/>
<button @click.native="add('2')">普通的html标签，包含native的按钮</button><br/>
<myself-button @click="add('3')"/></myself-button><br/>
<myself-button @click.native="add('4')"/></myself-button>
<div>
</body>
<script>
Vue.component('myself-button', {
template: `<button>我是自定义的标签</button>`
});
var vm=new Vue({
el:"#app",
data:{
},
methods:{
add:function(obj){
console.log(obj+'我触发了');
},
}
});
</script>
v-model的修饰符
.lazy：v-model双向数据绑定，输入框输入内容时视图就更新了，如果想要输入完所有东西，光标离开才更新视图
<input type="text" v-model.lazy="value">
.number 自动将用户的输入值转化为数值类型
.trim 自动过滤用户输入的首尾空格
键盘事件的修饰符
Vue中允许在监听的时候添加关键修饰符：对于一些常用键，还提供了按键别名：
<input @keyup.enter="submit"> <!-- 缩写形式 -->
@keyup：键盘抬起事件 @keydown：键盘按下事件 @blur： 是当元素失去焦点时所触发的事件 @focus：是元素获取焦点时所触发的事件
全部的按键别名：
.enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right 修饰键： .ctrl .alt .shift .meta
@keyup在element-ui组件中失效，是因为element-ui组件在原生组件的基础上进行了封装。如果想使用@keyup则需要加上native关键词。
如果遇到.native修饰符也无效的情况，可能就需要用到$listeners了，具体用法请参考Vue官方文档：将原生事件绑定到组件。
@keyup.native.enter=""
10、 vue-loader
基于webpack的一个的loader，解析和转换 .vue 文件，提取出其中的逻辑代码 script、样式代码 style、以及 HTML 模版 template，再分别把它们交给对应的 Loader 去处理。
webpack的loader，用来打包、转译js或者css文件，简单的说就是把你写的代码转换成浏览器能识别的，还有一些打包、压缩的功能等。
11、 delete、splice和Vue.delete区别
delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。
splice直接删除了数组 改变了数组的键值。
Vue.delete直接删除了数组 改变了数组的键值。
12、 params和query的区别
用法：query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.$route.query.name和this.$route.params.name。
url地址显示：query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示
注意：query刷新不会丢失query里面的数据。params刷新会丢失 params里面的数据。
13、 vue-router导航钩子
vue-router 的导航钩子，主要用来作用是拦截导航，让他完成跳转或取消。
第一种：全局导航钩子：router.beforeEach(to,from,next)，afterEach 作用：跳转前进行判断拦截。
第二种：路由独享钩子beforeEnter
第三种：组件内钩子beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
全局解析守卫
router.beforeResolve 注册一个全局守卫，和 router.beforeEach 类似
14、 取消接口请求
ajax接口：原生js的abort()这个方法。
Axios接口：Axios 提供了一个 CancelToken的函数，这是一个构造函数，该函数的作用就是用来取消接口请求
let CancelToken = axios.CancelToken
15、 vue-router实现路由懒加载
第一种：vue异步组件技术 ==== 异步加载，vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件。
第二种：路由懒加载(使用import)。
第三种：webpack提供的require.ensure()，vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。
16、 computed和watch
computed:
当一个属性受多个属性影响的时候就需要用到computed
栗子： 购物车商品结算的时候
watch:
当一条数据影响多条数据的时候就需要用watch
栗子：搜索数据
17、 axios拦截器
每个请求都需要携带 token ，所以我们可以使用 axios request 拦截器，添加token及头文件等。使用response拦截，处理token过期等情况。
axios.interceptors.request.use() 请求拦截 axios.interceptors.response.use() 响应拦截
18、 props传值验证
props: {
data1: {
type: String, //设定类型
required: true, //是否必须
default: 'default value', //默认值
validator (value) { return (value.length < 5) } }, //校验规则 返回false 校验失败
}}
19、 子路由不需要加"/"
在配置的路由后面，添加 children，并在 children 中添加二级路由，就能实现路由嵌套
配置 path 的时候，以 " / " 开头的嵌套路径会被当作根路径，所以子路由的 path 不需要添加 " / "
20、 路由如何设置404页面
注：配置404页面一定要在路由表的最后一个，放在*的下面路由是不起作用的
21、 Vue 组件间通信方式
props/$emit $emit/$on vuex $attrs/$listeners provide/inject //作用：可实现跨组件传值，数据的流只能是向下传递
$parent/$children 与 ref
22、 重置 data
使用Object.assign()，vm.$data可以获取当前状态下的data，vm.$options.data(this)可以获取到组件初始化状态下的data。
Object.assign(this.$data, this.$options.data(this)) // 注意加this，不然取不到data() { a: this.methodA } 中的this.methodA。
ES6 的Object.assign方法用来将源对象（source）的所有可枚举属性，复制到目标对象（target）。它至少需要两个对象作为参数，第一个参数是目标对象，后面的参数都是源对象。
23、 route 和 router 的区别是什么？
$route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等路由信息参数。
$router对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。包括了路由的跳转方法(push、replace)，钩子函数等。
