vue面试题(精简)

113 阅读9分钟

1.get和post的区别

1.get参数放在url里面,post直接放在请求头。post比get更加安全

2.一般来说,同样的请求,get比post快

3.如果是数据的查询、筛选用get,数据的删除、修改操作用post

4.get可以去缓存。post不可以缓存

5.误区:get有大小限制:不是请求本身有大小限制,是get传参中的url有大小限制

2.字符串方法

1.chatAt():查找对应下标的字符

2.charCodeAt():查找对应下标的字符的编码

3.indexOf():查找元素对应的下标,没有返回-1

4.截取:(1)subString():如果第一个下标参数比第二个下标参数大,方法会自动进行更换

  (2)slice():第二个参数可以是负数,表示倒数第几个

  (3)subStr():第二个参数表示长度,要截取的个数

5.toUpperCase():转字符串为大写

6.toLowerCase():转字符串为小写

7.trim():去除字符串首尾空格

8.search():和indexOf()一样,检索子字符串并返回符合条件的字符串的下标,没有返回-1,(可以接受正则)

9.match():找到符合条件的字符串并返回一个数组(可以接受正则)

3.数组方法

1.push():在数组末尾加一个元素

2.pop():在数组末尾删除一个元素

3.unshift():在数组前面加一个元素

4.shift():在数组前面删除一个元素

5.reverse():反转数组

6.sort():排序(有个回调函数,返回a-b是升序,返回b-a是降序)

7.splice():截取并替换

8.concat():将多个数组合并成一个数组

9.slice():截取数组

10.join():将数组按照符号连接成字符串

11.indexOf():查找数据对应的下标,没有就返回-1

12.lastIndexOf():倒着查

13.forEach():遍历数组

14.map():映射数组

15.filter():过滤数组,找出符合条件的数组组成新的数组

16.every():只要有一个不符合条件就返回false

17.some():只要有一个符合条件的就返回true

4.js本地储存三种方式以及区别

1.localStorage:本地储存,永久性储存

2.sessionStorage:本地储存,页面关闭就没了

3.cookier:大小只有4k

-相同点:都保存在浏览器端

-不同点:

(1)cookier会一直携带在请求头,不管会不会用到,sessionStorage和localStorage不会主动携带需要在请求时加上

(2)cookier大小只有4k,sessionStorage和localStorage可以达到5M或者更大

(3)cookier在有限期内有效,sessionStorage关闭页面就会消失(原生js中刷新不会消失),localStorage永久有效

5.防抖和节流

1.防抖:当连续点击时,只会在点击结束后的过一段时间执行一次

2.节流:当连续点击时,会隔一段固定的时间执行一次

6.事件流

有三个阶段(1)事件捕获阶段(2)处于目标阶段(3)事件冒泡阶段

1.阻止事件冒泡和阻止默认事件

原生js:

阻止冒泡:e.stopPropagation() / IE:cancelBubble=true

阻止默认事件:e.preventDefault()  /  IE:returnValue = false

jQuery:

阻止冒泡:e.stopPropagation()

阻止默认事件:e.preventDefault()

既能阻止冒泡,又能阻止默认事件:return  false

vue(加在事件上面):

阻止冒泡:.stop()

阻止默认事件:.prevent()

react:

阻止冒泡:e.stopPropagation()

阻止默认事件:e.preventDefault()

7.new的时候做了哪些事情

  • 隐式的创建了一个空对象,让构造函数的this指向这个空对象
  • 执行构造函数中的代码
  • 让实例对象的__proto__指向构造函数的prototype
  • 隐式的返回创建好的对象

8、watch和computed的区别

watch:是一个函数不需要调用一个元素的改变影响多个元素无缓存可以做异步

computed:是一个函数需要调用多个元素的改变影响一个元素有缓存纯计算

9.mutations VS actions

mutations :

修改state         不能做异步 store.commit()触发mutations 第一参数是stateactions:    

不能直接修改state   能做异步  store.dispatch()触发actions  第一参数是context(store)

10.router和route

router:路由跳转

route:路由信息

11.H5新特性

1.nav:导航

header:头部(页眉)

footer:尾部(页脚)

3.input:

search(搜索框)

tel(手机号)

email(邮箱)

range(滚动条)

4.video:视频

5.audio:音频

12.浏览器渲染页面的过程

1.用户输入网址,浏览器向服务端发送请求,服务器返回html文件

2.浏览器开始载入html代码,发现CSS链接,引入CSS文件

3.发送CSS文件请求,服务器返回CSS文件

4.浏览器发现js链接,发送请求引入js文件

13.重排和重绘

1.重排:页面的结构发生变化,引起页面重排

2.重绘:页面的元素属性发生变化,引起页面重绘

重绘不一定引起重排,重排肯定会引起重绘

13.原型和原型链

原型:每一个对象类型都有一个隐式原型__ proto __ ,每一个函数都有一个显示原型prototype,该属性指向它的原型对象。

原型链:某个对象的原型又有自己的原型,直到某个对象的原型为null为止,组成这条的最后一环,这种一级一级的链就是原型链。

14.this指向

this一般指向他所处的环境

1.普通函数中,this指向window

2.构造函数调用时,this指向他的实例对象

3.对象方法调用时,this指向所属的对象

