VUE知识点集锦

时间 2019-12-06

标签 vue 知识集锦繁體版

原文原文链接

vue基础

一、 router 路由与 a 标签的区别：https://www.jianshu.com/p/34b...
二、 VUE双向绑定的原理：php

答：VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法从新定义了对象获取属性值(get)和设置属性值(set)的操做来实现的。Vue的双向数据绑定就是只要在读取值（getter）时收集观察者，在赋值（setter）时触发观察者更新函数，就能够实现数据变动，从而实现DOM从新渲染。

三、vue2.0中router-link详解：https://blog.csdn.net/lhjueji...
四、 vue项目开发前的es6的知识储备:https://www.cnblogs.com/untir...
五、箭头函数和普通函数的区别：https://www.jianshu.com/p/73c...css

总结：
1>箭头函数写代码拥有更加简洁的语法；
2>箭头函数的this永远指向其上下文的 this，任何方法都改变不了其指向，如call(), bind(), apply(); 普通函数的this指向调用它的那个对象

六、Vue的生命周期，详细介绍各个阶段html

建立前/后
在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个阶段：建立前/后, 载入前/后,更新前/后,销毁前/销毁后.

七、简单描述每一个周期具体适合哪些场景？前端

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

八、 vue-router实现原理vue

根据url来path匹配相应的 component ，在把匹配到的component渲染到指定的dom上就行了
vue-router是vue的路由插件,组件：router-link router-view
说简单点，vue-router的原理就是经过对URL地址变化的监听，继而对不一样的组件进行渲染。每当URL地址改变时，就对相应的组件进行渲染。原理是很简单，实现方式可能有点复杂，主要有hash模式和history模式。html5

九、Vuex各个状态node

有 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 能够包含任意异步操做。
modeules 项目特别复杂的时候，可让每个模块拥有本身的state,mutation,action,getters，使得结构很是清晰，方便管理jquery

十、axios是什么？怎么使用？描述使用它实现登陆功能的流程webpack

axios是请求后台资源的模块。 npm i axios -S
若是发送的是跨域请求，需在配置文件中 config/index.js 进行配置

十一、兄弟组件，父子传值ios

父---子 父组件经过标签传值，子组件经过props接收
子---父 经过this.$emit将方法和数据传递给父组件，父组件经过$on接收
1.父组件与子组件传值
父组件传给子组件：子组件经过props方法接受数据；
子组件传给父组件：$emit方法传递参数;
2.非父子组件间的数据传递，兄弟组件传值
EventBus，就是建立一个事件中心，至关于中转站，能够用它来传递事件和接受事件，项目比较小时，用这个比较合适；
VueX，建立一个数据仓库，整个项目全局均可以往这个仓库存放数据和读取数据
若是父组件想要调用子组件的方法
vue会给子组件添加一个ref属性，经过this.$refs.ref的值即可以获取到该子组件，而后即可以调用子组件中的任意方法

十二、vue怎么实现页面的权限控制

利用 vue-router 的 beforeEach 事件，能够在跳转页面前判断用户的权限（利用 cookie 或 token），是否可以进入此页面，若是不能则提示错误或重定向到其余页面，在后台管理系统中这种场景常常能遇到。

1三、vue里面的虚拟dom

简单来讲，虚拟DOM是用Object来表明一颗节点，这个Object叫作VNode，而后使用两个VNode进行对比，根据对比后的结果修改真实DOM。
为何是两个VNode？由于每次渲染都会生成一个新的VNode，而后和上一次渲染时用的VNode进行对比。而后将这一次新生成的VNode缓存，用来进行下一次对比。

1四、vue中scoped的原理：https://www.jianshu.com/p/b92...

加了 scoped 的话，编译的时候就把对应的选择器和对应的元素绑定一个由全局惟一的字符串产生的属性。vue经过在DOM结构以及css样式上加上惟一的标记，保证惟一，达到样式私有化，不污染全局的做用

