面试题

1.vue怎么实现dom缓存?

通过keep-alive包裹router-view

2.$route和$router的区别?

$routes可以获取接收路由传递参数,是一个跳转路由对象,可以获取path,params query name(路径配置对象)

$router是切换路由(路由实例)

3.axios有什么优点?

提供了一些promise方法,

符合当前mvvm的浪潮

从node.js里面的http请求

4,移动端兼容问题?

1.IOS移动端click事件300ms的延迟相应                          使用fastclick插件

2.ios在点击一些非可点击元素,会出现不能点击的情况          cursor:pointer

3.h5底部输入框被键盘遮挡问题            $(window).resize 判断当年浏览器高度是不是小于浏览器高度,是的话绝对定位

4.不让 Android 手机识别邮箱    <meta content="email=no" name="format-detection" />

5.禁止 iOS 识别长串数字为电话  <meta content="telephone=no" name="format-detection"/>

6.禁止 iOS 弹出各种操作窗口      -webkit-touch-callout:none

7..CSS动画页面闪白,动画卡顿  尽可能地使用合成属性transform和opacity来设计CSS3动画，不使用position的left和top来定位        开启硬件加速 transform  translate3d(0, 0, 0);;

8 fixed定位缺陷  ios 软键盘弹出 影响fixed定位

9  html5调用安卓或者ios的拨号功能    html5提供了自动调用拨号的标签，只要在a标签的href中添加tel:就可以了。

10 iphone及ipad下输入框默认内阴影    -webkit-appearance:none; 

5.cookie localstorage sessionstorage 区别

cookie 大小4kb  可以设置一个过期时间,可以自动将cookie添加到请求头

localstorage 大小为5m,可以永久保存的,除非手动删除,需要手动添加请求头

sessionstorage大小为5m,储存时间是一个会话周期

6.截取字符串

slice(start end)

substring(start end)

substr(start length)

7三栏布局

布局方式:圣杯布局(浮动布局)、双飞翼布局、Flex布局、绝对定位布局、表格布局、网格布局  。

表格布局(父盒子设置display:table,子元素设置display:table-cell)

双飞翼布局,mian主要部分放前面,左边盒子-100%,右边盒子 -自身宽度,main宽度100%,里面嵌套子元素,margin左右各自宽度

8,什么是跨域?解决跨域方式?

解决同源策略

jsonp  core 反向代理

8 .webpack使用?

首先项目初始化,在package.json里面的script注明webpack main.js,第二部可以配置webpack.config.js,指定入口和出口文件,

再次之我们利用html-webpack-plugin插件,这时候可以在script标签里面添加dev属性,里面写上webpack-dev-server,当然我们还需要去配置一些匹配规则

webpack是根据一个项目当成整体,给定一个主文件,再去从这个文件找到相关依赖文件,使用loader处理他们,最后打包一个或多个浏览器可以识别的js文件

9 jq怎么判断一个数组有没有这个元素?

isArray

10.动画一般用jq写还是css写

看具体情况,jq动画粒度小,css粒度大,CSS3动画里被支持的时间函数非常少，不够灵活,jq一套代码可以解决多个不同代码,但是css动画可以减少重构与回流,

11. 数组去重

new Set()  空数组 indexOf arr[i]=-1    foreach 循环  空数组 includes arr[i],没有,push进去  双重for循环 arr[i] === arr[j]

filter 利用第三个参数 self  self.indexOf(item) === index ,等于push进去

12.js了解多少,undefined和null的区别?

undefinded检测数据类型是undefined, null是object,undefined一般是一个数据本该有,但是没有,打印undefined,null表示根本不存在

13.盒模型 ,box-sizing有什么属性,区别?

标准盒模型,content + padding + border  ,width只包含内容

c3盒模型 里面的width = content + padding + border 

box-sizing属性有border-box padding-box content-box 宽度界定不一样

14. flex布局?用处?

弹性伸缩布局 , 用处,常用于pc移动基础布局 ,圣杯布局,骰子布局,固定底栏布局,流式布局

