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
