VUE知识点集锦

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、module

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

action:{
  resetState({commit}){
  deleteToken()
  commit('user/setToken','')
  commit('user/userInfo',{})
  }
}

this.$store.dispatch('resetState')

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...

<style lang="css" scoped>

 header /deep/ .header{     

   box-shadow:0px 1px 0px 0px $white;

  }

</style>

子组件：

<template>  

 <header>    

    <p class="header">       

    </p>   

  </header>

</template>

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）slot

1）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会将元素当成纯文本输出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue文本渲染三种方法</title>
</head>
<body>
    <div id="app">
         <!--   {}}/v-text不能解析html元素，只会照样输出 -->
         <p>{{hello}}</p>
        <p v-text = 'hello'></p>
        <p v-html = 'hello'></p>
    </div>
</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            hello:'<span>hello world</span>'
        }
    })
</script>
</html>

31、key

vue中列表循环需加:key="唯一标识" 唯一标识可以是item里面id index等，因为vue组件高度复用
增加Key可以标识组件的唯一性，为了更好地区别各个组件
key的作用主要是为了高效的更新虚拟DOM

key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

最常见的用例是结合 v-for：

<ul>
  <li v-for="item in items" :key="item.id">...</li>
</ul>

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 }

使用：

<el-button type="success" icon="el-icon-circle-plus-outline" @click="handeleAdd" v-has="{role : 'add'}">添加</el-button>

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 显示连接地址的详细内容
<router-view> 是用来渲染通过路由映射过来的组件，当路径更改时，<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只在当前组件中起作用:

将当前组件的<style>修改为<style scoped>

52、什么是vue生命周期

答： Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

53、vue生命周期的作用是什么

答：它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

54、vue生命周期总共有几个阶段

答：可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后

55、第一次页面加载会触发哪几个钩子

答：第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

56、DOM 渲染在 哪个周期中就已经完成

答：DOM 渲染在 mounted 中就已经完成了。

57、简单描述每个周期具体适合哪些场景

答：生命周期钩子的一些使用方法：
beforecreate : 可以在这加个loading事件，在加载实例时触发
created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
mounted : 挂载元素，获取到DOM节点
updated : 如果对数据统一处理，在这里写上相应函数
beforeDestroy : 可以做一个确认停止事件的确认框
nextTick : 更新数据后立即操作dom

58、说出至少4种vue当中的指令和它的用法？

v-if：判断是否隐藏；v-for：数据循环；v-bind:class：绑定一个属性；v-model：实现双向绑定

59、为什么避免 v-if 和 v-for 用在一起

当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级，通过v-if 移动到容器元素，不会再重复遍历列表中的每个值。取而代之的是，我们只检查它一次，且不会在 v-if 为否的时候运算 v-for。

60、VNode是什么？虚拟 DOM是什么？

Vue在 页面上渲染的节点，及其子节点称为“虚拟节点 (Virtual Node)”，简写为“VNode”。“虚拟 DOM”是由 Vue 组件树建立起来的整个 VNode 树的称呼。
为什么使用virtual-dom？因为直接频繁地操作dom会有很高的性能消耗
为什么要使用虚拟DOM？
之前使用原生js或者jquery写页面的时候会发现操作DOM是一件非常麻烦的一件事情，往往是DOM标签和js逻辑同时写在js文件里，数据交互时不时还要写很多的input隐藏域，如果没有好的代码规范的话会显得代码非常冗余混乱，耦合性高并且难以维护。
另外一方面在浏览器里一遍又一遍的渲染DOM是非常非常消耗性能的，常常会出现页面卡死的情况；所以尽量减少对DOM的操作成为了优化前端性能的必要手段，vdom就是将DOM的对比放在了js层，通过对比不同之处来选择新渲染DOM节点，从而提高渲染效率。

61、为什么叫virtual-dom，实质是什么？

顾名思义，虚拟dom，使用JS对象模拟dom进行操作（vue中叫做vnode）

62、computed和methods的区别。

1> 写法上的区别是computed计算属性的方式在用属性时不用加(),而methods方式在使用时要像方法一样去用，必须加()
2> computed只在初始化时被调用；methods会在数据变化时被调用, 即使变动的数据与自身无关。
3> computed是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值；methods在重新渲染的时候，函数总会重新调用执行。所以使用computed会比methods方法性能更好。

