前端vue面试总结，常见的，没有更全，只有更细，更新中

1.Vue中为什么data(){}是个函数

因为组件是可以复用的Vue实例，一个组件被创建以后，就可能被多次利用，然而不管用了多少次，每个组件之间都应该相互独立，互不影响的。基于此Object是引用数据类型，如果不是function函数返回，那么每个组件的data都是存在同一个地址，一个数据改变那么也会影响其他数据。
JavaScript只有函数构成作用域 (注意理解作用域，只有函数{}构成作用域对象的{}以及if{}都不构成作用域)，当data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，不会互相影响。

2.Vue的两种路由模式 ( hash, history )

（Abstract： 支持所有javascript运行模式。如果发现没有浏览器的API，路由会自动强制进入这个模式。）
(1)hash模式: 通过监听路由的变化实现。原理是 onhashchange事件，可以在window对象上监听这个事件，更为关键的是因为hash发生变化的URL都会被浏览器记录下来，从而发现浏览器的前进跟后退都可以用，
windows.onhashchange = function(event){
console.log(event.oldURL, event.newURL);
let hash = location hash // 通过对象来获取hash地址
console.log(hash) // #/notebooks/123/list 地址从#后开始
}2)history模式: 在URL中没有#，是全地址，地址刷新页面时会根据全地址请求后台数据，若没有后台数据支持，页面请求会404。
history.go(-2);//后退两次    history.go(2);//前进两次
history.back(); //后退       hsitory.forward(); //前进

3.History模式怎么配置

前端直接在路由router下面的index.js 文件里面mode: ‘history’ 即可。
export fefault new Router({
mode: ‘history’ , // hash
routes
})

4.Vue的子父组件传值的方式有哪几种

父组件向子组件传值：在子组件标签上绑定自定义属性名（:child = ‘value’），值是父组件要传递的数据，在子组件内部通过props 属性来接收 ‘自定义属性名’，页面展示，通过接收的{{属性名}}显示。
子组件向父组件传值：在子组件标签上绑定自定义事件（@change= ‘change’），子组件内部通过 $emit 给该事件推送数据（this.$emit(‘绑定的自定义事件名’,this.数据)）。父组件内部通过“函数参数”接收。

5.this.$nextTick 的用法和作用？

this.$nextTick()将回调延迟到下次DOM 更新循环之后执行。在修改数据后立即使用它，然后等待DOM更新。他跟全局方法Vue.nextTick一样，不同的是回调的this自动绑定到调用它的实例上。
作用是： 等我们页面DOM中的数据渲染完成之后，在执行回调函数中的方法。
this.$nextTick() 方法主要是用在随数据改变而改变的DOM应用场景中，Vue 中的数据和dom渲染由于是异步的。所以，要让dom结构随数据改变这样的操作都应该放进this.$nextTick()的回调函数中。
Created()中使用的方法时，dom还没有渲染。如果此时在钩子函数中进行dom赋值数据或者其他的dom操作，无异于徒劳。所以，此时的this.$nextTick()就会被大量的使用。
而与created（）对应的是mounted（）的钩子函数则是在dom完全渲染后才开始渲染数据，所以在mounterd()中操作dom 基本不会存在渲染问题。

6.this.$set的用法和作用

当Vue的data 里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。
调用的方法就是 Vue.set(target, key, value)
Target: 要更改的数据源（可能是一个对象或者是数组）
Key: 要更改的具体数据（索引）
Value： 重新赋的值
假设是this.$set(this.target, 0, value)

7.Vue的数据双向绑定原理（2.0和3.0 的区别）

Vue2.0 实现MVVM 双向数据绑定的原理是通过Object.defineproperty来劫持各个属性的setter和getter,在数据变动时发布消息给订阅者，触发相应的监听回调。然而它不支持ie8以及更低版本浏览器。
Vue3实现响应式，基于es6： Proxy 来做数据大劫持代理，可以原生支持到数组的响应式，不需要重写数组的原型，还可以直接支持新增和删除属性，比Vue2的Object.defineProperty更加清晰明了。
差异：
Vue2.0 基于Object.defineProperty,不具备监听数组的能力，需要重新定义数组的原型来达到响应式。Object.defineProperty无法检测到对象属性的添加和删除。由于Vue会在初始化实例时对属性执行getter/setter 转化，所有属性必须在data对象上存在才能让Vue将他转化为响应式深度监听需要一次性递归，对性能影响比较大。
Vue3.0基于Proxy和Reflect,可以原生监听数组，可以监听对象属性的添加和删除不需要一次性遍历data的属性，可以显著提高性能因为Proxy 是es6 新增的属性，有些浏览器还不支持，只能兼容到IE11。

8.Vuex的用法

Vuex 是一个专为vue.js 应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
需要声明的是这里所说的状态指的是vue组件中的data里面的属性。
他的特点就是把数据单独隔离，就意味着有自己的生态系统，其中action作为数据的输入，state作为数据的输出。
在vuex 中 只能在mutations里修改state，actions不能直接修改state。
Vuex中最关键的是store对象，也是核心，有且只有一个store对象。
注意：Store 中存储的状态是响应式的，当组件从store中读取状态时，如果store中的状态发生了改变，那么相应的组件也会得到更新；  不能直接改变store中的状态，改变store中的状态的唯一途径是提交（commit）mutations。这样使得我们可以方便的跟踪每一个状态的变化。
Store它包含5个对象：
state = 存放状态；
getters = state的计算属性 ；
mutations = 更改状态的逻辑，同步操作 ；
actions = 提交mutation，异步操作
mudules = 将store 模块化

