ES6
-
列举常用的ES6特性：
-
箭头函数需要注意哪些地方？
-
let、const、var
-
拓展：var方式定义的变量有什么样的bug？
-
Set数据结构
-
拓展：数组去重的方法
-
箭头函数this的指向。
-
手写ES6 class继承。
微信小程序
-
简单描述一下微信小程序的相关文件类型?
-
你是怎么封装微信小程序的数据请求？
-
有哪些参数传值的方法？
-
你使用过哪些方法，来提高微信小程序的应用速度？
-
小程序和原生App哪个好？
-
简述微信小程序原理？
-
分析微信小程序的优劣势
-
怎么解决小程序的异步请求问题？
与v-if一样，当表达式结果为true才显示元素
特点：
- 不展示的DOM元素未被移除，仅仅是使用样式隐藏掉（通过display属性隐藏）
适用场景：
- 适用于切换频率较高的场景
<!-- 使用v-show做条件渲染 -->
<h2 v-show="false">66666666</h2>
<h2 v-show="1 === 1">777777777</h2>
=========================================================================
列表渲染主要用v-for对数组里面的数组进行遍历，用于展示列表数据
语法：v-for="(item, index) in xxx" :key=“yyy”
可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
<!-- 遍历数组 -->
<h2>人员列表（遍历数组）</h2>
<ul>
<li v-for="(p,index) of persons" :key="index">
{{p.name}}-{{p.age}}
</li>
</ul>
<!-- 遍历对象 -->
<h2>汽车信息（遍历对象）</h2>
<ul>
<li v-for="(value,k) of car" :key="k">
{{k}}-{{value}}
</li>
</ul>
<!-- 遍历字符串 -->
<h2>测试遍历字符串（用得少）</h2>
<ul>
<li v-for="(char,index) of str" :key="index">
{{char}}-{{index}}
</li>
</ul>
<!-- 遍历指定次数 -->
<h2>测试遍历指定次数（用得少）</h2>
<ul>
<li v-for="(number,index) of 5" :key="index">
{{index}}-{{number}}
</li>
</ul>
new Vue({
el:'#root',
data:{
persons:[
{id:'001',name:'张三',age:18},
{id:'002',name:'李四',age:19},
{id:'003',name:'王五',age:20}
],
car:{
name:'奥迪A8',
price:'70万',
color:'黑色'
},
str:'hello'
}
})
列表渲染用的key，如果列表需要经常排序等操作，不能用index，应该用数组的对象的id作为key，否则可能不仅效率低下，而且会出现bug
列表除了显示出来，还可能会有过滤的操作，也就是前端实现搜索框搜索的操作，这里面用到的原理就是过滤
对于过滤的操作，可以用watch监视属性实现、用computed计算属性实现
<!-- 准备好一个容器-->
<div id="root">
<h2>人员列表</h2>
<input type="text" placeholder="请输入名字" v-model="keyWord">
<ul>
<li v-for="(p,index) of filPerons" :key="index">
{{p.name}}-{{p.age}}-{{p.sex}}
</li>
</ul>
</div>
1.1、用watch监视属性实现列表过滤
new Vue({
el:'#root',
data:{
keyWord:'',
persons:[
{id:'001',name:'马冬梅',age:19,sex:'女'},
{id:'002',name:'周冬雨',age:20,sex:'女'},
{id:'003',name:'周杰伦',age:21,sex:'男'},
{id:'004',name:'温兆伦',age:22,sex:'男'}
],
filPerons:[]
},
watch:{
keyWord:{
immediate:true,
handler(val){
this.filPerons = this.persons.filter((p)=>{
return p.name.indexOf(val) !== -1
})
}
}
}
})
1.2、用computed计算属性实现列表过滤
//用computed实现
new Vue({
el:'#root',
data:{
keyWord:'',
persons:[
{id:'001',name:'马冬梅',age:19,sex:'女'},
{id:'002',name:'周冬雨',age:20,sex:'女'},
{id:'003',name:'周杰伦',age:21,sex:'男'},
{id:'004',name:'温兆伦',age:22,sex:'男'}
]
},
computed:{
filPerons(){
return this.persons.filter((p)=>{
return p.name.indexOf(this.keyWord) !== -1
})
}
}
})
列表排序则是通过一个点击事件，对数组里面的数据进行排序
<!-- 准备好一个容器-->
<div id="root">
<h2>人员列表</h2>
<input type="text" placeholder="请输入名字" v-model="keyWord">
<button @click="sortType = 2">年龄升序</button>
<button @click="sortType = 1">年龄降序</button>
<button @click="sortType = 0">原顺序</button>
<ul>
<li v-for="(p,index) of filPerons" :key="p.id">
{{p.name}}-{{p.age}}-{{p.sex}}
<input type="text">
</li>
</ul>
</div>
new Vue({
el:'#root',
data:{
keyWord:'',
sortType:0, //0原顺序 1降序 2升序
persons:[
{id:'001',name:'马冬梅',age:30,sex:'女'},
{id:'002',name:'周冬雨',age:31,sex:'女'},
{id:'003',name:'周杰伦',age:18,sex:'男'},
{id:'004',name:'温兆伦',age:19,sex:'男'}
]
},
computed:{
filPerons(){
const arr = this.persons.filter((p)=>{
return p.name.indexOf(this.keyWord) !== -1
})
//判断一下是否需要排序
if(this.sortType){
arr.sort((p1,p2)=>{
return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age
})
}
return arr
}
}
})
Vue会监视data中所有层次的数据
- 监测对象中的数据：
* 通过setter实现监视，且在new Vue就传入监测数据
* 如果在对象中后追加的属性，Vue默认不做响应式处理
* 如需给后添加的属性做响应式，请使用如下API：
* Vue.set(target，propertyName/index，value) 或 vm.$set(target，propertyName/index，value)
- 监测数组中的数据：
* 在Vue修改数组中的某个元素一定要用如下方法：
* 使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
* Vue.set() 或 vm.$set()
特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！
===========================================================================
收集表单数据一般通过v-model来实现数据的双向绑定
- 若：
<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
- 若：
<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
- 若：
<input type="checkbox"/>
* 1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
* 2.配置input的value属性:
* v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
* v-model的初始值是数组，那么收集的的就是value组成的数组
========================================================================
过滤器本质上就是一个函数，可以将某些数据例如时间转化为特定的样式
<!-- 过滤器实现（传参） 参数为格式化样式，不传也行 -->
<h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
<h3 :x="msg | mySlice">123456</h3>
//局部过滤器
// 本质就是一个函数
filters:{
// str形参默认值
timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
// console.log('@',value)
return dayjs(value).format(str)
}
}
//全局过滤器
Vue.filter('mySlice',function(value){
return value.slice(0,4)
})
=======================================================================
特点：
- 本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
- 使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
特点：
- v-once所在节点在初次动态渲染后，就视为静态内容了。
- 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
特点：
- 跳过其所在节点的编译过程。
- 可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。
自定义指令总结：
一、定义语法：
(1).局部指令：
new Vue({
directives:{指令名:配置对象} 或
directives{指令名:回调函数}
})
(2).全局指令：
Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)
TCP协议
- TCP 和 UDP 的区别？
- TCP 三次握手的过程？
- 为什么是三次而不是两次、四次？
- 三次握手过程中可以携带数据么？
- 说说 TCP 四次挥手的过程
- 为什么是四次挥手而不是三次？
- 半连接队列和 SYN Flood 攻击的关系
- 如何应对 SYN Flood 攻击？
- 介绍一下 TCP 报文头部的字段
- TCP 快速打开的原理(TFO)
- 说说TCP报文中时间戳的作用？
- TCP 的超时重传时间是如何计算的？
- TCP 的流量控制
- TCP 的拥塞控制
- 说说 Nagle 算法和延迟确认？
- 如何理解 TCP 的 keep-alive？
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
浏览器篇
- 浏览器缓存?
- 说一说浏览器的本地存储？各自优劣如何？
- 说一说从输入URL到页面呈现发生了什么？
- 谈谈你对重绘和回流的理解
- XSS攻击
- CSRF攻击
- HTTPS为什么让数据传输更安全？
- 实现事件的防抖和节流？
- 实现图片懒加载？
