WEB前端 vue面试题整理

1.路由守卫 / 导航守卫

vue路由中的一个钩子函数beforeEach那么这个函数中有三个参数to是去哪里 from是从哪里来 next下一步说通俗点就是放行。

2.权限路由/动态路由/鉴权

router.addRouters动态挂载

3.拦截器：请求拦截 响应拦截

登录之后需要携带token把它添加到请求头当中避免了无意义请求

axios的封装

封装一个get或者post的这些方法，然后通过返回一个promise对象进行使用
在promise中通过.then和.catch拿到axios请求结果，ES7中的 async await 同步执行

1.vue常用指令有哪些?

v-for /v-bind( /v-if/ v-show/ v-else-if /v-else/ v-model / v-on(@) / v-text / v-html / v-once /v-prev / v-cloak

2.computed和watch的区别是什么?

computed 一对多, 多次调用时,会把第一次调用的结果放入缓存，节约性能

在computed中定义一个函数（看起来是一个函数，其实是一个属性）

watch 多对一 只监听,不会产生新的函数名,watch也可以渲染数据。

v-if 和 v-show的区别是什么? 

v-show 可以操作display属性.主要用于频繁操作
v-if 销毁和创建元素,主要是用于大量数据渲染到页面时使用符合条件就将数据渲染,频繁使用会消耗性能

在什么阶段才能访问操作DOM？

Mounted

4.数组常用方法有哪些?

pop/ push/ shirf/ unshirf/ reverse/ sort/ splice

find/ findIndexOf/ indexOf / every / some / forEach / map / includes / join / concat / filter / flat /slice

new操作具体干了什么?

1. 在堆空间中创建一个对象
2. this指向这个对象
3. 执行构造函数的语句
4. 返回这个对象

请以讲解js堆和栈，以及深拷贝怎么解决（重点）

堆是用来存放引用数据类型,例如对象,数组,函数
栈是用来存放基本数据类型,变量和引用数据类型的地址值 ; 体积小,数据经常变化

深拷贝的解决方案 :

1. 使用lodash 插件
2. 使用递归解决深拷贝
3. 如果数据中没有函数,undefined 可以使json.stringify+json.parse实现深拷贝

vue的3种组件通信方式?（重点）

1 父子通信

父组件中的[子组件标签] 绑定自定义属性;

子组件中 props: { 子组件标签自定义的属性名: { type: , default} }

2 子父通信

父组件中的[子组件标签] ,自定义事件名；

在子组件中,触发这个自定义事件 .emit（）

3 非父子通信(兄弟通信)

$eventBus

bfc区域的理解？

,高度塌陷，解决：成立条件有: display:inline-block 或者 position:absolute/ fixed

es6的新增特性

箭头函数,对象属性的简写,解构赋值,模板字符串,类(类的继承),扩展运算符,模块化,promise, Async / Await  (ES7),let const 块级作用域

12.事件冒泡/捕获，以及事件委托。（重要）

捕获: 从document开始,层层子元素传递,直到点击到当前子元素
冒泡: 从点击当前子元素开始,层层父级传递,直到document
事件委托: 将子元素的事件交给父元素处理

13.cookie/localstorage/session区别（重要）

localstorage 本地存储,只有手动删除才会销毁
session数据保存在服务器端,生命周期由服务器端决定
cookie数据保存在客户端 只有4k左右

14.$nextTick用过吗，有什么作用？

视图更新之后,基于新的视图进行操作
一般created的时候dom没有渲染，如果要操作dom，最好放在this.$nextTick(()=>{})回调函数 中完成

16.函数的防抖和节流。（重要）

防抖的作用是：当用户多次触发回调函数时，只触发最后一次操作的，其余的全部忽略掉；
函数节流：是确保函数特定的时间内至多执行一次

17.讲解下浏览器的重绘和回流（重要）

会导致回流的操作：
页面首次渲染
浏览器窗口大小发生改变
元素尺寸或位置发生改变
元素内容变化（文字数量或 图片大小等等）
元素字体大小变化

重绘 (Repaint)：

当页面中元素样式的改变并不影响它在文档流中的位置

18.js的内存泄露，以及vue中常注意的两种（重要）

1. 闭包
2. 意外的全局变量

24.promise和async/await区别，简洁讲述？ （重要）

1. promise是ES6，async/await是ES7
2. promise错误可以通过catch来捕捉，2 async/await既可以用.then

25.get和post的区别 （重要）

1. GET在浏览器回退时是无害的,而POST会再次提交请求
2. GET请求只能进行url编码,而POST支持多种编码方式
3. GET请求参数会被完整保留在浏览器历史记录里,而POST的参数不会保留

26.vue项目中你做的优化？（重要）

1. 模块改造/组件抽取

27.mvvm和mvc区别？

一个数据驱动一个事件操作，比如后者多为查找dom结构进行操作，前者为渲染时就绑定了methods方法

vue 的双向绑定的原理是什么？

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。

32.插槽的作用以及使用方式？

组件化时候，有时需要让内容显示到指定位置，用slot的写；

33.vue的单项数据流?

数据从父级组件传递给子组件,子组件内部不能直接修改从父级传递过来的数据。

v-on可以监听多个方法么?

可以, 要传递多个参数时，想要获取浏览器的event对象，需要在前面加$符号

36.vue中ref的作用是什么?(必背)

本页面获取dom元素

获取子组件中的data

调用子组件中的方法，子组件调用父组件方法

37.ES6的新特性有哪些?(必背)

let、const箭头函数 类的支持 字符串模块 symbols  Promises 数据解构

展开运算符

38.什么是事件委托?(必背)

利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！

39.$route 和 $router 的区别?(必背)

router为VueRouter的实例，相当于一个全局的路由器对象

route 是一个局部的对象可以获取对应的name,path,params,query

40…什么是原型链?(必背)

proto向构造函数的prototype一层层往上查找称为原型链

41.什么是递归?(必背)

函数内部自己调用自己 必须加退出条件return

什么是闭包?(必背)

函数嵌套函数，函数内部可以访问外部变量，外部不能直接访问该变量闭包保存了自己的私有变量

JS作用域和变量提升？(必背)

作用域:变量起作用的范围 变量访问会层层往上级作用域访问直到window，称为作用域链
变量提升:JS编译阶段会将文件中所有var，function声明的变量提升到当前作用域最顶端

为什么构造函数的方法要放在prototype里边为什么不直接用this.的方式声明？(必背)

答:因为prototype占用一个存储空间,实例通过proto指针指向prototype，可以减少内存占用

vuex的理解

vuex是状态管理核心就是store主要包括几大模块getters，mutations（同步），actions（异步） modules

什么是幽灵节点？怎么解决？

图片下方出现的未知空白，将图片设置为 display：block;

31.原型，原型链，继承

原型：可以把公用的属性和方法定义在prototype上，这个prototype就是调用构造函数所创建的那个实例的原型。

原型链：每个对象都有一个proto属性，原型链上的对象正式依靠这个连接在一起。

原型链继承：将构造函数的原型设置为另一个构造函数的实例对象，这样就可以继承另一个原型对象的属性和方法。

vm.$set(obj, key, val) 做了什么？

为新增对象属性或数组元素时跟新视图

Vue3有了解过吗？能说说跟Vue2的区别吗？

• 利用新的语言特性(es6)
• 解决架构问题
• 速度更快
• 体积减少
• 更易维护
• 更接近原生
• 更易使用

Vue中常用的修饰符

.stop 阻止事件继续传播

.prevent 阻止标签默认行为

.capture 使用事件捕获模式

用v-on:click.prevent.self会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。