基本属性 flex-direction  (row column)  控制主轴方向

              flex-wrap  换行与否

              flex-flow flex-direction 和 flex-wrap的合写

              justify-content 定义主轴对齐方式  flex-start  end  space-between(留空) space-around  center

              align-item 定义交叉轴对齐方式  flex-start flex-end baseline stretch center

              align-content 定义多根轴的对齐方式  flex-start  flex-end  space-between(留空) space-around  center stretch

15,传值问题

组件传值:父组件传子组件,利用属性绑定,子组件准备props接收

子组件传父组件,父组件准备一个方法,通过自定义事件传给子组件,子组件利用$emit传值

              非父子组件传值,初始化一个事件总线,发送者是bus.$emit ,接受者bus.$on,第一个参数是指定参数,             比如look,二个都要有, 接收者需要回调去拿到参数

路由传值 利用router-link传参,或者利用编程式导航传值,

vuex传值 vuex的state储存值,组件通过$store.commit('方法名',值),此时Vuex通过方法(state,传过来的对象)拿值

                组件通 过$store.state.car或者store.getters.方法名拿值

插槽传值: 通过slot-scope="scope"接收,通过属性绑定传值

16.路由传参,

利用$router.push携带参数跳转,直接在path后面:id,通过this.$route.params.id接受

利用指定组件name,,path也要写,然后通过params{}传值 利用this.$route.params.id接收

利用指定路由路径,通过query传值,利用this.$route.query.id接收

直接利用router-link传参

17c3新增属性

选择器,比如属性选择器, 关系选择器 ,伪元素选择器还有伪类选择器等等

c3阴影,text-shadow(x偏移,y偏移,模糊距离,阴影颜色) ,box-shadow(x偏移,y偏移,模糊距离,阴影颜色,inset)

brandground系列属性  clip origin  size

c3渐变 background-image linear -gradient(to 方向,开始颜色,结束颜色)    radial-gradient (圆心位置,形状/大小 开始颜色,结束颜色)

2d转换,3d转换,平移缩放旋转斜切

过渡

媒体查询 @media screen and(min-width:320) and(max-width:640px)

18.h5新增属性方法

表单属性

,语义化标签

文件读取  filereader      readAsDataURL()

拖拽

地理位置

canvas

网络状态

19.vue生命周期

beforeCreated  el和 data都未初始化

created  data和方法初始化,但是此时el没有初始化,此时可以发送ajax请求

beforeMount  el开始初始化

mounted 此时date和el都完成初始化,此时可以操作dom,但是我们还不知道vue实例有没有挂载到document

beforeUpdate  数据更新前 , updated数据更新

beforeDestory  开始销毁,如果有定时器,在这里清除

destory 卸载vue实例

20数组合并的方法

concat

for循环push

apply,push

扩展运算符

21一个200*200的div在不同分辨率屏幕上下左右居中，用css实现

top:50%

Left:50%;

Position:absolute;

Transform : translate(-50%,-50%)

22.http 和 https 有何区别？如何灵活使用？

https是对http的加密,会造成性能损耗

http是80端口,但是https是443端口

23.常见的HTTP状态码

200 成功

404没找到

500 服务器错误

501服务器无法识别

301永久重定向

302临时重定向

400 客户端错误,非法请求

24.如何进行网站性能优化

减少http请求次数

图片压缩

减少dom操作

压缩打包

按需加载

25什么是mvvm mvc是什么区别 原理?

mvvm是m数据层v视图层 ,vm  模型视图层调度者

mvc

m数据层v视图层 c 逻辑层 crud Controller（业务逻辑处理

26.优雅降级和渐进增强

向下兼容

先完整适配,然后在逐级适配低版本浏览器

-moz- webkit 

transform :all  0.5s

-moz写在后面

渐进增强  向上兼容  先实现基本的

27 JS哪些操作会造成内存泄露

1意外的全局变量引起的内存泄露

2.闭包

3,被遗忘的定时器或者回调

28. document.write和innerHTML的区别：

