摘要：载入前后在阶段，实例的和都初始化了，但还是挂载之前为虚拟的节点，还未替换。类似于，不同在于提交的是，而不是直接变更状态可以包含任意异步操作。
vue基础
1、 router 路由与 a 标签的区别：https://www.jianshu.com/p/34b...
2、 VUE双向绑定的原理：
答：VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。Vue的双向数据绑定就是只要在读取值（getter）时收集观察者，在赋值（setter）时触发观察者更新函数，就可以实现数据变更，从而实现DOM重新渲染。
3、vue2.0中router-link详解：https://blog.csdn.net/lhjueji...
4、 vue项目开发前的es6的知识储备:https://www.cnblogs.com/untir...
5、 箭头函数和普通函数的区别：https://www.jianshu.com/p/73c...
总结：
1>箭头函数写代码拥有更加简洁的语法；
2>箭头函数的this永远指向其上下文的 this，任何方法都改变不了其指向，如call(), bind(), apply(); 普通函数的this指向调用它的那个对象
6、Vue的生命周期，详细介绍各个阶段
创建前/后
在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。
在created阶段，vue实例的数据对象data有了，$el还没有。
载入前/后
在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。
在mounted阶段，vue实例挂载完成，data.message成功渲染。
更新前/后
当data变化时，会触发beforeUpdate和updated方法。
销毁前/后
在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在
它可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后.
7、简单描述每个周期具体适合哪些场景？
生命周期钩子的一些使用方法：
beforecreate : 可以在这加个loading事件，在加载实例时触发
created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
mounted : 挂载元素，获取到DOM节点
updated : 如果对数据统一处理，在这里写上相应函数
beforeDestroy : 可以做一个确认停止事件的确认框
nextTick : 更新数据后立即操作dom
8、 vue-router实现原理
根据url来path匹配相应的 component ，在把匹配到的component渲染到指定的dom上就好了
vue-router是vue的路由插件,组件：router-link router-view说简单点，vue-router的原理就是通过对URL地址变化的监听，继而对不同的组件进行渲染。每当URL地址改变时，就对相应的组件进行渲染。原理是很简单，实现方式可能有点复杂，主要有hash模式和history模式。
9、Vuex各个状态
有 5 种，分别是 state、getter、mutation、action、modulestate Vuex 使用单一状态树，既每个应用将仅仅包含一个store实例，单单一状态树和模块化并不冲突。存放的数据状态，不可以直接修改里面的数据。
mutations mutations定义的方法动态修改Vuex的store中的状态或数据。
getters 类似vue的计算属性，主要用来过滤一些数据。
action action可以理解为通过mutations里面处理数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。view层通过store.dispath来分配action。Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态；Action 可以包含任意异步操作。
modeules 项目特别复杂的时候，可以让每一个模块拥有自己的state,mutation,action,getters，使得结构非常清晰，方便管理
10、axios是什么？怎么使用？描述使用它实现登录功能的流程
axios是请求后台资源的模块。 npm i axios -S
如果发送的是跨域请求，需在配置文件中 config/index.js 进行配置
11、兄弟组件，父子传值
父---子 父组件通过标签传值，子组件通过props接收
子---父 通过this.$emit将方法和数据传递给父组件，父组件通过$on接收1.父组件与子组件传值
父组件传给子组件： 子组件通过props方法接受数据；
子组件传给父组件：$emit方法传递参数;
2.非父子组件间的数据传递，兄弟组件传值
EventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接受事件，项目比较小时，用这个比较合适；
VueX，创建一个数据仓库，整个项目全局都可以往这个仓库存放数据和读取数据
如果父组件想要调用子组件的方法
vue会给子组件添加一个ref属性，通过this.$refs.ref的值便可以获取到该子组件，然后便可以调用子组件中的任意方法
12、vue怎么实现页面的权限控制
利用 vue-router 的 beforeEach 事件，可以在跳转页面前判断用户的权限（利用 cookie 或 token），是否能够进入此页面，如果不能则提示错误或重定向到其他页面，在后台管理系统中这种场景经常能遇到。
13、vue里面的虚拟dom
简单来说，虚拟DOM是用Object来代表一颗节点，这个Object叫做VNode，然后使用两个VNode进行对比，根据对比后的结果修改真实DOM。为什么是两个VNode？因为每次渲染都会生成一个新的VNode，然后和上一次渲染时用的VNode进行对比。然后将这一次新生成的VNode缓存，用来进行下一次对比。
14、vue中scoped的原理：https://www.jianshu.com/p/b92...
加了 scoped 的话，编译的时候就把对应的选择器和对应的元素绑定一个由全局唯一的字符串产生的属性。vue通过在DOM结构以及css样式上加上唯一的标记，保证唯一，达到样式私有化，不污染全局的作用
15、如何解决vue开发中父组件添加scoped后无法修改子组件样式问题
父组件：使用深度作用选择器
http://www.php.cn/js-tutorial...
https://www.cnblogs.com/ruish...
子组件：
16、Vue国际化处理 vue-i18n 以及项目自动切换中英文
https://www.cnblogs.com/nxmin...
https://www.cnblogs.com/wangw...
17、Vue实现组件信息的缓存
https://blog.csdn.net/u014628...
18、Vue中data和computed的区别
https://segmentfault.com/a/11...
data 和 computed都是响应式的
data中的属性并不会随赋值变量的改动而改动;当需要这种随赋值变量的改动而改动的时候，还是用计算属性computed合适
如果实在要在data里面声明属性，可以先赋一个值，然后在methods里面定义方法操作该属性，效果等同，也会有响应式
var vm = new Vue({
el: "#app",
data: {
firstname: "",
lastname: ""
},
methods: {
},
watch: {
},
computed:{
// 在 computed 中，可以定义一些 属性，这些属性，叫做 【计算属性】， 计算属性的，本质，就是 一个方法，只不过，我们在使用 这些计算属性的时候，是把 它们的 名称，直接当作 属性来使用的；并不会把 计算属性，当作方法去调用；
// 注意1： 计算属性，在引用的时候，一定不要加 () 去调用，直接把它 当作 普通 属性去使用就好了；
// 注意2： 只要 计算属性，这个 function 内部，所用到的 任何 data 中的数据发送了变化，就会 立即重新计算 这个 计算属性的值
// 注意3： 计算属性的求值结果，会被缓存起来，方便下次直接使用； 如果 计算属性方法中，所以来的任何数据，都没有发生过变化，则，不会重新对 计算属性求值；
"fullname":function () {
return this.firstname+this.lastname;
}
}
})
19、后台管理系统登录、权限：
https://juejin.im/post/591aa1...
https://www.cnblogs.com/heroz...
20、Axios封装：https://blog.csdn.net/qq_3814...
1、首先，在vue-cli项目的src路径下新建一个axios文件夹，在axios文件夹里新建aps.js和request.js，api.js用于写接口，对axios的封装写在request.js里
2、然后开始统一封装axios， 首先引入axios、qs依赖，引入main.js主要是用于后面对接口进行统一处理，比如调接口的时候，显示loading等。
3、然后创建一个axios实例，这个process.env.BASE_URL在config/dev.evn.js、prod.evn.js里面进行配置
4、axios实例创建好之后，开始使用request拦截器对axios请求配置做统一处理，然后是对response做统一处理
5、最后，将我们的axios实例暴露出去，整个axios的封装就写完了
6、axios封装好之后，调用就很简单了。我们把接口统一写在api.js文件里。（当然，如果你的业务非常复杂的话，建议把不同业务的api分开放到不同的文件里，这样方便以后维护）。然后在具体的组件中进行调用。
21、Vue.mixin() 可以将自定义的方法混入所有的 Vue 实例中。：https://segmentfault.com/a/11...
22、Vue keep-alive 实现后退缓存，前进刷新:https://blog.csdn.net/xyj3602...
在router.js里添加一个标识用于判断页面是否需要缓存.
23、vue的两大核心：数据驱动和组件
https://www.jianshu.com/p/293...
https://www.cnblogs.com/liuti...
24、路由传递参数：https://blog.csdn.net/crazywo...
25、vue全家桶：http://doc.liangxinghua.com/v...
26、hash和history两种模式之间的区别：
https://www.cnblogs.com/JRliu...
27、vue-router怎样实现页面跳转
https://blog.csdn.net/u014689...
https://www.cnblogs.com/wisew...
https://blog.csdn.net/sunshao...
28、vue $router和$route的区别
https://blog.csdn.net/wangguo...
29、vue中内置的组件
Vue中内置的组件有以下几种：
1）component
2）transition
3）transition-group
4）keep-alive
5）slot1）component组件：有两个属性---is inline-template
渲染一个‘元组件’为动态组件，按照"is"特性的值来渲染成那个组件
2）transition组件：为组件的载入和切换提供动画效果，具有非常强的可定制性，支持16个属性和12个事件
3）transition-group：作为多个元素/组件的过渡效果
4）keep-alive：包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
5）slot：作为组件模板之中的内容分发插槽，slot元素自身将被替换
30、Vue文本渲染三种方法 {{}}、v-html、v-text
{{ }}将元素当成纯文本输出
v-html会将元素当成HTML标签解析后输出
v-text会将元素当成纯文本输出
Vue文本渲染三种方法
{{hello}}
31、key
vue中列表循环需加:key="唯一标识" 唯一标识可以是item里面id index等，因为vue组件高度复用
增加Key可以标识组件的唯一性，为了更好地区别各个组件
key的作用主要是为了高效的更新虚拟DOMkey 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。
最常见的用例是结合 v-for：
v-for为什么要加key: https://www.jianshu.com/p/4bd...
32、 页面跳转后，回到此页面时，页面不刷新
https://www.cnblogs.com/yiyib...
33、Vue项目使用AES做加密：https://www.cnblogs.com/libo0...
前端对称加密--js对用户名密码进行DES加密：https://blog.csdn.net/frankch...（使用的是这种方式）
34、vue中使用vue-quill-editor富文本编辑器，自定义toolbar修改工具栏options：https://blog.csdn.net/div_ma/...
35、按钮级权限控制：https://www.jianshu.com/p/e50...
vue + vuex + directives实现权限按钮的思路： https://www.jianshu.com/p/eea...
要求权限控制到按钮级别,也就是说对于不同的用户,可操作的按钮是不一样的,换言之,有些按钮对某些客户是不可见的.例如:用户A能看到"新增"按钮,而用户B看不到？1.定义一个全局方法,配合v-if实现;在用户登录成功后,获取用户的按钮权限(数组格式),存储到store中，定义公共函数hasPermission，在main.js中引入,在需要的按钮上使用即可
2、通过directives在全局main.js中注册，自定义指令，页面中按钮只需加v-has即可。
1> meta字段里放入的是该用户在此页面能操作的按钮权限的标识permission，比如这个页面有add、edit、delele权限，但是你只想让这个用户使用add，那么就"permission": ["add"]
{
"path": "/system",
"component": "Layout",
"redirect": "/system/userList",
"name": "系统管理",
"meta": {
"title": "系统管理",
"icon": "el-icon-setting"
},
"children": [{
"path": "userList",
"name": "用户列表",
"component": "user/index",
"meta": {
"title": "用户列表",
"icon": "el-icon-tickets",
"permission": ["add"] //按钮权限
}
}
]
}
接着自定义指令btnPermission.js，在mian.js导入
import Vue from "vue"
/**权限指令**/
Vue.directive("has", {
inserted: function (el, binding, vnode) {
let permissionList = vnode.context.$route.meta.permission;
if (!permissionList || !permissionList.includes(binding.value.role)) {
el.parentNode.removeChild(el)
}
}
})
export { has }
使用：
添加
36、vue权限控制：https://www.jianshu.com/p/e5e...
vue实现菜单权限控制：https://www.cnblogs.com/ssh-0...
VUE 动态菜单及视图权限：https://www.jianshu.com/p/fca...
Vue 动态路由的实现(后台传递路由，前端拿到并生成侧边栏)：https://segmentfault.com/a/11...
Vue自定义指令实现按钮级权限控制功能：https://www.cnblogs.com/leeke...
37、了解ESlint和其相关操作：https://www.jianshu.com/p/f75...
38、devtools调试工具
39、谈谈你对vue的认识：https://blog.csdn.net/keep789...
40、vue中的所有axios请求都会发送2次，但是第一次不返回数据的原因
原因：跨域请求之前首先要发送options请求，询问服务器是否有权限访问，是否允许该请求类型，如果允许则发起实际请求。
浏览器分为简单请求以及非简单请求：
解决方案：
跨域请求需要先发一次Option预请求，OPTIONS是检验是否允许跨域的，如果不希望OPTIONS请求， 直接让后端遇到option直接返回就可以了，前端可不做处理。
跨域资源共享 CORS 详解：http://www.ruanyifeng.com/blo...
41、VUE的两种跳转push和replace对比区别
https://www.cnblogs.com/both-...this.$router.push()
跳转到不同的url，但这个方法会向history栈添加一个记录，点击后退会返回到上一个页面。
this.$router.replace()
同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。
this.$router.go(n)
相对于当前页面向前或向后跳转多少个页面,类似 window.history.go(n)。n可为正数可为负数。正数返回上一个页面
42、computed和watch
computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择
watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象
watch一般用于监控路由、input输入框的值特殊处理等等，它比较适合的场景是一个数据影响多个数据
43、全局钩子router.beforeEach作用于所有路由，里面的参数
to表示即将要进入的路由对象，
from表示即将要离开的路由对象，
next是继续跳转或中断的方法。
router.beforeEach((to,from,next) => {
console.log(to)
console.log(from)
})
44、vue+axios 前端实现登录拦截（路由拦截、http拦截）：https://www.cnblogs.com/guoxi...
首先在定义路由的时候就需要多添加一个自定义字段requireAuth（true or false），在需要登录的路由的meta中添加响应的权限标识requireAuth，通过这个字段来判断该路由是否需要登录权限，再通过vuex state获取当前的token是否存在，需要的话，同时当前应用不存在token，则跳转到登录页面，进行登录，登录成功后跳转到目标路由。如果用户已经登录，则顺利进入路由，否则就进入登录页面。
//使用钩子函数对路由进行权限跳转
router.beforeEach((to, from, next) => {
if (to.matched.some(r => r.meta.requireAuth)) {
if (store.getters.token) {
next();
} else {
next({
path: "/login",
query: {redirect: to.fullPath} // 将跳转的路由path作为参数，登录成功后跳转到该路由
})
}
}else {
next();
}
});
45、动态路由加载权限菜单
vue项目实现动态路由的方式大体可分为两种:
1.前端这边把路由写好，登录的时候根据用户的角色权限来动态展示路由(前端控制路由)
2.后台传来当前用户对应权限的路由表，前端通过调接口拿到后处理(后端处理路由)
beforeEach路由拦截，进入判断，如果发现本地没有路由数据，那就利用axios后台取一次，取完以后，利用localStorage存储起来，利用addRoutes动态添加路由。
46、懒加载
component: resolve => require(["../page/my/my.vue"], resolve),//懒加载
懒加载的最终实现方案
1、路由页面以及路由页面中的组件全都使用懒加载
优点：（1）最大化的实现随用随载
（2）团队开发不会因为沟通问题造成资源的重复浪费
缺点：（1）当一个页面中嵌套多个组件时将发送多次的http请求，可能会造成网页显示过慢且渲染参差不齐的问题2、路由页面使用懒加载， 而路由页面中的组件按需进行懒加载, 即如果组件不大且使用不太频繁, 直接在路由页面中导入组件, 如果组件使用较为频繁使用懒加载
优点：（1）能够减少页面中的http请求，页面显示效果好
缺点：（2）需要团队事先交流， 在框架中分别建立懒加载组件与非懒加载组件文件夹3、路由页面使用懒加载，在不特别影响首页显示延迟的情况下，根页面合理导入复用组件，再结合方案2
优点：（1）合理解决首页延迟显示问题
（2）能够最大化的减少http请求， 且做其他他路由界面的显示效果最佳
缺点：（1）还是需要团队交流，建立合理区分各种加载方式的组件文件夹
47、router-link 与 router-view：https://www.cnblogs.com/dongz...
在菜单栏使用router-link配置菜单连接地址，使用router-view 显示连接地址的详细内容是用来渲染通过路由映射过来的组件，当路径更改时， 中的内容也会发生更改
48、easy-mock: https://segmentfault.com/a/11...
https://www.easy-mock.com/docs
49、Vue中v-if和v-show的使用场景：https://blog.csdn.net/grapelo...
50、v-show和v-if指令的共同点和不同点：
共同点：
v-if和v-show都是通过判断绑定数据的truefalse来展示不同点：
v-if只有在判断为true的时候才会对数据进行渲染，false的时候把包含的代码进行删除。除非再次进行数据渲染，v-if才会重新判断。可以说是用法比较倾向于对数据一次操作。
v-show是无论判断是什么都会先对数据进行渲染，只是false的时候对节点进行display:none;的操作。所以再不重新渲染数据的情况下，改变数据的值可以使数据展示或隐藏。
vue-show本质就是标签display设置为none，控制隐藏
vue-if是动态的向DOM树内添加或者删除DOM元素
51、如何让CSS只在当前组件中起作用:
将当前组件的