南城旧时-CSDN博客

原创 # Vue中的Mixin混入

混入 (mixin) 混入 (mixin) 将组件的公共逻辑或者配置提取出来，哪个组件需要用到时，直接将提取的这部分混入到组件内部即可。这样既可以减少代码冗余度，也可以让后期维护起来更加容易。这里需要注意的是：提取的是逻辑或配置，而不是HTML代码和CSS代码。其实大家也可以换一种想法，mixin就是组件中的组件，Vue组件化让我们的代码复用性更高，那么组件与组件之间还有重复部分，我们使用Mixin在抽离一遍。// 这里就是将组件second和third中的公共的逻辑再抽离出来放到mixin中去。

2023-02-03 11:44:45 446

原创一文讲清同步异步,消息队列,宏任务微任务...

进程：是cpu分配资源的最小单位；（是能拥有资源和独立运行的最小单位）是cpu调度的最小单位；（线程是建立在进程的基础上的一次程序运行单位，一个进程中可以有多个线程）比喻:进程就是一个公司，每个公司都有自己的资源可以调度；公司之间是相互独立的；而线程就是公司中的每个员工(你，我，他)，多个员工一起合作，完成任务，公司可以有一名员工或多个，员工之间共享公司的空间比喻:1万块儿砖搬上10楼,整栋楼就是进程。一个电梯运就是单线程,多个电梯一起运就是多线程.

2023-01-31 19:59:22 998

转载数组去重的方法

或许您会觉得这不可读，这就是有意思的地方了，这是一个工具类方法，注定被藏在utils中的一个方法，他无关业务逻辑，并不需要有太大可读性。他和数组的区别在于，Set类型中的数据不可以有重复的值。去除对象数组的方式他并不是很稳定，这不像我们去重值类型数据的数组，上面的五种方法随便复制一种，往里面一调用就好了。，根据上方的截图中的代码。这个方法是我日常开发中最喜欢用的方法，因为，他的使用方法是所有去重中最简单的。在很早以前，还没有Set，没有map，filter的时候，双重for循环几乎是去重的唯一方式。

2023-01-31 10:51:41 295

原创伪数组转成真数组的方法

我们需要确认将要解构赋值的这个数据结构是“可遍历的（iterable）”，或者说这个数据结构需要部署有Iterator接口。我们需要确认将要解构赋值的这个数据结构是“可遍历的（iterable）”，或者说这个数据结构需要部署有Iterator接口。里面的this就是能实现伪数组转换成真数组的关键，通过call()方法将里面的this绑定到伪数组对象上，再通过循环将伪数组的每一项push进一个真数组再返回这个真数组。第三种也是通过调用Array的slice的截取方法，后面有第二种和第三种的区别分析。

2023-01-30 23:06:08 344

原创什么是变量提升和函数提升？

值：undefined；

2023-01-29 23:03:50 1008

原创 URL到页面加载显示完成过程到底发生了啥？

web server 担任管控的角色，对于不同用户发送的请求，会结合配置文件，把不同请求委托给服务器上处理对应请求的程序进行处理（例如CGI脚本，JSP脚本，servlets，ASP脚本，服务器端JavaScript，或者一些其它的服务器端技术等），然后返回后台程序处理产生的结果作为响应。六、绘制页面浏览器通过上面步骤计算得到渲染树，是DOM树的可视化表示，构建渲染树使页面以正确的顺序绘制出来，遵循一定的渲染规则，经过一系列的渲染工作，实现网站页面的绘制，由此最终完成了页面展示。

2023-01-28 21:53:30 130

原创如何判断JavaScript的数据类型？

Object.prototype.toString 的原理是当调用的时候, 就取值内部的 [[Class]] 属性值, 然后拼接成 '[object ’ + [[Class]] + ‘]’ 这样的字符串并返回. 然后我们使用 call 方法来获取任何值的数据类型.sort, slice 等等的特有的数组(或者其他数据类型)方法或属性, 万一对象中也有 sort, slice 属性, 就会发生误判. 所以最靠谱的方法是使用 Object.prototype.toString 方法.

2023-01-27 16:49:00 51