1五、如何解决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>

1六、Vue国际化处理 vue-i18n 以及项目自动切换中英文
https://www.cnblogs.com/nxmin...
https://www.cnblogs.com/wangw...
1七、Vue实现组件信息的缓存
https://blog.csdn.net/u014628...
1八、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;
            }
        }
    })

1九、后台管理系统登陆、权限：
https://juejin.im/post/591aa1...
https://www.cnblogs.com/heroz...
20、Axios封装：https://blog.csdn.net/qq_3814...

一、首先，在vue-cli项目的src路径下新建一个axios文件夹，在axios文件夹里新建aps.js和request.js，api.js用于写接口，对axios的封装写在request.js里
二、而后开始统一封装axios，首先引入axios、qs依赖，引入main.js主要是用于后面对接口进行统一处理，好比调接口的时候，显示loading等。
三、而后建立一个axios实例，这个process.env.BASE_URL在config/dev.evn.js、prod.evn.js里面进行配置
四、axios实例建立好以后，开始使用request拦截器对axios请求配置作统一处理，而后是对response作统一处理
五、最后，将咱们的axios实例暴露出去，整个axios的封装就写完了
六、axios封装好以后，调用就很简单了。咱们把接口统一写在api.js文件里。（固然，若是你的业务很是复杂的话，建议把不一样业务的api分开放到不一样的文件里，这样方便之后维护）。而后在具体的组件中进行调用。

2一、Vue.mixin() 能够将自定义的方法混入全部的 Vue 实例中。：https://segmentfault.com/a/11...
2二、Vue keep-alive 实现后退缓存，前进刷新:https://blog.csdn.net/xyj3602...

在router.js里添加一个标识用于判断页面是否须要缓存.

2三、vue的两大核心：数据驱动和组件
https://www.jianshu.com/p/293...
https://www.cnblogs.com/liuti...
2四、路由传递参数：https://blog.csdn.net/crazywo...
2五、vue全家桶：http://doc.liangxinghua.com/v...
2六、hash和history两种模式之间的区别：
https://www.cnblogs.com/JRliu...
2七、vue-router怎样实现页面跳转
https://blog.csdn.net/u014689...
https://www.cnblogs.com/wisew...
https://blog.csdn.net/sunshao...
2八、vue $router和$route的区别
https://blog.csdn.net/wangguo...
2九、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>

3一、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...

3二、页面跳转后，回到此页面时，页面不刷新
https://www.cnblogs.com/yiyib...
3三、Vue项目使用AES作加密：https://www.cnblogs.com/libo0...
前端对称加密--js对用户名密码进行DES加密：https://blog.csdn.net/frankch...（使用的是这种方式）
3四、vue中使用vue-quill-editor富文本编辑器，自定义toolbar修改工具栏options：https://blog.csdn.net/div_ma/...
3五、按钮级权限控制：https://www.jianshu.com/p/e50...
vue + vuex + directives实现权限按钮的思路： https://www.jianshu.com/p/eea...

要求权限控制到按钮级别,也就是说对于不一样的用户,可操做的按钮是不同的,换言之,有些按钮对某些客户是不可见的.例如:用户A能看到"新增"按钮,而用户B看不到？
1.定义一个全局方法,配合v-if实现;在用户登陆成功后,获取用户的按钮权限(数组格式),存储到store中，定义公共函数hasPermission，在main.js中引入,在须要的按钮上使用便可
二、经过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>

3六、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...
3七、了解ESlint和其相关操做：https://www.jianshu.com/p/f75...
3八、devtools调试工具
3九、谈谈你对vue的认识：https://blog.csdn.net/keep789...
40、vue中的全部axios请求都会发送2次，可是第一次不返回数据的缘由

缘由：跨域请求以前首先要发送options请求，询问服务器是否有权限访问，是否容许该请求类型，若是容许则发起实际请求。

浏览器分为简单请求以及非简单请求：