https://www.cnblogs.com/rainb...
https://segmentfault.com/a/11...

63、Mutation和Action的区别

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

action：简单来说就是异步操作数据
mutation：把处理数据逻辑方法全部放在mutation里面使数据和视图分离（vuex中store数据改变唯一的方法就是mutation）

流程顺序
“相应视图—>修改State”拆分成两部分，视图触发Action，Action再触发Mutation。
角色定位
基于流程顺序，二者扮演不同的角色。
Mutation：专注于修改State，理论上是修改State的唯一途径。
Action：业务代码、异步请求。
限制
角色不同，二者有不同的限制。
Mutation：必须同步执行。
Action：可以异步，但不能直接操作State。

63、实现vue2.0响应式的基本思路：http://www.cnblogs.com/caizhe...
https://www.cnblogs.com/caizh...
64、v-if与v-show的区别:https://www.cnblogs.com/echol...
65、v-for和v-if：https://www.jianshu.com/p/0f6...
66、Vue.js面试题整理 : https://www.jianshu.com/p/b1d...
67、vue兄弟组件之间的传参：https://www.jianshu.com/p/e2e...
68、vue面试中，经常会被问到的面试题：https://www.jianshu.com/p/662...
69、vue和微信小程序的区别、比较：https://segmentfault.com/a/11...
70、ajax和axios、fetch的区别：https://www.jianshu.com/p/8bc...
71、jquery和vue对比：https://www.cnblogs.com/MR-YY...
72、vue数组添加属性，渲染失败原因及解决方案。
https://www.cnblogs.com/tugen...
73、Vue中this.$router.push参数获取:https://blog.csdn.net/qq_1564...
74、Vue2.0 阻止事件冒泡
https://www.jianshu.com/p/62f...

jquery和vue对比

vue是基于mvvm思想设计的框架，无非就是实现的方式不一样，在不同场景下性能上会有一些差异
根本区别：将原有的直接操作dom的思想转变到操作数据。
它通过双向数据绑定把 View 层和 Model 层连接了起来，通过对数据的操作就可以完成对页面视图的渲染。
jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：$("lable").val();,它还是依赖DOM元素的值。
Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。
vue适用的场景：复杂数据操作的后台页面，表单填写页面
jquery适用的场景：比如说一些html5的动画页面，一些需要js来操作页面样式的页面。
然而二者也是可以结合起来一起使用的，vue侧重数据绑定，jquery侧重样式操作，动画效果等，则会更加高效率的完成业务需求。
build目录为webpack打包文件，dist目录为打包后生成的文件，node_modules 引用的外部组件。

• 举例说明

1、列表添加一个元素,vue只需要向数据message里面push一条数据即可完成添加一个li标签的操作，而jquery则需要获取dom元素节点，并对dom进行添加一个标签的操作，如果dom结构特别复杂，或者添加的元素非常复杂，则代码会变得非常复杂且阅读性低。
2、控制按钮的显示隐藏，vue只需要控制属性isShow的值为true和false即可，而jquery则还是需要操作dom元素控制按钮的显示和隐藏

vue-resource和axios的区别

vue2.0之后，就不再对vue-resource更新，而是推荐使用axios。基于 Promise 的 HTTP 请求客户端，可同时在浏览器和 Node.js 中使用

axios与ajax的区别

axios基于Promise用于浏览器和node.js的的HTTP客户端。
axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。
简单来说： ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。
jquery提交数据的时候，默认是以FormData的形式提交的，也就是Content-Type:"application/x-www-form-urlencoded",而axios默认是以Payload形式提交数据，也就是Content-Type:"application/json"

兄弟组件传递

父---子 父组件通过标签传值，子组件通过props接收
子---父 通过this.$emit将方法和数据传递给父组件，父组件通过$on接收

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

如果父组件想要调用子组件的方法
vue会给子组件添加一个ref属性，通过this.$refs.ref的值便可以获取到该子组件，然后便可以调用子组件中的任意方法

vue和小程序区别及进程

链接描述

项目步骤（vue）

