VUE知识点集锦

2024年3月8日 142次阅读来源: 看烟花坠落的浅殇

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 可以包含恣意异步操纵。
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、

    原文作者：看烟花坠落的浅殇
    原文地址: https://segmentfault.com/a/1190000018553871
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。