解决方案：
跨域请求须要先发一次Option预请求，OPTIONS是检验是否容许跨域的，若是不但愿OPTIONS请求，直接让后端遇到option直接返回就能够了，前端可不作处理。
跨域资源共享 CORS 详解： http://www.ruanyifeng.com/blo...
4一、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可为正数可为负数。正数返回上一个页面

4二、computed和watch

computed用来监控本身定义的变量，该变量不在data里面声明，直接在computed里面定义，而后就能够在页面上进行双向数据绑定展现出结果或者用做其余处理；
computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则咱们监控的这个值也就会发生变化，举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减小或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择
watch主要用于监控vue实例的变化，它监控的变量固然必须在data里面声明才能够，它能够监控一个变量，也能够是一个对象
watch通常用于监控路由、input输入框的值特殊处理等等，它比较适合的场景是一个数据影响多个数据

4三、全局钩子router.beforeEach做用于全部路由，里面的参数

to表示即将要进入的路由对象，
from表示即将要离开的路由对象，
next是继续跳转或中断的方法。

router.beforeEach((to,from,next) => {
    console.log(to)
    console.log(from)
})

4四、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();
    }
    });

4五、动态路由加载权限菜单

vue项目实现动态路由的方式大致可分为两种:
1.前端这边把路由写好，登陆的时候根据用户的角色权限来动态展现路由(前端控制路由)
2.后台传来当前用户对应权限的路由表，前端经过调接口拿到后处理(后端处理路由)
beforeEach路由拦截，进入判断，若是发现本地没有路由数据，那就利用axios后台取一次，取完之后，利用localStorage存储起来，利用addRoutes动态添加路由。

4六、懒加载

component:  resolve => require(['../page/my/my.vue'], resolve),//懒加载

懒加载的最终实现方案

一、路由页面以及路由页面中的组件全都使用懒加载
　　优势：（1）最大化的实现随用随载
　　　　　（2）团队开发不会由于沟通问题形成资源的重复浪费　　　　
　　缺点：（1）当一个页面中嵌套多个组件时将发送屡次的http请求，可能会形成网页显示过慢且渲染良莠不齐的问题
二、路由页面使用懒加载，而路由页面中的组件按需进行懒加载, 即若是组件不大且使用不太频繁, 直接在路由页面中导入组件, 若是组件使用较为频繁使用懒加载
　　优势：（1）可以减小页面中的http请求，页面显示效果好
　　缺点：（2）须要团队事先交流，在框架中分别创建懒加载组件与非懒加载组件文件夹

三、路由页面使用懒加载，在不特别影响首页显示延迟的状况下，根页面合理导入复用组件，再结合方案2
　　优势：（1）合理解决首页延迟显示问题
　　　　　（2）可以最大化的减小http请求，且作其余他路由界面的显示效果最佳
　　缺点：（1）仍是须要团队交流，创建合理区分各类加载方式的组件文件夹

4七、router-link 与 router-view：https://www.cnblogs.com/dongz...

在菜单栏使用router-link配置菜单链接地址，使用router-view 显示链接地址的详细内容
<router-view> 是用来渲染经过路由映射过来的组件，当路径更改时，<router-view> 中的内容也会发生更改

4八、easy-mock: https://segmentfault.com/a/11...

https://www.easy-mock.com/docs

4九、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元素

5一、如何让CSS只在当前组件中起做用:

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

5二、什么是vue生命周期

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

5三、vue生命周期的做用是什么

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

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

答：能够总共分为8个阶段：建立前/后, 载入前/后,更新前/后,销毁前/销毁后

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

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

5六、DOM 渲染在哪一个周期中就已经完成

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

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

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

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

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

5九、为何避免 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节点，从而提升渲染效率。

6一、为何叫virtual-dom，实质是什么？

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

6二、computed和methods的区别。

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

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

6三、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。