1、build和config是webpack的配置文件，src中存放着框架的主要文件，api是已经封装好的api请求，components是我们的UI组件。mock是便于我们前端调试的一个工具，可以截获http请求，返回数据，从而做到独立于后端开发，加快我们的开发进度，当我们需要请求服务器的时候要把这个文件夹删掉。是用vue-cli的webpack-template为基础模板构建的。

2、当我们需要提交页面放到服务器上也很简单，运行
npm run build:prod
项目目录下就会多出一个dist文件夹，里面有index.html文件和static文件夹，放在服务器上就行。不需要在服务器上安装任何环境，甚至不需要node即可。再也不用为发布项目操心了。

3、使用单页应用强大的路由来做登录。框架采用的是拦截导航，判断登录与否和是否有权限，让它完成继续跳转或重定向到登录界面。判断token是否存在，如果存在token，就继续路由跳转，如果不存在，就跳转到登录界面。

4、登录流程是在客户端发送账号密码到服务端，服务端验证成功后返回token存储用户的权限，前端用Cookie把token存储在本地，在路由跳转（router.beforeEach）中判断是否存在token，另外前端可以通过token请求服务端获取userInfo，在vuex中存储着用户的信息（用户名，头像，注册时间等等）。登录成功后，服务端会返回一个token（该token的是一个能唯一标示用户身份的一个key），之后我们将token存储在本地cookie之中，这样下次打开页面或者刷新页面的时候能记住用户的登录状态，不用再去登录页面重新登录了。ps:为了保证安全性，我司现在后台所有token有效期(Expires/Max-Age)都是Session，就是当浏览器关闭了就丢失了。重新打开游览器都需要重新登录验证，后端也会在每周固定一个时间点重新刷新token，让后台用户全部重新登录一次，确保后台用户不会因为电脑遗失或者其它原因被人随意使用账号。

5、权限控制就是在路由跳转（router.beforeEach）中判断token中的权限和要去往(to)页面的路由信息(router meta)中配置的权限是否匹配，同时我们的侧边栏也是根据权限动态生成的，当所登录的账号没有权限访问时，就不显示在侧边栏中（例如访客登录就无法看到编辑器的侧边栏选项），这样用户既看不到侧边栏选项，又无法直接访问到，双重控制更安全。

1)登录：当用户填写完账号和密码后向服务端验证是否正确，验证通过之后，服务端会返回一个token，拿到token之后（我会将这个token存贮到cookie中，保证刷新页面后能记住用户登录状态），前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息（如用户权限，用户名等等信息）。

2)权限验证：通过token获取用户对应的 role，动态根据用户的 role 算出其对应有权限的路由，通过 router.addRoutes 动态挂载这些路由。

vue-router

1、组件，顾名思义就是一组元素组成的一个原件（理解的比较浅显、直白），在Vue.js中，表现为一个自定义元素。

2、template是放置组件的组成部分——html元素的地方，是整个组件的模板构成，会在另一个引用这个文件的组件中显示出来。

3、用vue主要开发单页面应用，没有页面之间的跳转，在vue中，一个所谓的“页面”实则是一个看起来很像“页面”的一个组件（这个组件大部分情况下包含其他子组件）而已。vue-router是在vue中控制路由的。ps：如果你不太理解路由这个概念，可以简单的理解为url重的hash部分，只不过vue做了一些封装和完善。要控制路由，还需要借助两个vue-router自带的两个组件router-view和router-link。

vuex

1、vuex是什么？怎么使用？哪种功能场景使用它？
vue框架中状态管理。在main.js引入store，注入。新建一个目录store，….. export 。场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车
2、vuex有哪几种属性？
有五种，分别是 State、 Getter、Mutation 、Action、 Module。
3、Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
4、你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交(commit) mutations。有些数据还是需要用 vuex 来统一管理的，如登录token,用户信息，或者是一些全局个人偏好设置等，还是用vuex管理更加的方便。后台项目，每一个请求都是要带 token 来验证权限的。
5、Vuex详解：https://segmentfault.com/a/11...

ElementUI

1、element ui 表格合并单元格

主要是根据data中的column_row_offset表示哪几行要合并。

2、input校验输入长度, 当输入长度超过8位数