9.字符串反转：reverse（）

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();

排序。

比较数组的前后两个值大小，小的自动排在前边
第一种for循环
var arr=[311,42,33,5,21,6,7,312];
for(let i = 0;  i < arr.length-1; i++ ) { //  s-1轮for( let j = 0; j < arr.length-i-1 ; j++ ) { // 比价次数 （s-i）-1if(arr[j] > arr[j+1] ) { // 交换逻辑let sub = arr[j+1]arr[j+1] = arr [j]arr[j] = sub}}
}
console.log(arr); //  [5, 6, 6, 7, 21, 33, 42, 311, 312]第二种 sort() 方法用于对数组的元素进行排序,并返回数组。
语法 array.sort(fun)；参数fun 可选，规定排序的顺序，必须是函数
升序：arr.sort(function(a,b){return a-b}) console.log(arr) // [5, 6, 6, 7, 21, 33, 42, 311, 312]
降序：arr.sort(function(a,b){return b-a})

11.Javascript 事件流模型有什么

事件捕捉： 事件有最不具体的节点先接收，然后逐级向下，一直到最具体的
事件冒泡： 事件开始由最具体的元素接收，然后逐级向上传播
DOM事件流： 三个阶段： 事件捕捉，目标阶段，事件冒泡

12.冒泡：