document.write是直接写入到页面的内容流，如果在写之前没有调用document.open, 浏览器会自动调用open。

每次写完关闭之后重新调用该函数，会导致页面被重写。

innerHTML则是DOM页面元素的一个属性，代表该元

素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容，则需要修改document.documentElement.innerElement

29  页面白屏你分析一下

需要使用plus.webview类来做MPA应用

30数组的方法有哪些

方法

join()  分隔符 ,  push() 在数组后面添加  ,  pop()  在数组后面删除, 

unshift() 在数组前面添加,  shift() 在数组前面删除,  reverse() 翻转,

sort() 排序,  concat()  合并/拼接,  slice() 截取 ,  splice() 删除/添加/替换,

indexOf() 第一次出现的位置,  lastIndexOf()最后一次出现的位置, 

indexOf(值, fromIndex) fromIndex第一次出现的位置,

遍历方法

forEach遍历数组 

each  jquery遍历数组

map 遍历数组 返回新数组

filter 过滤器 返回新数组 新数组中只有符合条件的值

some 返回布尔值  数组中的值符合条件返回true  不符合返回false

every 返回布尔值  要求数组中所有的值都符合条件 返回true  否则返回false

find  返回符合条的第一个值

findIndex  返回符合条件的第一个值的下标

concat,join和slice不会改变原数组

31 字符串所有方法？

splice slice substr  substring    split match toUppcase大小写  charAt  replace

slice(start,end)

32  rem布局 rem和em区别

rem 和 em都是相对单位,rem相对于html根字体大小,em是根据浏览器的根字体大小

32  bind call? apply区别

call和apply 会立即函数调用,bind不会,bind只改变this执行,需要重新调用,改变后的this指向不能改变,bind支持参数,apply支持参数列表

33each怎么用中this指向谁

each是jquery的方法,each的第一个参数,index ,item每一项,this指向init实例,就是jquery

34  get? post区别

get 和post区别 get通过url传递数据,而且有大小限制,4kb , post是通过请求报文的形式传递数据,大小是2m

35  ES6 模块与 CommonJS 模块的差异?

它们有两个重大差异。

CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。

CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。

37computed与watch的区别？

computed计算的值会被缓存,除非页面响应发生变化,重新渲染,优点是减少计算性能消耗,缺点对于比如像date.now()这种不再更新

watch是自身变化,影响别人,但是可以做路由监听,监听一个值的变化,从而进行操作

38.

vueX是对公共数据的管理工具,可以把共享数据保存到vueX,方便整个程序任何组件可以获取公共数据

39 js写10到100的随机数

Math.random()*90 + 10

40.移动端和pc端怎么切换的?

if (!urlhash.match("fromapp")){

                //移动端

                if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad)/i))){

                    window.location.href='/cn/index.htm';

                //pc端

                }else{

                    window.location.href='/cn/index.htm';

                }

            }

利用navigator.userAgent.match去匹配

41.v-model原理

v-model只不过是一个语法糖而已,触发 input 事件 并传递数据 (核心和重点),object.definedProperty

绑定文本输入框是绑定值,

绑定多选框绑定的是选中转态

42 vue导航守卫

vue导航守卫包括前置守卫,后置钩子(不接受next参数),组件守卫

router.beforeEach(to,from,next) => next(),next能够执行resolve钩子,不然一直是pedding状态,而不会转化成comfirm

后置钩子afterEach,不可以指定next(),在组件守卫里面,beforeRouterEnter不能访问this,但是在beforeRouterupdate阶段可以访问

43,抓包工具

fiddler 代理服务器,监听请求,中间人

44. 小程序和vue最大的区别

小程序没有v-model双向数据绑定,小程序主要通过this.setData({key:value})

45,用border画一个三角形

height:0,width:0,border-left 100px soild  transparent  border-right:100px soild transparent border-bottom:150px solid red  上三角

46清除浮动的方式?

父盒子设置overflow:hidden 子盒子clear:both  设置高度 , 添加伪元素, content:'',display:block  clear:both height:0,width:0 visibility:hidden

