weixin_42178670的博客

vue3中ref和reactive联系与区别以及如何选择

XSS（跨站脚本攻击）攻击和CSRF（跨站请求伪造）攻击解决方法

一、原理vue2采用数据劫持结合发布者-订阅者模式的方法，通过Object.defineProperty()来劫持各个属性的setter和getter，当数据发生变化时通知订阅者，触发相应的回调，渲染更新视图二、具体步骤1、对于需要observer的数据，通过递归遍历，给它的所有属性（包括子属性）添加上setter和getter，以便数据发生变更时触发setter。

因为vdom是一个单根树形结构描述当前视图结构，patch方法在遍历的时候从根节点开始遍历，它要求只有一个根节点。组件也是会转换成vdom，所以也必须满足单根节点要求。

挂载过程指的是app.mount()过程，这个是个初始化过程，挂载过程完成了最重要的两件事：初始化和建立更新机制。

不建议使用数组索引作为key的原因：1、在进行向数组中间插入或删除数据时，数组长度发生了变化，每个值对应的索引也会发生变化，在进行diff比对时会发现新老节点对应key的位置内容发生了变更，会从新进行渲染，造成不必要的性能损失，

vue实例在被创建之后都会经过一系列初始化步骤，如需要数据观测、模板编译、挂载实例到dom上，以及数据数据变化时更新dom，在这个过程中会运行生命周期钩子函数，以便用户在特定阶段进行响应的操作。

on在vue3中被移除，所以不建议使用eventbus。$listeners也被移除了。$children也被移除了。

在vue2中会出现不停的循环，然后每个循环结果做v-if，显然会先渲染出本不想渲染出来的内容，对于这种可以定义一个计算属性，使用filter返回符合条件的列表activeUsers；2、在vue2中v-for优先级高于v-if，而在vue3中v-for优先级低于v-if,vue2和vue3恰好相反，1、实践中最好不要把v-if和v-for放一起。

js通过冒泡排序对数组进行排序

== 和 ===

随机打乱数组内部元素的位置

二分法在有序排列的数组中找到指定元素并返回对应索引

交换变量的7种方法

typeof返回小写字母字符串表示数据属于什么类型，instanceof返回布尔值。Undefined、Null、Boolean、Number和String。typeof检测数据类型，instanceof检测对象之间的关联性。typeof是1个，instanceof是2个。typeof是简单数据类型、函数或者对象，

document.write()除非在文档解析完之后再执行会覆盖之前的内容，否则不会覆盖，innerHTML会直接覆盖原来内容。document.write()插入在执行该脚本元素的script标签位置，innerHTML插入在指定元素位置。document.write()是对象中的方法，innerHTML是element对象中的属性。document.write()可以多次调用，而innerHTML采用 += 拼接方式。4、是否会覆盖之前内容。

JS实现九九乘法表。

函数柯里化

该函数没有参数，用于获取元素位置，返回一个对象，具有六个属性分别是：ele.getBoundingClientRect().top – 返回元素上边到视窗上边的距离ele.getBoundingClientRect().left – 返回元素左边到视窗左边的距离ele.getBoundingClientRect().bottom – 返回元素下边到视窗上边的距离ele.getBoundingClientRect().right – 返回元素右边到视窗左边的距离。

clientX：鼠标相对于浏览器窗口可视区域x方向坐标clientY：鼠标相对于浏览器窗口可视区域y方向坐标。

3、touchend。

navigator.standalone属性，该属性值为false时，是从浏览器直接访问站点；参考来源https://www.cnblogs.com/benpao/p/3383272.html。3、iphone设备中safiar私有meta标签：指定safiar顶部状态栏的样式。2、iphone设备中的safair私有meta标签:允许全屏模式浏览。1、强制文档宽度和设备宽度比例为1:1禁止用户点击放大。7、检测ios用户通过主屏启动你的webapp。4、告知设备忽略将页面数字识别为电话号码。

ele.clientTop: 返回元素上边框大小ele.clientLeft: 返回元素左边框大小ele.clientWidth: 返回元素宽度，包括padding，不包括边框，返回值不带单位ele.clientHeight: 返回元素高度，包括padding，不包括边框，返回值不带单位。

通过userAgent属性，返回客户机发送给服务器的user-agent头部的值。

this指向

1、禁止鼠标右键菜单2、禁止鼠标选中文字3、e.clientX和e.clientY : 返回鼠标相对于浏览器的x坐标和y坐标，和页面是否滚动无关，仅与可视窗口大小有关4、e.pageX和e.pageY : 返回鼠标相对于文档页面的x坐标和y坐标，和页面实际宽高度即和是否滚动有关5、e.screenX和e.screenY : 返回鼠标相对于电脑屏幕的x坐标和y坐标。

使用addEventListener事件不需要加on，普通调用方式则需要加on1、load：等页面内容全部加载完成，包含dom元素、图片、flash、css等等才会调用2、DOMContentLoaded：等DOM加载完毕即可执行，不包含图片、flash、css等就可以执行，加载速度比load更快一点3、resize：调整窗口大小调用，只要像素发生变化即可执行4、setTimeout：定时器，延时单位是毫秒，可省略，省略默认延时为0。调用一次5、setTimeInterval：重复定时调用一个函数

基本类型：就是值类型，即变量所对用的内存区域存储的是值。引用类型：是地址类型，内存区域存储的是对应的地址，function，array， object基本类型按值访问，引用类型按引用访问。

5、e.preventDefault()阻止事件默认行为，如阻止点击a链接跳转，有兼容性问题；7、e.stopPropagation()阻止事件冒泡行为，针对IE6-8使用window.event.cancelBubble = true阻止冒泡。2、e.target --> 返回的是触发事件的对象（即我们点击的那个对象，点击谁返回谁）；3、e.target有兼容性问题，IE6-8不支持，IE6-8使用e.srcElement；1、e有兼容性，IE6-8使用的是window.event。

BFC的作用及对应示例

三栏布局实现的7种方法

call、bind、apply的作用与区别

jsonp如何实现跨域以及vue如何实现jsonp跨域；cors跨域，nginx跨域

通过闭包实现防抖节流防抖目的：用户触发时间过于频繁，只执行最后一次。节流目的：控制执行次数。

*4、第4次挥手：**主机A收到主机B发送过来的报文，确认主机B已做好释放准备，结束FIN-WAIT-2阶段，进入TIME-WAIT阶段，并向主机B发送ACK=1，seq=m+1，ack=p+1；**3、第三次握手：**主机A收到主机B发送的确认信息后检查ack是否正确，是否为x+1，以及位码ACK是否为1，若正确，主机A再向主机B发送ack=y+1（主机B的seq+1），ACK=1，此时主机A进入established状态。，所以第二三次握手的ack=x+1和ack=y+1，同时TCP标准规定。

前端实现一键复制功能

IOS处理方法感谢这位知乎大佬文章：https://zhuanlan.zhihu.com/p/443319104

表格的计算方式包括两种：固定表格布局和自动表格布局如果设置了border-collapse:separate; 需提前设置 table { border-spacing: 0; }，不设置的话会出现tr比table小4px（默认border-spacing: 2px;），如果设置border-collapse: collapse;则不需要设置border-spacing为了更好的对比，先量出样本内容宽度为117.73px（下面会用到这一串文字作为填充内容）如果table和td均设置了border之后

移动端通过设置rem使页面内容及字体大小自动调整

根据设备信息进行页面跳转至移动端页面或者PC端页面