4.在事件绑定函数中,this指向绑定事件的对象

15.vue特点

数据驱动,组件系统

16.vue和react的区别

1.vue双向绑定,react是单向绑定(需要使用setState()函数重新渲染)

2.react是用js控制一切,vue是把js,html,css写在一起,用各自的处理方式

3.react是类式的写法,api很少,vue是声明式的写法,引入的参数很多

17.vue数据双向绑定原理

使用object.defineProperty方法, 里面有个set()方法和get()方法

set()方法在数据发生变化时触发

get()方法在获取数据触发

在数据发生变化时,使用set()方法更改数据,实现数据的绑定

18.object.defineProperty的缺陷

1.无法监听数据的添加和删除

2.无法监听数组的变化

3.只能劫持对象的属性,无法实现对象里面包对象的监听,无法深度遍历

所以vue3中使用了proxy(可以监听数组变化,可以监听对象而非属性)

19.Hooks

作用:给函数组件加生命周期和state

1.useState():给函数组件添加数据

2.useEffect():给函数组件添加生命周期

3.useReducer():给函数组件添加状态管理

4.useContext():用这个父组件数据可以直接子组件的子组件

20.React生命周期

挂载卸载过程

1.constructor():React数据的初始化

2.componentWillMount():数据初始化之后,还未渲染DOM

3.componentDidMount():DOM节点已经生成,在这里调用ajax

4.componentWillUnmount():组件卸载和数据的销毁

更新过程:

1.componentWillReceiveProps():接收父组件改变后的props需要重新渲染数据

2.shouldComponentUpdate():组件更新

3.componentWillUpdate():shouldComponentUpdate等于true时,进入componentWillUpdate

4.componentDidUpdate():组件更新完毕

21.vue3新特性

1.引入了Tree-Shaking,组件更加轻量化

2.新增一个生命周期setup,可以代替Create和beforeCreated

3.将destroyed和beforeDestroy改名为unmounted和beforeUnmount

4.组合API,可以将同一功能的代码放到一起维护

5.Fragment,vue2中template标签中都需要一个根节点,vue3中不用,优化标签结构

6.vue2中v-for中的key值不能放在template标签上,vue3中可以

7.v-for和v-if,在vue中v-for优先级高,在vue3中v-if优先级更高

22.git常用命令

1、首次拉取项目:git clone 项目地址  

2、https方式的需要输入用户名和密码,需要长期保存信息的话则输入:git config --global credential.helper winstore

ssh方式的需要生成ssh密钥然后在github上设置,生成密钥:ssh-keygen -t rsa -C

3、查看分支:git branch -a

4、切换分支:git checkout  分支名

5、拉取项目:git pull  origin 分支名

6、添加管理:git  add  .

7、提交代码:git commit -m  说明

8、查看提交:git  log

9、推送提交:git push  -u  origin  分支名

10、版本回退:git reset --hard 目标版本号      或者      git revert -n 版本号

或者git reset --hard HEAD^ 退回到前一个版本

11、回退后push会报错,需要强制推送:git push  -f

12、合并分支:git  merge 分支名

13.:回溯到之前版本:

git log:查看之前commit的版本id,找到想要还原的版本

git reset --(id):还原到之前的id版本

git push origin master:强制push到远程

23.vue脚手架

1.创建项目:vue create app

2.启动项目:npm run serve

3.打包命令:npm run build

24.http常见状态码

1XX:接受的请求正在处理

2XX:请求正常处理完毕

3XX:需要进行附加操作完成请求

4XX:客户端请求出错,服务器无法处理请求

5XX:服务器处理请求出错

101:切换协议。

200:请求成功。一般用于GET与POST请求

203:非授权信息。请求成功。但返回的meta信息不在原始的服务器,而是一个副本

204:无内容。服务器成功处理,但未返回内容。

301:永久移动。请求的资源已被永久的移动到新URI,返回信息会包括新的URI,浏览器会自动定向到新URI。

302:临时移动。

304:未修改。所请求的资源未修改,服务器返回此状态码时,不会返回任何资源。

305:使用代理。所请求的资源必须通过代理访问

307:临时重定向。

400:客户端请求的语法错误,服务器无法理解

404:服务器无法根据客户端的请求找到资源(网页)

405:客户端请求中的方法被禁止

500:服务器内部错误,无法完成请求

502:作为网关或者代理工作的服务器尝试执行请求时,从远程服务器接收到了一个无效的响应

503:由于超载或系统维护,服务器暂时的无法处理客户端的请求。

505:服务器不支持请求的HTTP协议的版本,无法完成处理

25.css3新特性

1.border-radius:圆角

2.box-shadow:盒阴影

3.border-image:边框图像

4.background-image:设置一个元素的背景图像

5.linear-gradient:线性渐变

6.radial-gradient:径向渐变

26.如何使一个盒子水平垂直居中

方法1:父相对定位,子绝对定位,left和top都是50%,然后设置margin-top和margin-left为-50%

方法2:父相对定位,子绝对定位,设置margin为auto,然后设置top,bottom,left,right都是0

方法3:弹性盒,父元素设置display:flex,justify-content:center,align-items:center

方法4:计算距离(这个方法比较笨)

方法5: 父相对定位,子绝对定位,left和top都是50%,然后设置transform:translate(-50%,-50%)