47 overflow:hidden用处

1.超出部分隐藏, 2.清除浮动,3,形成BFC(块级格式上下文)

48.移动端点投事件?解决

主要是模态框点击穿透,引入fastclick插件

49.var const let 区别

var 定义的变量可以被修改,可以重复定义,可以定义,不赋值,没有块级作用域,可以变量提升

const 定义的值不能被修改,只读变量,一旦初始化必须赋值

let定义的有块级作用域,定义变量之前的会造成暂时性死区,而且不存在变量提升,不能重复定义

50 css3实现文字渐变?

mask  background-clip配合text-fill-color

background-image: linear-gradient(bottom,red,#fd8403,yellow);

background-clip:text;

text-fill-color:transparent;

51,ajax原生写法,有哪四步?

1, 实例化  XMLhttprequset对象

2, 设置请求行

3, 设置请求头

4, 设置请求主体并发送请求

var  xhr = new  XMLHttpRequest()

xhr.open('get',index.php)

//post请求

xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')

xhr.send('name=zs&age=18)

xhr.onreadystatechange = function(){

  if(xhr.readystate == 4 & xhr.status == 200)

    console.log(xhr.responseText)

}

52 common.js 规范

1.一个文件就是一个模块

2.普通定义的变量和函数,对象都是该变量

3.通过require加载

4.通过export 和module export 导出

53 import 和  require 的区别 ?

require 是 AMD形成的规范,是运行时候调用,可以放在任何位置 , require是赋值过程, 把require结果赋值

import 是es6的语法 ,是编译时候调用,必须文件开头引入,是个解构过程,

54 .集中化vueX是什么?

是一个公共的数据管理工具,这样实现共享数据,任何组件都可以去调用这些数据,里面有 state(数据管理地方),mutations,getters,

辅助函数(mapstate,mapmutations,mapgetters),实现数据在组件的映射

55 vue-loader作用?

解析vue文件里面的html,css,js,template等,交给对应的loader处理

56 lazyload是怎么使用

jquery:里面直接引入 lazyload ,把图片放到data-oiginal里面 ,初始化$("img").lazyload();

vue里面引入vue-lazyload ,配置相关参数, 然后使用v-lazy

57,怎么处理假数据

可以装json-server 或者mock-server

58.路由传值

通过编程式导航,$router.push,指定query(利用this.$route.query.id接收),params(利用this.$route.params.id接收)等传参

或者使用router-link直接拼接

直接path携带参数跳转

59.页面白屏原因

网络延迟,js加载延迟,阻塞页面

客服端bug,缓存错乱,不缓存js,乱缓存html

尽量同步输出,减少文件嵌套,给接口设置tiemout

60,垂直居中实现?

flex布局,justify-content : center

            align-item:center

            display:flex

定位 :  position: absolute;

            top:50%;

            left:50%;

            width:100%;

            transform:translate(-50%,-50%);

表格布局: display:table-cell

                vertical:middle

                text-aligin:center

61,垂直水平居中

  定位:position:absolute

          top:50%;

          left:50%;

          transform:translate(-50%,-50%)

flex: justifty-content:center

        align-item:center

        display:center

表格布局:display: table-cell;

            vertical-align: middle;

              子元素 margin: 0 auto

62 二个盒子相互重叠?

清除浮动

63.js中转成布尔值为false

1、undefined（未定义，找不到值时出现）

2、null（代表空值）

3、false（布尔值的false，字符串"false"布尔值为true）

4、0（数字0，字符串"0"布尔值为true）

5、NaN

6、""（双引号）或''（单引号） （空字符串，中间有空格时也是true）

64 判断数据类型

简单类型 typeof

复杂类型:利用Object.prototype.toString.call(null,具体值) [object array] [object string]

                instanceof    // func instanceof Function    obj instaneof Object

                constructor            // num.constructor .name  obj.constructor.name 

65.vue按需加载

路由懒加载

const  home = () => import('../home.vue')

出现在打包上线阶段(npm run build)

66. async和 await

async 返回一个promise 对象 async包装的函数可以看成多个异步操作包装的promise对象

await  是then的一个语法糖

async内部的函数返回值,会成为then回调的参数

async函数返回一个promise对象,可以使用then添加回调,遇到await立即返回这个promise 对象,等执行异步后,再执行函数后面的语句

async函数内部抛出错误，会导致返回的 Promise 对象变为reject状态。抛出的错误对象会被catch方法回调函数接收到。

如果await后面的异步操作出错，那么等同于async函数返回的 Promise 对象被reject。

67移动端调试工具

vConsole

68  vue路由原理?

1.一种是# hash  ,    在地址中加入#以欺骗浏览器，地址的改变是由于正在进行页内导航

2.一种是h5的history  ,    使用URL的Hash来模拟一个完整的URL

前端核心:更新视图但不重新请求页面

69 css权重

行内样式+1000,id:+100,class:10,标签加1

70,路由传参对象形式?

1.导航路由直接传对象,params和query对象

<router-link

    :to="{

        path: 'yourPath',

        params: {

            name: 'name',

            dataObj: data

        },

        query: {

            name: 'name',

            dataObj: data

        }

    }">

</router-link>

2.利用编程式导航

this.$router.push({

            path: 'yourPath',

            name: '要跳转的路径的 name,

            params: {

                name: 'name',

                dataObj: this.msg

            }

72,怎么监听vuex里面数据的变化

在组件里面使用watch监听,把值通过方法传到vuex状态管理,用getters接收

73,项目怎么兼容苹果和安卓?

1,直接设置viewport为320px的1.3倍，将页面放大1.3倍。(因为苹果手机宽度比约等于1.3)

2.rem布局

3.背景图片和图片使用高清图

4,使用百分比布局图片塌陷padding-top = (Image Height / Image Width) * 100%

74.ios和安卓的坑?

1、Android滚动条问题 

html, body {

        height: 100%;

        overflow: auto;

      }

2. iOS滑动卡顿问题  body设置height: 100%时，页面会卡顿， -webkit-overflow-scrolling: touch;

3 iOS滚动scroll事件 ios的webview 内核 设定了其在进行momentum scrolling(弹性滚动)时，会停止所有的 事件响应 及 DOM操作引起的页面渲染，故 onscroll 不能实时响应

利用以在元素上添加touchmove事件。

75 vue里面父组件如何修改子组件的样式

通过$ref拿到当前$refs

76element-ui的覆盖问题

1, 去掉 scoped

2, 混用本地和全局样式

3, 使用深度作用选择器

77每隔一秒打印一个数字

for ( var i = 1; i <= 10; i++ )  {

    (function(i) {

  setTimeout(function (){

    console.log(i)

}, i * 500);

})(i);

}

78vuex工作原理

vuex 实现方式使用了vue 自身的响应式设计, 依赖监听, 依赖收集都属于vue对象property set get方法的代理劫持.

79对象类型与基础类型数据的区别

基础数据类型在栈中进行匹配, 而对象类型在堆中进行匹配

所有方法的参数都是再传传递引用而非本身的值

对象之间的赋值只是传递引用, 基本类型之间的赋值是创建新的拷贝

80从输入url到页面加载发生了什么

1, 浏览器的地址栏输入url并按下回车

2, 浏览器查找当前url是否存在缓存, 并比较缓存是否过期

3, DNS解析URL对应的IP

4, 根据IP建立TCP连接(三次握手)

5, HTTP发起请求

6, 服务器处理请求, 浏览器接收HTTP响应

7, 渲染页面, 创建DOM树

8, 关闭TCP连接(四次握手)

81 webpack是什么

webpack是一个前端资源加载 / 打包工具, 它将根据模块的依赖关系进行静态分析, 然后将模块按照指定的规则生成对应的静态资源 .

当webpack处理应用程序时, 它会递归构建一个依赖关系图(dependency graph) , 其中包含应用程序需要的每个模块, 然后将所有这些模块打包成一个或者多个bundle