1.节流和防抖的区别
防抖:在一定的时间内触发一次
节流:触发最后一次
页面回流和重绘;
2.v-show display none/block 改变css,频繁操作节省开销
v-if 控制展示和不展示的,对dom的操作,用于切换不频繁的场景
3.vue传值方式有哪几种
(1)props:父给子传值
(2)父组件通过$refs获取子组件的数据和方法,子组件给父组件传值;
(3)广播传值,父子组件、兄弟组件间进行传值;vueEvents.js eventbus??事件总线跨越多个层级,
//发送广播
vueEvents.$emit('notifyToNew',this.homeMsg+numbery);
//接收广播
vueEvents.$on("notifyToNew",function(data_P){
//注意this的作用域
console.log('广播传过来的值是'+data_P);
_this.receive = data_P;
})
(4)localstorage本地缓存
存:localStorage.setItem('tolist',JSON.stringify(this.tolist));
取:vartolist=JSON.parse(localStorage.getItem('tolist'));
(5)vuex
state:存储数据
mutations:(同步)定义方法,方法的作用是修改state中的数据
action:(异步)Action 提交的是 mutation,而不是直接变更状态。
getter:从基本数据(state)派生的数据,相当于state的计算属性。
modules:模块化vuex,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理。
使用下面这两种方法存储数据:
dispatch:异步操作,写法: this.$store.dispatch('action方法名',值)
commit:同步操作,写法:this.$store.commit('mutations方法名',值)
项目结构:
https://www.shangmayuan.com/a/e3ac0302b11d42228252c043.html
(6)路由传值
(1).父组件push使用this.$router.push
(2).在子组件中获取参数的时候是this.$route.params
4.封装过vue的组件或者插件吗?
slot插槽==》用于公共组件不同的部分
5.vue双向绑定原理 //www.greatytc.com/p/e7ebb1500613
model => view 以及view => model 的双向绑定。
6.axios的二次封装
404等错误做拦截统一处理
token放入header
7.路由守卫
判断权限,登录界面beforeeach去做的
8.移动端怎么处理跨域问题
9.小程序中冒泡事件怎么解决
bindtap
catchtap可以解决冒泡事件,在子组件里添加该事件则父组件就不会接受到该事件。
10.小程序登录的时候,正则表达式判断一下手机号格式
11.vue项目对webpack做过哪些配置?
12.前端项目vue的优化方案?
(1)使用计算属性:computed
计算属性的最大特点是它可以被缓存,只要它的依赖不被改变就不会被重新求值,再次访问会直接拿到缓存的值在做一些复杂计算时,可以极大提升性能。
(2)使用函数式组件
参考官网:https://cn.vuejs.org/v2/guide/render-function.html#%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BB%84%E4%BB%B6
函数式组件是无状态的,无实例的,在初始化时不需要初始化状态,不需要创建实例,也不需要去处理生命周期等,相比有状态组件,会更加轻量,同时性能也更好。
(3)结合场景使用v-show和v-if
v-show是通过切换元素的display属性来控制的,和v-if相比不需要在patch阶段创建/移除节点,只是根据v-show上绑定的值来控制dom元素的style.display属性,在频繁切换的场景下可以节省很多性能。
如果初始值是false,v-if不会创建隐藏的节点,但是v-show会创建,造成了性能的浪费。
所以,v-if的优势体现在初始化时,v-show体现在更新时。
(4)keep-alive
在动态组件的场景下,由多个组件来回切换,用keep-alive作缓存,它的作用是将它包裹的组件在第一次渲染后就缓存起来,下次需要的时候就直接从缓存里读取,避免了不必要的性能浪费。
动态组件:
<template>
<div>
<keep-alive>
<component :is="current" />
</keep-alive>
</div>
</template>
(5)避免v-for和v-if同时使用
https://cn.vuejs.org/v2/style-guide/#%E9%81%BF%E5%85%8D-v-if-%E5%92%8C-v-for-%E7%94%A8%E5%9C%A8%E4%B8%80%E8%B5%B7%E5%BF%85%E8%A6%81
(6)
13.js的原型链
proptype-object
14.闭包
15.canvas
16.echarts
17.移动端适配
rem布局
html的fontsize怎么设置?
先计算屏幕宽度/7.5 (移动端的图一般都是750px)
18.如何实现一个元素在父元素中绝对居中?
水平 、垂直居中
水平居中 margin: 0 auto实现水平居中
(1)display:flex 弹性盒模型
设置父元素(这里是指body)的display的值为flex即可。具体代码如下,对代码不做过多的解释,如果想了解弹性布局的可以看阮一峰老师的博客http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html:
display: flex; align-items: center;/*定义body的元素垂直居中*/ justify-content: center;/*定义body的里的元素水平居中*/
(2)
19. 和后台交互是怎么封装的?
对错误码和请求头header做处理? 比如header上绑定请求头。
20.vue和jquery的区别?
jquery使用选择器选择dom
vue使用虚拟dom,对象和操作dom分离开,相对于jquery性能消耗低。
21.localstorage,sessionstorage,cookiestorage
localstorage 持久性好,关闭页面后还存在
sessionstorage 基于会话,会话结束后就会结束
cookiestorage容量小,
22.动态路由
addroutes动态路由,聪前端配置权限,后端获取数据配置路由。
23.文件上传,大文件怎么处理?
24.excel导出?
前端的插件
25.怎么理解面向对象开发vue和函数式编程react?
26.动态表单
前端通过拖拽形成json数据发送给后端,根据后端返回的数据渲染前端表单数据
json数据里有个type,比如渲染成input形成输入类型表单
27.typescript??
28.怎么处理两个异步请求?
promise.then
ES7 await
29.vue事件修饰符
stop
prevent
30 v-router location.href跳转的区别
location.href跳转 会刷新页面。
31.es6模版组件库
32.如何阻止冒泡事件?stop.
还有其他vue事件的修饰符 prevent
阻止默认事件
33.页面加载过慢的原因
34.vue watch 和computed使用方式区别
35.MVVM框架和适用场景
36.scss?
37.回流和重绘
38.清除浮动的方式
clear
39.添加点击事件,同一个元素添加两个点击事件
window.
40.vue router路由模式
history保存路由组件到浏览器 keep-alive ,提高用户体验度,看是否需要重新加载
hash
41.监听路由参数的变化
42.js对数组的操作方法
find filter foreach length map 取出某些数据
some查找某一行
includes concat set去重
数组尾部插入数据的方法
43.false&&false = false
44.在js中如何控制一段函数顺序执行
await 解决回调地狱
45.什么是样式穿透?
/deep/ 都是深度选择器
46.假如页面有个图标不显示了,如何分析问题?
console控制台报错
css未给高度和宽度
47.以逗号作分割的字符串分隔为 数组?
split
48.less和scss的区别
49.怎么理解js的单线程
websocket是双向,多次的
50.操作一个字符串的方法
51.如何配置ios的齐刘海,填满?
flex:1