原创 vue2中如何自定义指令

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。：指令所在组件的 VNode 及其子 VNode 全部更新后调用。unbind：只调用一次，指令与元素解绑时调用。

2023-01-26 23:21:54 2516

原创什么是构造函数？构造函数与普通函数的区别？

典型的面向对象编程语言（比如 Java 和 Python），都有“类”（class）这个概念。所谓“类”就是对象的模板，对象就是“类”的实例。但是，JavaScript 语言的对象体系，不是基于“类”的，而是基于构造函数（constructor）和原型链（prototype）。因此构造函数就是专门用来生成对象实例的函数(模板),或者说批量来创建类似的对象。

2023-01-24 23:05:47 566

原创节流和防抖傻傻分不清楚?

函数防抖和函数节流都是防止某一时间频繁触发，但是这两兄弟之间的原理却不一样。而函数节流是间隔时间按规定流速执行执行。函数防抖是某一段时间内只执行一次，速度太快递不执行。

2023-01-23 21:32:51 137

原创 if 多分支和switch的区别

(常用于区间判断,),if语句枚举(常用于等值判断,处理case为比较**确定值**的情况),switch语句分支比较多且无法穷尽时最好用 if, 其它情况可以按照个人习惯如果数据量不是很大, 并且数据是固定的可以用Switch,理论上switch语句执行效率高，而且结构更清晰。

2023-01-21 21:41:44 683

原创 var 和let和const的各自特点及区别

一旦声明，常量的值就不能改变，但对于对象和数据这种引用类型，内存地址不能修改，可以修改里面的值。var可以先赋值再定义,let不能先赋值在定义,必须先定义再赋值,不然会报错说没有初始化。let和const不存在变量提升，即它们所声明的变量一定要在声明后使用，否则报错。var声明的变量存在变量提升，即变量可以在声明之前调用，值为undefined。2.变量提升:var可以先使用后申明,不报错(不符合逻辑)let和const在同一作用域不允许重复声明变量。2.let不能先赋值在定义,必须先定义再赋值。

2023-01-20 22:28:57 86

原创 vue三种插槽,小白秒懂系列

插槽作用: 父组件传递结构给子组件插槽使用的2个步骤第一步: 在子组件中定义一个插槽默认值:如果父组件没有传递则默认显示第二步: 在父组件中传递结构:父组件需要传递的结构

2023-01-19 23:14:01 83

原创通俗讲跨域

其实是通过script标签的特性（无跨域限制）来实现跨域的，也需要服务器端配合，且只能用get方法, 有安全隐患，不推荐。场景：当你请求的接口地址和现在前端文件服务所在的域（请求的协议，ip和端口）不同的时候，就会报错，如下图。跨域问题的产生其实是浏览器的同源策略造成的，同源策略是浏览器的保护机制，只允许网页请求同一域名下的服务。浏览器是否启用跨域保护机制根据后端配置来响应的，所以服务器端需要做一个允许跨域的配置即可。同源策略的要求是3同：协议，域名和端口都要保持一致。跨域的全称是跨域资源共享。

2023-01-12 20:20:51 66

原创一道JavaScript相关的题目

【代码】一道JavaScript相关的题目。

2023-01-03 23:07:16 92

原创 excel时间处理函数

但是我们需要把它转化为 2022/12/31 这种格式的话该怎么做呢，这时候我们就需要用到这个方法了。一般我们从excel中得到的数据中的时间一般是数字，因为excel表格内部做了转换。我们只需要调用这个方法，就可以将日期转化为我们想要的格式.2022/12/31。如果想要转换为更多的格式还可以再使用。

2023-01-02 21:57:32 212

原创前端面试必会网络之跨域问题解决

浏览器有一个重要的安全策略，称之为「同源策略」其中，源=协议+主机+端口源=协议+主机+端口，两个源相同，称之为同源，两个源不同，称之为跨源或跨域同源策略是指，若页面的源和页面运行过程中加载的源不一致时，出于安全考虑，浏览器会对跨域的资源访问进行一些限制。

2022-12-22 23:30:11 197

原创数组方法小练习