当一个元素接收到事件的时候，会把接收的事件传给自己的父级，一直到window。    也就是当触发子集元素事件的时候，父级的点击事件也会触发，这就叫冒泡。
阻止事件冒泡： 两种方法：
1、W3c 的方法是 e.stopPropagation(),
2、IE 的方法是 e.cancelBubble = true;function stopBubble(e){//如果提供了事件对象，则是一个非IE浏览器if( e && e.stopPropagation ){ // 阻止传播// 因为支持W3C 的stopPagation 方法 标准的e.stopPagation()}else{//否则，我们需要使用IE的方法来取消事件冒泡window.event.cancelBubble = true;}
}；要阻止事件默认行为
function stopDefault(e){// 阻止默认浏览器动作（W3C）
if( e && e.preventDefault ){ // 阻止原本作用e.preventDefault()}else{// IE 中阻止函数器默认动作的方式window.event.returnValue = false;}return false;
}

13.事件委托

让利用事件冒泡的原理，让自己所触发的事件，让父元素代替执行
优点：可以大量的节省内存占用，减少事件注册，可以实现当新增子对象时，无需再对其进行事件绑定，对于动态内容部分尤为合适
缺点： 事件代理的常用应用仅限于上述需求，如果把所有的事件都用事件代理，可能湖出现事件误判，也就是不改触发的事件被绑定了事件。

14.（ React ） Umi中dva的数据流向

dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，还额外内置了react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。
（简化了React的setState跨组件传输数据的耦合，数据通过mapStateToProps
就可以共享数据，并且比Redux传输数据操作要更简单，可以自动处理等待状态，如果会
Redux入门可以更迅速 ，更快的上手。）数据的改变发生通常是通过用户交互行为或者浏览器行为（如路由跳转等）触发的，当此类行为会改变数据的时候可以通过 dispatch 发起一个 action，如果是同步行为会直接通过 Reducers 改变 State ，如果是异步行为（副作用）会先触发 Effects 然后流向 Reducers 最终改变 State，所以在 dva 中，数据流向非常清晰简明，并且思路基本跟开源社区保持一致（也是来自于开源社区）。
个人理解：通过URL调用渲染组件初始化dom的时候，会通过connect(mapStateToProps) 加载共享数据，并且调用dispatch会触发action 进行同步或异步操作或者监听地址栏是否传入参数的处理。

15.Es6 新增的内容，以及用法

1 不同的变量声明。let 局部变量 和 const常量 ，二者都是块级作用域。let 关键字声明的变量不具备变量提升特性let 和const 声明只在最靠近的一个块中（花括号内）有效当使用const 声明时，请使用大写变量。const 在声明时必须被赋值2 模板字符串 ``在es6之前，我们通常是通过 ‘\’和 ‘+’来构建模板；而对于ES6来说基本的字符串格式化，将表达式嵌入到字符串中进行拼接 用${}来界定 ：  ` ${}`3 箭头函数 =>{};不用function关键字来串联函数；省略return 关键字；继承当前上下文的this关键字。而且当我们的函数有且仅有一个参数的时候，可以省略括号，当我们函数返回有且仅有一个表达式的时候可以省略{}和return4 函数的参数默认值：可以直接在函数参数中赋值5 Spread/ Rest 操作符 ... 当被用于迭代器中时，他是一个Spread操作符当被用于函数传参时，是一个Rest 操作符6 支持二进制和八进制字面量： 在数字前面添加0o或者0O 即可转换为八进制7 对象和数组解构赋值：const { name, age } = student8 对象超类：ES6允许在对象中使用super方法
9 for of 和for in ：一个遍历的是值；一个是索引下标for of 用于遍历一个迭代器，如数组。也就是说of 无法遍历对象，可以直接遍历取得数组的值；for(let a of arr) {console.log(‘打印出来的a是数组arr的值’)}for in 用来遍历对象中的属性：for(let b in barr){console.log(‘打印的b是barr的索引下标’)}10 ES6 支持class语法，不过ES6 的class不是新的对象继承模型，它只是原型链的语法糖表现形式。
函数中使用static 关键字定义构造函数的方法和属性。
类中的继承和超集。
extends 允许一个子类继承父类，需要注意的是子类的constructor 函数中需要执行super()函数，当然也可以在子类方法中调用父类的方法。如super.parentMethodName().需要注意的是：类的声明不会提升，如果我们使用某个Class，那我们必须在使用它之前定义它，否则会跑出有个ReferenceError 的错误；在类中定义函数不需要使用function关键字

16.computed计算属性和 watch 监听的区别

computed计算属性： 1计算属性是基于它们的依赖进行缓存的,只有在它相关依赖发生改变时才会重新求值；2支持缓存 不支持异步；3 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或     者一对一，一般用computed4.如果computed属性属性值是函数，那么默认走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。watch侦听属性：1.不支持缓存支持异步，数据变化直接会触发相应的操作；2.监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；3. 当一个属性发生变化时，需要执行对应的操作；一对多；4. 监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，immediate：组件加载立即触发回调函数执行，deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。注意：deep无法监听到数组的变动和对象的新增，参考vue数组变异,只有以响应式的方式触发才会被监听到。在vue中computed和watch的真正区别是：computed产生于它的依赖，只要依赖存在，我们就能访问到其对应的computed属性；watch产生于它的依赖的变化。只有依赖发生了改变，我们才能访问到其对应的watch属性。并且，computed是可以访问其相关缓存的，当依赖变化后，这个相关缓存才会更新，这大大节省了computed的性能消耗。如果一个数据依赖于其他数据的简易计算处理的，那么使用computed比较合适。如果需要在某个数据变化时做一些事情，使用watch来观察这个数据变化

17.原型和原型链

原型： 在JavaScript 中，每个函数都有一个Prototype 属性，这个属性指向函数的原型对象。（每个对象（除了null以外）创建的时候，就会与之关联另一个对象，这个对象就是我们说的原型，每一个对象都会从原型中‘继承’属性。）
原型链：原型对象也是普通的对象，对象和对象之间也是联系的，如果一个原型对象的原型不为null的话。在JavaScript中通过prototype对象指向父类对象，直到指向Object对象为止，这样就形成了一个原型的指向链条，就是原型链。

18.闭包

定义： 就是能够读取其它函数内部变量的函数。
在JavaScript中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解为“定义在一个函数内部的函数”
作用：
1 可以读取函数内部的变量   2 让这些变量的值始终保持在内存中、
注意：
1 因为闭包会是函数的变量保存在内存中，所以内存消耗也会加大，所以不能滥用闭包，否则会造成网页的性能问题。一般在退出函数之前，将不使用的局部变量全部删除。
2 闭包会在父函数外部，改变父函数内部变量的值，所以，如果我们把父函数对象object使用，把闭包当做它的公用方法，把内部变量当做私有属性，此时用的时候，不要随便改变父函数内部变量的值。

19.项目中怎么改变element 自带的样式

1 在css样式中可以添加样式 >>> 样式同样生效
2 在scss和less中样式穿透添加 /deep/ 就会生效
3 深度作用选择器 ::v-deeep 必须是双冒号

20.Css3新增属性

1. CSS3实现圆角（border-radius），阴影（box-shadow），
2. 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
3. transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
4. 增加了更多的CSS选择器  多背景 rgba
5. 在CSS3中唯一引入的伪元素是 ::selection.
6. 媒体查询，多栏布局
7. border-image

21.子元素居中有哪几种方案

对父元素定位
1 父子元素进行相对定位，对子元素绝对定位，子元素margin:auto; top:0;left:0;bottom:0;right:0;
例如：<div style=”width:200px;height:200px;border: 2px solid blue;position: relative; ”><div style=”width:100px;height:100pxbackground: red;margin:auto;position: absolute;top: 0; left : 0; bottom: 0; right: 0;”></div></div>
2 对父元素进行相对定位，对子元素绝对定位，（百分比布局）
子元素left：50%；top：50%； margin-left: 负子元素一半的宽度；margin-top： 负子元素一半的高度
例如  <div style=”width:200px; height:200px;border: 2px solid #000;position: relative”><div style=”width: 100px; height: 100px;background-color: red;margin:auto;poaition:absolute;left: 50%;top: 50%;margin-left: -50px；margin-top：-50px;”></div></div>设置父元素的display方式。
3 父元素 display: table-cell; vertical-algin: middle;
子元素变成一个内联元素display: linine-block
例如  <div style=”width: 200px; height: 200px;border: 2px solid #000;vertival-align: middle;text-align: center”><div style=”width: 100px; height:200px;background-color: red;display: inline-block”></div></div>
4 父元素 display：flex; justify-content: center; align-items: center;
子元素自动居中（弹性盒布局）
例如 <div style=”width: 200px; height: 200px;border: 2px solid #000;display: flex;justify-content: center;align-items: center;”><div style=”width: 100px; height: 100px; backgrond-color:red;”></div></div>

22.Import和link引入的区别

区别：
1 从属关系：@import是CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载CSS文件。还可以定义RSS， rel链接属性等
2 加载顺序： 加载页面时，@import引入的CSS将在页面加载完毕后加载（有执行效率问题，它会打破浏览器并行加载资源导致加载页面速度变慢，尽量不要用@import）；link标签引入的CSS被同时加载；
3 兼容性： @import是CSS2.1才有的语法，只可在IE5+ 才能识别；link标签作为HTML元素，不存在兼容性问题。
4 DOM可控性： 可以通过JS操作DOM，插入link标签来改变样式；由于DOM方法基于文档的，无法使用@import的方式插入样式。
5 权重：指的是CSS 选择器的优先级
@import> 行内样式 > ID > 类、伪类。属性 > 标签名 > 继承 > 通配符*
!important > 行内样式 > ID > 类、伪类、属性 > 标签名 > 继承 > 通配符

23.什么是高阶函数，怎么用

把函数作为参数传入，这样的函数称为高阶函数，
函数式编程就是指这种高度抽象的编程范式。
也就是说：JavaScript的函数其实都指向某个变量。既然变量可以指向函数，函数的参数能接收变量，那么一个函数就可以接收另一个函数作为参数，这种函数就称之为高阶函数。

24.Vue路由守卫有哪些

首先知道有3个参数 to , from, next (意义： to是即将要进入的目标路由对象， from 是当前导航即将要离开的路由对象， next调用该方法后，才能进入下一个钩子函数afterEach )
next() // 直接进入to所指的路由
next（false） // 中断当前路由
next(‘route’) // 跳转指定路由
next(‘error’) // 跳转错误路由全局守卫： this.$router.beforeEach((to, from, next) =>{next(); })
执行之前触发beforeEach，执行后触发router.afterEach(to, from)；路由独享守卫： this.$route.beforeEnter(to, from ,next())；组件内部的守卫：
路由进入之前 beforeRouteEnter(to, from, next())
路由更新之前 beforeRouteUpdate(to, from, next())
路由离开之前 beforeRouteLeave(to, from, next())编程式跳转 this.$router.push(‘/url’)

25.父子路由跳转

路由跳转就是用来跟后端服务器交互的一种方式，通过不同路径请求不同资源，
一种：<router-link to= ‘/url’>   二种： this.$router.push(‘url’)

26.路由传参

vue-router 通过params 和query 传参
1.this.$router.push({
path: ‘./xx’,
params: {key: value}
}) // 加 ：占位符，刷新不丢失数据
页面接收可以在钩子函数中 执行： this.$route.params
2. this.$router.push({
path: ‘./xx’,
query: {key: value}
})
页面接收可以在钩子函数中接收this.$route.query
params 是路由的一部分，必须要有，query是拼接在url后的参数，没有也没问题。
params不设置的时候，刷新页面或者返回参数会丢失，query则不会有这个问题。

27.接口状态码有哪些和意义

2开头:（请求成功）表示成功处理了请求的状态代码
3开头:（请求被重定向）表示要完成请求，需要进一步操作。通常，这些状态代码用来重定向
4开头:（请求错误）这些状态码表示请求可能出错，妨碍了服务器的处理
400:（错误请求）服务器不理解请求的语法
401:（未授权）请求要求身份验证。对于需要登录的网页，服务器可能返回此响应
403:（禁止）服务器拒绝请求
404:（未找到）服务器找不到请求的网页
5开头:（服务器错误）这些状态代码表示服务器在尝试处理请求时发生内部错误。这些错误可能是服务器本身的错误，而不是请求出错。
500：（服务器内部错误）服务器遇到错误，无法完成请求
501：（尚未实施）服务器不具备完成请求的功能。例如，服务器无法识别请求方法时可能会返回此代码
502：（错误网关）服务器作为网关或代理，从上游服务器收到无效响应
503：（服务不可用）服务器目前无法使用（由于超载或停机维护）。通常，这只是暂时状态
504：（网关超时）服务器作为网关或代理，但是没有及时从上游服务器收到请求
505：（HTTP 版本不受支持）服务器不支持请求中所用的 HTTP 协议版本

28.Vue和react的区别，优缺点

Vue是数据双向绑定的；  react是单向数据流。
Vue使用的是自己的一套模板语法，进行了高度的集成封装； react使用的是jsx语法。
Vue的代码写法比较死板，遵循一定的规则； react比较灵活。
Vue开发周期短，学习成本低； React学习曲线比较陡峭，但学会之后项目开发会很快捷。
Vue是一个完整的框架；  react是一个针对视图层的库，它把更多的精力放在视图渲染上。
React和vue都是使用vnode(虚拟dom）Vue ：    学习成本低，容易招人；第三方框架丰富，可以非常快捷的找到一些第三方应用案例；文档友好，纯中文； 国人情节。React： react 出身好 ，背靠FaceBook ，团队成熟，有实际项目实战使用的；react更接近js基础知识，不用学习很多的插件使用；react使用的是 js语法，所有的组件的组件都是function；react相对于vue性能优势；react-native可以开发原生引用，使用的是react语法，可以依靠团队成员完成web和app的开发。

29.Es5和es6

1系统库的引入上ES5 需要先使用require 导入React包，再去真正的引用，ES6 直接使用 import Reat from ‘react’, 不用制作类库对象。
2 导出以及引用单个类ES5 要导出一个类给别的模块用，一般通过module.exports 来实现，引用的时候还是通过require方法来获取ES6 是直接用export default来实现，使用 import方法来实现导入
3 定义组件ES5组件类的定义通过React.createClass 实现。ES6 让组件类去继承React.Component类就可以了
4 组件内部定义方法ES5： 采用的是 ###：function（）{}，形式，方法大括号末尾要加逗号；ES6： 省略了 function ，并且结尾不用加逗号分割，
5 定义组件的属性和默认属性ES5： 属性类型和默认属性分别通过 propTypes  成员和getDefaultProps 方法来实现（这两方法应该是固定的）ES6： 统一使用static 成员实现
6 初始化STATEES5： 初始化state的方法是固定的getInitiaState;ES6:  第一种是 直接构造state函数，第二种是相当于0C中的方法重写，重写constructor 方法

30.本地环境，测试环境，生产环境怎么配置

React 在项目根目录创建两个环境文件
.env.development
.env.production
(这两个文件里面的变量必须是REACT_APP_开头的变量，)
配置package.json[scripts选项中添加如下代码]
在你统一配置接口请求地址的js文件中进行获取当前的接口地址
Vue项目没写，可以找找

Vue-loader

1.vue-loader是webpack的加载器，允许以单文件组件的格式创作Vue组件。
2.允许对Vue组件的每个部分使用其他webpack加载器
3.允许.vue文件中的自定义块可以应用自定义加载程序链，简单来说就是可以解析.vue文件
4.处理在模块依赖项中引用的静态资源
5.模拟每个组件的范围CSS
6.在开发过程中保持热加载

32.Flex布局

弹性盒  display：flex

33.ts和js

1 ts是静态类语言，可以做到声明即文档，js是动态类语言相对更灵活。
2，如用ts写一个button组件可以清晰的知道，ButtonProps如是否必传，可选，style是什么类型，disabled是什么类型，较js，ts更易于维护和拓展，可以做到代码即注释。
3，ts对比js基础类型（boolean类型、number类型、string类型、array类型、undefined类型、null）上增加了 tuple类型（元组类型）、enum类型（枚举类型）、any（任意）类型、
特别的是：void类型（没有任何类型）表示定义方法没有返回值。
never类型：是其他类型（包括null。Undefined）的子类型，代表从不会出现的值，这意味着声明never变量只能被never类所赋值。
4 ，js没有重载概念，ts有可以重载
5，vscode/ide对ts有很友好的提示
6，ts更利于重构

34.Vue数据双向绑定的底层原理

vue 实现数据双向绑定: 采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调

35.v-model 的原理

1 在表单控件或者组件上创建双向绑定---表单控件绑定 :input---- select --- textarea
2 组件 - 在输入组件上使用自定义事件 components
3 修饰符
.lazy ---- 取代 input 监听 change 事件
.number --- 输入字符串转为有效的数字
.trim ------ 输入首尾空格过滤

36.Vue中试图更新,dom渲染时是同步还是异步的：异步

如果不采取异步更新，那么每次更新数据都会对当前组件进行重新渲染，为了性能考虑，Vue 会在本轮数据更新后，再去异步更新数据。

37.什么是跨域，以及解决跨域的方法，解释jsonp原理，以及为什么不是真正的ajax。

理解跨域的概念：协议、域名、端口都相同才同域，否则都是跨域。
出于安全考虑，服务器不允许ajax跨域获取数据，但是可以跨域获取文件内容，所以基于这一点：可以通过动态创建script标签，然后通过标签的src属性获取js文件中的js脚本，并且该脚本的内容是一个函数调用，该函数调用的参数就是服务器返回的数据，为了处理这些返回的数据，需要事先在页面定义好回调函数，在回调函数中处理服务器返回的数据，这就是解决跨域问题的主流解决方案。
jsonp并不是一种数据格式，而json是一种数据格式，
jsonp是用来解决跨域获取数据的一种解决方案，
本质上使用的并不是ajax技术。

38.Watch 深度监听

在监听复杂数据类型的时候，也就是说，如果被监听的数据是个对象（或数组），对象（或数组）中的属性发生改变时，监听是不会触发上的，
开启深度监听：只要obj中的任何一个属性发生改变，都会触发相应的代码
<input type="text" v-model="user.name">
data: { user: {name: 'jack' ，}
},
watch: { //不能使用监听普通数据的写法 // user(newVal, oldVal)     // console.log(newVal)user: { // 表示对象中属性变化的处理函数，这个函数只能叫这个名字 handler(newVal) { console.log(newVal); }, immediate: true,deep: true // 表示开启深度监听 }
}

39.Vue和filter 过滤

filter(全局注册) 和filters（组件注册）
filter的作用是对值进行筛选加工， 使用的地方有两个位置和两个方式。
1 直接在 {{ xx | filterA }} 双括号插值内
2 使用 v-bind 绑定 <h1 v-bind:id = “msg | filterA”> {{msg}} </h1>
（V-bind 绑定的地方，msg 为filter处理的值，filterA 为过滤器）
3 Vue 中怎么自定义过滤器可以用全局方法 Vue.filter() 注册一个自定义过滤器，它接收两个参数：过滤器ID 和 过滤器函数。过滤器函数以值为参数，返回转换后的值
vue.filter('reverse', function (value) {return value.split('').reverse().join('')
})
<!-- 'abc' => 'cba' --><span v-text="message | reverse"></span>
过滤器也同样接受全局注册和局部注册

40.V-model和 .sync的区别

 v-model是用来在表单控件或者组件上创建双向绑定的，他的本质是v-bind和v-on的语法糖，在一个组件上使用v-model，默认会为组件绑定名为value的prop和名为input的事件。
( .sync 从功能上看和 v-model 十分相似，都是为了实现数据的“双向绑定”，本质上，也都不是真正的双向绑定，而是语法糖。)
.sync的原理用到了子组件向父组件派发事件的$emit方法。其应用场景为子组件想修改父组件传递的属性
sync修饰符的控制能力都在父组件，事件名称也是相对固定的update:xx
其实就是父组件监听子组件更新某个props的请求的缩写语法。
相比较至下，.sync 会更加灵活，它可以给多个prop使用。
从语义上来看，v-model 绑定的值是指这个组件的绑定值，比如 input 组件，select 组件，日期时间选择组件，颜色选择器组件，这些组件所绑定的值使用 v-model 比较合适。其他情况，没有这种语义，个人认为使用 .sync 更好。
两者都需要手动触发 $emit 方法.

41.生命周期钩子函数以及每个阶段的作用

vue实例有一个完整的生命周期，生命周期也就是指一个实例从开始创建到销毁的这个过程
beforeCreate() 在实例创建之间执行，数据未加载状态
created() 在实例创建、数据加载后，能初始化数据，dom渲染之前执行
beforeMount() 虚拟dom已创建完成，在数据渲染前最后一次更改数据
mounted() 页面、数据渲染完成，真实dom挂载完成
beforeUpadate() 重新渲染之前触发
updated() 数据已经更改完成，dom 也重新 render 完成,更改数据会陷入死循环
beforeDestory() 是销毁前执行（实例仍然完全可用）
destoryed() 则是销毁后执行

42.Mixins

混入 (mixins)： 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。与vuex的区别
vuex：用来做状态管理的，里面定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之修改。
Mixins：可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。与公共组件的区别
组件：在父组件中引入组件，相当于在父组件中给出一片独立的空间供子组件使用，然后根据props来传值，但本质上两者是相对独立的。
Mixins：则是在引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的对象与方法，可以理解为形成了一个新的组件。

43.Provide、inject

provide和inject是成对出现的作用：用于父组件向子孙组件传递数据使用方法：provide在父组件中返回要传给下级的数据，inject在需要使用这个数据的子辈组件或者孙辈等下级组件中注入数据。使用场景：由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问父组件的数据。rovider/inject：简单的来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量参考博客：https://www.jianshu.com/p/57e492dafdcb

44.数组的方法

修改器方法：pop(): 删除数组的最后一个元素，并返回这个元素push()：在数组的末尾增加一个或多个元素，并返回数组的新长度reverse(): 颠倒数组中元素的排列顺序shift(): 删除数组的第一个元素，并返回这个元素unshift(): 在数组的开头增加一个或多个元素，并返回数组的新长度sort(): 对数组元素进行排序，并返回当前数组splice(): 在任意的位置给数组添加或删除任意个元素
访问方法：concat(): 返回一个由当前数组和其它若干个数组或者若干个非数组值组合而成的新数组join(): 连接所有数组元素组成一个字符串slice(): 抽取当前数组中的一段元素组合成一个新数组indeOf(): 返回数组中第一个与指定值相等的元素的索引，如果找不到这样的元素，则返回 -1lastIndexOf(): 返回数组中最后一个（从右边数第一个）与指定值相等的元素的索引，如果找不到这样的元素，则返回 -1
迭代方法：forEach(): 为数组中的每个元素执行一次回调函数,最终返回undefinedevery(): 如果数组中的每个元素都满足测试函数，则返回 true，否则返回 falsesome(): 如果数组中至少有一个元素满足测试函数，则返回 true，否则返回 falsefilter(): 将所有在过滤函数中返回 true 的数组元素放进一个新数组中并返回map(): 返回一个由回调函数的返回值组成的新数组 return {}

45.基本数据类型 6种

五种基本数据类型（Number,String,Boolean,Undefined,Null）；
一种复杂数据类型（Object）。
三大引用类型  Object类型   Array类型    Function类型

46.常用的Vue指令

v-on:click 点击事件  @click
v-bind: 绑定  :bind
v-for 循环 :key （注意的是v-for比v-if的优先级要高，并且不建议同时使用，否则会带来性能方面的浪费（每次渲染都会先循环再进行条件判断））
v-model 双向数据绑定 input
v-bind 绑定，:bind (v-bind 简写为 :)
v-on:click点击事件，@click(v-on 简写为 @)
v-for循环 :key
v-if 切换开销 删除dom节点
v-once 渲染一次
v-show渲染开销。相当于添加display:none
v-html
v-text文本
自定义指令

47.v-if 和v-show的区别

使用v-if（切换开销 删除dom节点),如果值为false，那么页面将不会有这个html标签生成。 v-show（渲染开销）则是不管值为true还是false，html元素都会存在,只是是相当于在CSS样式中的添加了display进行显示或隐藏

48.Es6新增的数据类型

之前有
基本数据类型：string，number，unll，undefined，boolean，
复杂数据类型：object。   新增：Symbol类型（基本）；
复杂：Set类型，Map类型，WeakSet类型，WeakMap类型，TypedArray类型。

49.XMLHttpRequest , axios，fetch 区别
主要说了axios:

axios是基于promise（诺言）用于浏览器和node.js是http客户端。
axios的作用：axios主要是用于向后台发起请求的，还有在请求中做更多是可控功能。
特点：1 可以在浏览器中发送 XMLHttpRequests；   2支持浏览器和node.js 发送请求；
3支持promise API；                          4能拦截请求和响应；
5能转换请求和响应数据；                 6能取消请求；
7自动转换JSON数据；
8浏览器支持防止CSRF（跨站请求伪造）客户端支持保护安全免受 XSRF 攻击;
9使用安装方便 命令:npm install axios 引入即可;

50.深拷贝，浅拷贝以及用法（递归）(复制一个对象，并切断与原来对象之间的联系的方法：递归和JSON.stringify())

简单说，就是B复制了A，如果A变，B也变就是浅拷贝，如果B不变就是深拷贝。
用法1:
基本数据类型：名值存储在栈内存中，当B= A复制时，栈内存会开辟一个内存。
引用数据类型：名存在栈内存中，值存在堆内存中，但是栈内存会提供一个引用的地址指向堆内存中的值。当B=A拷贝时，其是复制的是A的引用地址，并非堆里面的值。然而当我们A[0]=1时进行数组修改时，A和B指向同一个地址，所以B也就收到影响就是浅拷贝。
如果，在堆内存中也开辟一个新的内存专门为B存值，B不受A的影响那么就是深拷贝。
深拷贝是拷贝对象各个层级的属性，用法2: 递归  用法3：JSON.stringify与JSON.parse，除了实现深拷贝，还能结合localStorage实现对象数组存储。localStorage存储对象，sessionStorage存储数组对象1>存储数组：JSON.stringify 可以将队形转化为 JSON字符串。JSON.parse可以将JSON字符串转化为对象。
也就是说我们存的时候先将数组转成JSON字符串，取出来再转成数组就可以了。
function storageObj(obj) { // 存储对象var checkedIdStr = JSON.stringify(obj);sessionStorage.setItem("key", checkedIdStr);
};
var arrBefor = [1,2,3];
storageObj(arrBefor);
var arrAfter = JSON.parse(sessionStorage.getItem("key"));
console.log(arrAfter,typeof arrAfter);//[1, 2, 3]  "object"2>存储对象：
function storageObj(obj) {var checkedIdStr = JSON.stringify(obj);sessionStorage.setItem("key", checkedIdStr);
};
var objBefor = {a:1,b:2
};
storageObj(objBefor);
var objAfter = JSON.parse(sessionStorage.getItem("key"));
console.log(objAfter,typeof objAfter);//{a: 1, b: 2} "object"

51.自定义指令

注册全局指令
Vue.directive(‘my-directive’, function(el, binding){ // el指令属性所在的标签对象，binding包含指令相关信息数据的对象el.innerHTML = binding.value.toUpperCase();
})局部注册指令
directive: { // 局部指令，只在当前的vm管理内有效‘myDirective’: function(el, binding){ // 可以写成es6写法                                      ‘myDirective’(el, binding){}El.textContent = binding.value.toLowerCase();}
}
使用指令
v-my-directive = “XXXX”
钩子函数参数: 指令钩子函数会被传入以下参数：
el：指令所绑定的元素，可以用来直接操作 DOM 。
binding：一个对象，包含以下属性：
name：指令名，不包括 v- 前缀。
value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。
arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
vnode：Vue 编译生成的虚拟节点。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。

52.Node的使用

Node的特点：
1 它是一个JavaScript运行环境；
2 依赖于Chrome V8引擎进行代码解释；事件驱动；
3 非阻塞I/O;轻量，可伸缩，适于实时数据交互应用；(IO指 input  output  输入 输出)
4 单线程，单进程。
使用场景：允许用户从NPM服务器下载被人的三方包、安装编写命令到本地使用；允许用户将自己编写的包或命令行程序上传到NPM供他人使用；缺点：
1>不适合CPU密集型应用；
解决：分解大型运算任务为多个小任务，使得运算能够适时释放，不阻塞I/O调用的发起。
2>只支持单核CPU，不能充分利用CPU；
3>可靠性低，一旦代码某个环节崩溃哎，整个系统都崩溃（原因就是单线程进程）；
解决：ngix反向代理，负载均衡，开多个进程，绑定读个端口；开多个进程监听同一个端口，使用cluster模块
4>开元组件库质量参数不齐，更新快，向下不兼容；
5>Debug不方便，错误没有stack trace

53.前端开发的优化问题（看雅虎14条性能优化原则）。

  （1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。（2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数（3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。（4） 当需要设置的样式很多时设置className而不是直接操作style。（5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。（6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。（7） 图片预加载，将样式表放在顶部，将脚本放在底部  加上时间戳。（8） 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢

54.Webpack 性能优化：

webpack 打包工具，使用webpack若不注意就会有性能问题，造成打包构建速度慢，开发调试重复性工作，输出的文件质量不高等。
1>优化构建速度：
(1)缩小文件的搜索范围，使用DIIPlugin减少基础模块编译次数；
(2)使用HappyPack开启多进程Loader转换；
(3)使用ParalleUglifyPlugin 开启多进程压缩JS文件；
2>优化开发体验:
(1)使用自动刷新 - webpack监听文件;
(2)DevServer刷新浏览器
(3)开启模块热替换。
3>优化输出质量-压缩文件体积：
(1)区分环境-减少生产环境代码体积；
(2)压缩代码-JS，ES,CSS；
(3)剔除JS死代码
4>优化输出质量-加速网络请求
(1)使用CDN加速静态资源加载；
(2)多页面应用提取页面公共代码，以利用缓存；
(3)分割代码以按需加载
5>优化输出质量-提升代码运行时的效率：
(1)使用Prepack提前求值；
(2)使用Scope Hoisting.
6>使用输出分析工具；
7>其他Tips8>尽量减少http请求；      9> 使用浏览器缓存；
10>使用压缩组件；            11>图片和JS的预载入；
12>将JS脚本放置底部；     13>将养生四文件放置顶部；
14>使用外部的JS和CSS;      15>精简代码

55.优化网页加载速度

1>减少CSS、JS文件数量以及大小，减少重复性代码，重复利用，压缩CSS和JS代码。
2>图片的大小，使用新的技术
3>把CSS样式表放置顶部，把JS放置底部
4>减少http请求次数；
5>使用外部的JS和CSS
6>减少DOM的操作，尽可能用变量代替不必要的dom操作.

56.兼容性问题：

一般都是指代的是不同浏览器对样式的兼容。一般是配置一个基础样式来进行统一规划

57.React 中redux的数据流向

创建state来存储公共数据，使用reducer来进行对state的改变，store把reducer封装作为数据源放在react的props中，在组件内触发方法disptch一个action，action中含有状态和data，reducer接收状态进行对state的改变，从而react的view层进行重新渲染。

58.组件通讯（平行组件和父子组件）

1 $emit/$on
通过创建一个空的vue实例作为事件总线，用它来出发事件和监听事件，轻量的实现任何组件间的通信，包括父子，兄弟，跨级。
var event = new Vue()
Event.$emit(事件名，数据)
Event.$on(事件名,data=>{
注意：this.XX  = XX ; // 箭头函数内部不会产生新的this,这边如果不过不用 =>, this指代event.
})
2 大型项目时 vuex 状态管理

前端vue面试总结，常见的，没有更全，只有更细，更新中相关推荐

2020社招前端VUE面试题目
2020前端VUE面试题目集锦年初由于疫情影响导致上家公司不景气,也由于自己一系列的考虑决定裸辞找工作,面试了十多家公司,最终进入了比较心仪的公司,我将这段时间面试所遇见的和VUE先关题目大概做个整 ...
阿里最新面试必备项之Java的String类，持续更新中！
最新腾讯面试必备项之Java的String类,持续更新中! 1.1 String的特性 String类:代表字符串.Java程序中的所有字符串字面值(如"abc")都作为此类的实例 ...
前端笔试面试知识点总结（随缘复习，慢更）
前端笔试面试知识点总结 1 HTTP/浏览器 1.1 HTTP 1.1.1 HTTP请求报文与响应报文 1.1.1.1 HTTP请求报文 1.1.1.2 HTTP响应报文 1.1.2 get与post ...
2022年前端Vue常见面试题大全（三万长文）持续更新
目录 1.Vue和React有什么不同?使用场景分别是什么? 2.axios是什么?怎么使用它,怎么解决跨域? 3.说说Vue,React,angularjs,jquery的区别 4.什么阶段(生命周 ...
2022年前端Vue常见面试题大全（三万长文）持续更新...
目录 1.Vue和React有什么不同?使用场景分别是什么? 2.axios是什么?怎么使用它,怎么解决跨域? 3.说说Vue,React,angularjs,jquery的区别 4.什么阶段(生命周 ...
最好的Vue组件库之Vuetify的入坑指南（持续更新中）
目录安装Vuetify 文档结构快速入门特性样式和动画首先先声明,个人不是什么很牛逼的大佬,只是想向那些想入坑Vuetify的前端新手或者嫌文档太长不知如何入手的人提供一些浅显的建议而已,能 ...
面试JAVA常被问到的问题（持续更新中）
引言有的面试会被问到有没有写博客,这时候我尴尬,不知道怎么回答,所以这篇文章仅仅是把我面试JAVA的遇到的问题记录下来而已,也算是我写博客迈出的第一步,起码,以后被问到:有没有写博客?我可以回答,我 ...
聊聊Vue（前端Vue面试包过）【面试干货】
聊聊Vue[面试干货] (耐心看完这篇Vue.面试中小厂的同学差不多都能过) 1 对于MVVM的理解首先你要知道MVVM是个什么鬼 MVVM 是 Model-View-ViewModel 的缩写 M ...
前端VUE及PHP常见业务场景概括小结（程序猿提薪必备！！！）
1.什么是IOC IOC是Inversion of Control的缩写,多数书籍翻译成"控制反转". 1996年,Michael Mattson在一篇有关探讨面向对象框架的文章中 ...

前端vue面试总结，常见的，没有更全，只有更细，更新中

前端vue面试总结，常见的，没有更全，只有更细，更新中相关推荐

最新文章

热门文章