<input type="text" maxlength="9" v-model="data" @input="verifyData">

verifyData() {
  if (this.data.length > 8) {
    Toast('已超过最大的充值额度');
  }
},

webpack

热刷新是什么呢？

就是我们该完代码保存之后webpack会自动打包引起浏览器自动刷新，你只需要把精力都专注在代码研发上不需要再分散精力在打包上。节省了时间和精力，效率更高了。

前后端交互

1、前后端和产品一起开会讨论项目，之后后端根据需求，首先定义数据格式和api，然后 mock api 生成好文档，我们前端才是对接接口的。
2、前后端交互不可避免的就会遇到跨域问题，后端配置允许跨域，一般是不允许的，前端可以设置nginx反代理。
3、前端分页和后端分页。

前端分页
前端分页一般用于数据量较小的情况，一次请求把数据全部从后端请求回来。
后端分页
后端分页适用于数据量偏大时的情况，减小请求传输压力。前端需要将每页条数和当前页传给后端，后端根据条件查询出数据再传给前端，包括总条数、当前页、每页多少条数据等。
前端显示的当前页和每页多少条数据由后端传回的数据决定，否则出现改变前端参数，还未发请求时，页码的错乱。
当改变每页多少条时，当前页参数置为首页。

Boostrap

1、在Bootstrap中，栅格系统将容器均分为12份，再调整内外边距，结合媒体查询，造就了这一强大的栅格系统。

其主要规则是：
1、一个.row应该包含在一个.container当中，才能因为内外边距的正负抵消而有合适的对齐。
2、在.row当中创建一组.column形成水平方向上的容器。
3、具体内容应该放在.column中，而且只有.column可以作为.row的直接子元素。
2、Bootstrap面试题：https://www.jianshu.com/p/798...

网格的基本结构

<div class="container">

   <div class="row">

      <div class="col-*-*"></div>

      <div class="col-*-*"></div>      

   </div>

   <div class="row">...</div>

</div>

<div class="container">....

/* 超小设备（手机，小于 768px） */

/* Bootstrap 中默认情况下没有媒体查询 */

/* 小型设备（平板电脑，768px 起） */

@media (min-width: @screen-sm-min) { ... }

/* 中型设备（台式电脑，992px 起） */

@media (min-width: @screen-md-min) { ... }

/* 大型设备（大台式电脑，1200px 起） */

@media (min-width: @screen-lg-min) { ... }

2、是否使用过bootstrap，说说他的优缺点

优点：
比较成熟，在大量的项目中充分的使用和测试，界面和谐，容易上手，可快速开发，节省时间，不再浪费时间写脚本；
响应式框架，通过多个浏览器测试，对未来的技术具有兼容性；
拥有完善的文档，使用起来更方便，有大量的组件样式，接受定制；

缺点：
框架非常的详细，大量的组件样式，这既是优点也是缺点，因为定制化很高，你可以直接拿过来就用。
如果有自己特殊的需求，就需要重新定制样式，如果一个网站中有大量的非bootstrap“风格”的样式存在，那么你就需要做大量的css重写，因此也就失去了使用框架的意义。在很多情况下，最好的就是选择一个有最少样式的框架，因为这样的话比较容易自定义。添加新的css规则要比复写现有的样式规则方便多了，而且如果你在现有的样式上添加新的样式，这肯定会增加css文件的大小。
class 命名不够语义化，并且各种缩写，最近开始整混合 APP，选框架的时候首选就是它，但之前搞 PC 一直没注意，后来搞混合右键属性看它的时候，瞬间一阵凉风袭来，Bootstrap好小，小到我只好选择别的框架。

小程序

1、10道经典小程序面试题了解一下：https://www.jianshu.com/p/832...
2、微信小程序必知面试题：https://www.jianshu.com/p/782...
3、小程序生命周期：https://www.cnblogs.com/fozer...

ES6

1、js中const,var,let区别：https://www.cnblogs.com/ksl66...

let 声明变量的特点：
let 声明的变量只在它所在的代码块有效
不存在变量提升
不可以重复声明

webpack

1、webpack build后生成的app、vendor、manifest区别；以及按需加载: http://www.pianshen.com/artic...
2、