数组方法小练习。forEach,push,filter,Object

2022-12-21 21:03:48 61

原创数组扁平化方法

首先要知道什么是数组扁平化。数组扁平化就是指将一个。

2022-12-19 22:27:46 177

原创 Vue中vc和vm的区别

如上图我们项目中的.vue文件内的this，指向的就是VueComponent构造函数的实例化对象（即vc实例），我们可以通过this（即vc对象）的——proto——属性，找到它的VueComponent构造函数的原型对象（prototyope），即vm对象。又可以通过vm对象的——proto——属性，找到它的Vue构造函数的原型对象（prototyope）。直到找到JavaScript顶级的对象（Object构造函数的原型对象），没有就到了尽头null。vc对象的原型就是vm对象。

2022-12-17 22:58:04 1366

原创 Vue生命周期钩子介绍

vue生命周期钩子官方文档：官方文档图解介绍：生命周期图示官方文档详细介绍：vue生命周期钩子介绍vue生命周期钩子介绍： vue从创建到销毁过程中，会执行的一些回调函数：一种回调函数例如window.onload = function(){ dom加载完毕，外部资源加载完毕就执行 } ： vue实例从出生到扑街的过程出生：创建vue实例创建data数据创建el挂载点将data数据渲染到el挂载点扑街vue实例被销毁这里销毁不是指vue实例变成了null，也不是删除dom,而是vue不工作了,指解除d

2022-12-07 23:30:00 91

原创 key值得作用

一，key值得作用是得dom对象添加唯一标识，是用于底层diff算法复用旧虚拟dom时的一个重要的判断条件，间接提高页面的渲染效率。当数据变化的时候,Vùe是不会直接去更新D0M(也就是说不是将旧的元素移除然后在同一位置添加一个新元素),而是尽可能考虑复用元素(修补不同的地方). 复用元素时是使用diff算法对比新旧虚拟Dom。把key值作为判断依据,如果遇到相同的key值，则考虑复用元素。如果遇到不同的key值则强制更新。二，为什么key值一般设置为id，而不是数组的下标原因是，若用数组的索引（下标

2022-12-07 22:55:28 639

原创 CSS单位中px、en和rer的区别？

1、 px像素（ Pixel）。绝对单位。像素px是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，是计算机系统的数字化图像长度单位2、 em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小因此并不是一个固定的值3、 rem是CSS3新增的一个相对单位（ rootem，根em），使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素4、区别：IE

2022-12-06 23:30:00 574

原创 function函数和箭头函数区别

1.箭头函数与function定义函数的写法不同2.this的指向不同:使用function定义的函数，this的指向随着调用环境的变化而变化的，而箭头函数中的this指向是固定不变的，一直指向的是定义函数的环境。3.普通函数可以使用arguments参数和args参数，箭头函数不能使用arguments参数，可以使用args参数4.普通函数可以作为构造函数，箭头函数不可以作为构造函数，不能new5.普通函数可以先调用后声明,因为有变量提升,但是箭头函数必须先声明后调用

2022-12-04 23:08:06 161

原创 CSS中哪些属性可继承，哪些不可以？

4.表格布局属性：caption-side（标题位置）、border-collapse（设置边框分离还是合并）、border-spacing（边框分离状态下设置边框间距）、empty-cells（定义如何渲染无可视内容的单元格边框和背景）、table-layout（定义用于布局单元格行和列的算法）;5.定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、maxwidth、max-height、overflow、clip;

2022-12-01 22:47:58 6239

原创 v-show与v-if区别

虽然都有相似的效果,能够实现根据条件来构建页面.但底层原理是不一样的. 原理: v-if本质其实是动态地进行元素的dom新增与移除,根据条件来append child和remove. v-show本质是在动态控制元素的 display样式,根据条件来设置display样式为block和none;因为v-if在频繁切换会大量的创建和删除元素, 消耗性能。初始渲染: v-if性能高（因为v-if 是惰性的, 如果初始值为 false, 那么这些元素就直接不创建到dom树上, 这样就可以节省一些初始渲染开销。

2022-11-30 23:05:54 89

空空如也

空空如也