javascriptVUE知识点集锦像风一样

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

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

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

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

this.$router.push()跳转到不同的url，但这个方法会向history栈添加一个记录，点击后退会返回到上一个页面。this.$router.replace()同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。this.$router.go(n)相对于当前页面向前或向后跳转多少个页面,类似window.history.go(n)。n可为正数可为负数。正数返回上一个页面

42、computed和watch

43、全局钩子router.beforeEach作用于所有路由，里面的参数

46、懒加载

component:resolve=>require(['../page/my/my.vue'],resolve),//懒加载懒加载的最终实现方案

50、v-show和v-if指令的共同点和不同点：

不同点：v-if只有在判断为true的时候才会对数据进行渲染，false的时候把包含的代码进行删除。除非再次进行数据渲染，v-if才会重新判断。可以说是用法比较倾向于对数据一次操作。v-show是无论判断是什么都会先对数据进行渲染，只是false的时候对节点进行display:none;的操作。所以再不重新渲染数据的情况下，改变数据的值可以使数据展示或隐藏。vue-show本质就是标签display设置为none，控制隐藏vue-if是动态的向DOM树内添加或者删除DOM元素

51、如何让CSS只在当前组件中起作用:

52、什么是vue生命周期

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

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

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

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

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

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

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

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

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

62、computed和methods的区别。

63、Mutation和Action的区别

conststore=newVuex.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。

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元素控制按钮的显示和隐藏

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

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的值便可以获取到该子组件，然后便可以调用子组件中的任意方法

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

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

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

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

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

1、elementui表格合并单元格

主要是根据data中的column_row_offset表示哪几行要合并。2、input校验输入长度,当输入长度超过8位数

verifyData(){if(this.data.length>8){Toast('已超过最大的充值额度');}},webpack热刷新是什么呢？

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

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

网格的基本结构