6三、实现vue2.0响应式的基本思路：http://www.cnblogs.com/caizhe...
https://www.cnblogs.com/caizh...
6四、v-if与v-show的区别:https://www.cnblogs.com/echol...
6五、v-for和v-if：https://www.jianshu.com/p/0f6...
6六、Vue.js面试题整理 : https://www.jianshu.com/p/b1d...
6七、vue兄弟组件之间的传参：https://www.jianshu.com/p/e2e...
6八、vue面试中，常常会被问到的面试题：https://www.jianshu.com/p/662...
6九、vue和微信小程序的区别、比较：https://segmentfault.com/a/11...
70、ajax和axios、fetch的区别：https://www.jianshu.com/p/8bc...
7一、jquery和vue对比：https://www.cnblogs.com/MR-YY...
7二、vue数组添加属性，渲染失败缘由及解决方案。
https://www.cnblogs.com/tugen...
7三、Vue中this.$router.push参数获取:https://blog.csdn.net/qq_1564...
7四、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 引用的外部组件。

举例说明

一、列表添加一个元素,vue只须要向数据message里面push一条数据便可完成添加一个li标签的操做，而jquery则须要获取dom元素节点，并对dom进行添加一个标签的操做，若是dom结构特别复杂，或者添加的元素很是复杂，则代码会变得很是复杂且阅读性低。
二、控制按钮的显示隐藏，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）

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

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

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

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

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

1)登陆：当用户填写完帐号和密码后向服务端验证是否正确，验证经过以后，服务端会返回一个token，拿到token以后（我会将这个token存贮到cookie中，保证刷新页面后能记住用户登陆状态），前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息（如用户权限，用户名等等信息）。
2)权限验证：经过token获取用户对应的 role，动态根据用户的 role 算出其对应有权限的路由，经过 router.addRoutes 动态挂载这些路由。

vue-router

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

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

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

vuex

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

ElementUI

一、element ui 表格合并单元格

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

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

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

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

webpack

热刷新是什么呢？

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

先后端交互

一、先后端和产品一块儿开会讨论项目，以后后端根据需求，首先定义数据格式和api，而后 mock api 生成好文档，咱们前端才是对接接口的。
二、先后端交互不可避免的就会遇到跨域问题，后端配置容许跨域，通常是不容许的，前端能够设置nginx反代理。
三、前端分页和后端分页。

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

Boostrap

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

其主要规则是：
一、一个.row应该包含在一个.container当中，才能由于内外边距的正负抵消而有合适的对齐。
二、在.row当中建立一组.column造成水平方向上的容器。
三、具体内容应该放在.column中，并且只有.column能够做为.row的直接子元素。
二、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) { ... }

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

优势：
比较成熟，在大量的项目中充分的使用和测试，界面和谐，容易上手，可快速开发，节省时间，再也不浪费时间写脚本；
响应式框架，经过多个浏览器测试，对将来的技术具备兼容性；
拥有完善的文档，使用起来更方便，有大量的组件样式，接受定制；
缺点：
框架很是的详细，大量的组件样式，这既是优势也是缺点，由于定制化很高，你能够直接拿过来就用。
若是有本身特殊的需求，就须要从新定制样式，若是一个网站中有大量的非bootstrap“风格”的样式存在，那么你就须要作大量的css重写，所以也就失去了使用框架的意义。在不少状况下，最好的就是选择一个有最少样式的框架，由于这样的话比较容易自定义。添加新的css规则要比复写现有的样式规则方便多了，并且若是你在现有的样式上添加新的样式，这确定会增长css文件的大小。
class 命名不够语义化，而且各类缩写，最近开始整混合 APP，选框架的时候首选就是它，但以前搞 PC 一直没注意，后来搞混合右键属性看它的时候，瞬间一阵凉风袭来，Bootstrap好小，小到我只好选择别的框架。

小程序

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

ES6

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

let 声明变量的特色：
let 声明的变量只在它所在的代码块有效
不存在变量提高
不能够重复声明

webpack

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