- 博客(51)
- 收藏
- 关注
RSS订阅原创 VChart 组件基本使用
height: 250px" 是给整个盒子一个宽高 , :option="middleRightOption" 是这个图表的数据 , 直接定义middleRightOption即可 , ref="middleRightMain" 给这个图表的标识 .this.openLagDetail() //后续操作。这里用this.$refs获取dom元素, 再进行后面的点击事件操作.3.定义option , 配置项与echarts基本一致。如果全局引入,在main.js中操作。2.直接在页面使用组件。
2024-03-07 17:18:46
759
原创 gitee仓库使用中的警告
这个警告信息表示 Git 禁用了 SSL 证书验证。这通常是因为你的系统没有正确配置 SSL 证书或者 SSL 配置不正确导致的。禁用 SSL 证书验证可能会带来安全风险，因此不建议在生产环境中使用。命令并且不需要进行 SSL 验证，则可以忽略此警告。但请注意，在生产环境中禁用 SSL 验证会存在安全隐患。如果你只是在测试环境中使用。
2024-01-26 15:57:32
1894
1
原创 element-ui.common.js?5c96:2432 Uncaught TypeError: Cannot read properties of null (reading ‘setAttri
进入页面后正常,点击下一个页面就开始报错, 报错信息: element-ui.common.js?开发中遇到的问题：项目中的因为客户需求修改,不需要下拉框 , 隐形下拉内容后 , 下拉框点开之后再点击其他的空白处发现下拉框没有收起，查看控制台报上面的错误，然后发现项目中有个<把<el-dropdown>与<el-dropdown-menu>配套使用即可，问题即可解决。>组件没有跟<el-dropdown-menu>配套使用。<el-dropdown-menu>, 用div替换了。报错前 , 只隐藏了。
2023-12-14 10:03:53
514
原创 使用echarts如何实现双y轴且实现指定数据使用y轴呢?
在项目中经常使用echarts，我们经常会用到双y轴伸直多y轴去展示数据，默认所有数据都是使用左边y轴去展示数据的 , 我们需要自己去设置，具体使用某一个y轴去展示指定的某一个具体的数据。
2023-10-16 12:36:42
10270
原创 Echarts图表小数处理
获取到数据后，直接传值给echarts图的时候，会自动四舍五入保留整数进行显示，如果想如上进行显示，在echarts的。在项目中遇到echarts图，小数显示两位如何处理呢？获取数据后进行传参调用即可。
2023-09-06 15:24:17
2002
原创 如何使用本地mock数据
当后端同事接口数据还未完成，我们前端开发需要使用数据时，怎么办呢？这里可以自己本地mock数据先用着啦！2. 在index.js中导入，并放到mocks数组中展开即可；这里data应是对象，数组包含在rows中，以下截图未做更改。对新建js文件编写导出，返回数据根据接口文档编辑即可，例如。1. 创建一个 xxx.js文件，对外暴露一个数组；在mock/index.js文件中导入并展开。
2023-08-06 14:59:05
520
原创 watch和computed的区别
1. watch是监听一个值的变化，然后执行对应的回调；2. watch中的函数不需要调用；3. watch有两个参数；4. watch不支持缓存；5. immediate：组件加载立即触发回调函数执行，6. deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变7. watch中的函数名称必须要和data中的属性名一致，watch依赖于data中的属性，data中的属性发生变化的时候，watch中的函数就会发生变化。使用场景：搜索数据。
2023-07-25 19:46:07
257
原创 原型和原型链
也叫做js原型对象是一种对象属性，在Javascript中，每一个函数在创建的时候，系统都会给自动生成一个对象，这个的对象有一个属性，这个属性就是prototype。像一些常见的$router和$store 都是挂载到 vue 的原型上的。当我们访问一个对象中的成员的时候，会优先访问自己的，如果自己没有就访问原型的，如果原型也没有就会访问原型的原型，直到原型链的终点 null. 如果还没有，此时属性就会获取 undefined，方法就会报错 xxx is not a function。
2023-07-23 16:56:33
113
原创 什么是事件委托
事件代理的常用应用应该仅限于上述需求，如果把所有事件都用事件代理，可能会出现事件误判。即本不该被触发的事件被绑定上了事件。，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。1.可以大量节省内存占用，减少事件注册，提高性能。比如ul上代理所有li的click事件就很不错。2.可以实现当新增子对象时，无需再对其进行事件绑定，对于动态内容部分尤为合适。就是click，mouseover，mouseout等事件，的原理，把事件加到父级上，触发执行效果。
2023-07-23 15:41:50
118
原创 大文件上传如何做断点续传？
不管怎样简单的需求，在量级达到一定层次时，都会变得异常复杂文件上传简单，文件变大就复杂上传大文件时，以下几个变量会影响我们的用户体验上传时间会变长，高频次文件上传失败，失败后又需要重新上传等等为了解决上述问题，我们需要对大文件上传单独处理这里涉及到分片上传及断点续传两个概念。
2023-07-21 22:18:27
408
原创 浅拷贝和深拷贝
浅拷贝和深拷贝是针对引用类型，比如Array,Object，基本类型的值存储在栈中，当复制时，栈内存会开辟一个栈内存，所以两者不会受影响，引用数据类型：存储的是该对象在栈中的引用，真实的数据存放在堆内存中拷贝一层手写循环递归。
2023-07-19 23:12:01
83
原创 谈谈跨域？!
跨域是一个网页脚本访问另外一个网页的内容，如果这两个网页的协议、端口，域名有一个不同就会产生跨域问题，浏览器具有一个同源策略，是一个安全策略，为了避免被恶意修改数据或者操作dom。
2023-07-19 22:51:25
108
原创 完整梳理this指向,看完保证秒懂
this作为JS语言中的关键字，其复杂的指向往往是初学者混淆的地方，同时也是面试官经常询问的考点之一，理解好JS中的this指向，才能算是迈入了JS这门语言的门槛，本文将梳理出this指向的不同情景，以及如何更好、更准确的判断出this指向，让面试的时候不再为this指向头疼。This 被分为三种情况：全局对象、当前对象或者任意对象;判断处于哪种情况，完全取决于函数的调用方式从这句话可以看出，this调用的指向，其实取决于函数的调用方式，也就是在运行时，thisthis。这样就很容易理解this。
2023-07-18 22:53:39
124
原创 Vue自定义指令
在 Vue 中，自定义指令是通过调用方法或使用directive函数来创建的。自定义指令可以在 Vue 组件的模板中直接使用，并且可以绑定到元素、组件或模板的各种属性上。使用方法或directive函数来注册指令。这些方法接受两个参数：指令名称和指令配置对象。指令名称是一个字符串，用于在模板中绑定指令。指令配置对象包含一系列钩子函数和其他配置选项，用于定义指令的行为。指令配置对象中的钩子函数定义了指令的生命周期。常用的钩子函数包括bindmountedupdate和unbind。
2023-07-18 22:25:20
109
原创 Proxy与Object.defineProperty的对比
Object.definePropertyProxy拦截的是每一个对象，不需要递归就可以检测到对数据的访问和修改
2023-07-18 17:11:15
178
原创 JS实现数组扁平化的方法
二、正则实现也是先将数组转换成字符串的表达形式，这里将数组转成字符串我们使用JSON. stringify方法，将数组转换成一个由括号包裹、元素间以逗号相隔的字符串，例如：“[1,[2,[3,[4,5]]],6]”,从转换后的字符可以发现，每一对括号包着的范围就是一个层级，数组的展平就是将内部的层级全部消除，只保留最外层，在这里，就是将括号全部替换成空字符，得到一个元素以逗号相隔字符串，最后将利用JSON.parse方法解析成数组对象。
2023-07-18 16:34:42
126
原创 call、apply和bind的区别
千万不要小看了这个这个参数形式，有些情况下就只能用apply不能用call，比如使用Math.max去获取数组（这个数组有很多元素）的最大值时，若是用call，需要将数组的所有元素陈列出来，而使用apply直接写一个数组就可以。这也就解释了我们之前写的那篇原型中，子函数要想继承父函数需要在子函数中写{Father.call(this)}，这个this指向的是Son函数，那么就改变了Father的this指向，将其指向到Son函数中，也就实现了Son函数的实例调用Father的属性。2.call的用途。
2023-07-16 21:34:50
281
原创 微信小程序分包流程步骤
主要原因就是微信小程序规定了主包大小不能超过 2M ，但我们随着开发的更新迭代，一个小程序往往是大于 2M 的。于是小程序提供了分包的解决方法，将一个完整的的小程序，在打包时分成不同功能或需求的分包，在用户使用时再加载对应的分包。分包：从主包上拆分而来的文件，个人建议的的拆分方式：先根据 TabBar 页面拆分大的模块，再拆分每个 TabBar内具体的小功能模块，这样拆分管理起来也更加清晰明了。主包：使用分包后必须有一个主包，用于存放 TabBar 页面，以及一些公共的资源文件和JS脚本。
2023-07-16 17:43:59
1746
原创 选项式API与组合式API的区别
当使用Vue 3的组合式API时，相较于Vue 2的选项式API，可以更灵活地组织和复用代码逻辑，提高代码的可维护性和可测试性。组合式API还可以更好地解决Vue 2中存在的代码重复、逻辑分散等问题。
2023-07-16 15:41:34
1089
原创 一个页面从输入url到呈现过程
2.2 TCP作用 : 保证HTTP网络传输是 安全 + 可靠的 （检测客户端 与 服务器的网卡是不是通的）第二次: 服务器 -> 浏览器 (我听到了,你能听到我说话吗。检测浏服务器: 接收 + 发送)第一次: 浏览器 -> 服务器 (你能听到我说话吗?,检测浏览器:发送)第三次: 浏览器 -> 服务器 (嗯,我听到了. 检测浏览器: 接收)4.3 dom树 与 样式树 合并得到 渲染树。2.TCP三次握手： 建立安全的网络传输协议。4.1 解析html生成：dom树。4.2 解析css生成：样式树。
2023-07-15 23:02:11
73
原创 事件循环event loop
所有任务可以分成两种，一种是同步任务 (synchronous)，另一种是异步任务 (asynchronous)。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务。异步任务指的是，不进入主线程、而进入"任务队列”(task queue) 的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。以此反复直到清空所以宏任务，这种不断重复的执行机制，就叫做事件循环。异步模式下创建的异步任务分为宏任务与微任务两种。寻找下一个宏任务，重复步骤1。
2023-07-15 22:54:02
76
原创 key值的作用是什么
1.vue在渲染的时候,会 先把 新DOM 与 旧DOM 进行对比， 如果dom结构一致，则vue会复用旧的dom。重新渲染，因为在不使用 key 或者列表的 ndex 作为 key 的时候，每个元素对应的位置关系都是。而在使用唯一 key 的情况下，每个元素对应的位置关系就是 key ，来看一下使用唯一 key 值的情。index，直接导致我们插入的元素到后面的全部元素，对应的位置关系都发生了变更，所以全部都。比如染列表时，如果不写key，Vue 在比较的时候，就可能会导致频繁更新元素，使整个。
2023-07-15 22:44:16
214
原创 vue性能优化方案
然后在下一次渲染组件的时候，直接从缓存中拿取对应的dom和vnode,然后渲染，并不需要再次走组件初始化，render,patch的逻辑，所以会很快。9. data中的所以数据都会被劫持，所以将数据尽可能扁平化，如果数据只是用来渲染可以使用Object.freeze，可以将数据冻结起来，这样就不会增加getter和setter。8. v-if 当值为false时内部指令不会执行，具有阻断功能，很多情况下使用v-if替代v-show，合理使用if和show。18.抽离公共文件 splitChunks。
2023-07-14 22:20:36
115
原创 css尺寸单位px、em、rem、vh/vw的区别是什么？
如果HTML元素没有指定字体尺寸，那么以浏览器默认的字体尺寸为准例如，HTML元素设置了字体尺寸为 25px ，那么 2rem 就代表 50px.em是相对单位，相对于当前元素内文本的字体尺寸。如果当前元素没有指定字体尺寸，那么以浏览器默认的字体尺寸为准例如，当前元素设置了字体尺寸为 18px ，那么 2em 就代表 36px。vw 和 vh 是相对单位，相对于当前视口。vh是相对当前视口的高，vw是相对当前视口的宽。例如，20vw 代表当前视口宽度的 20%，30vh 代表当前视口高度的 30%
2023-07-14 21:09:51
406
原创 5分钟入门WebSocket
它是一种网络通信协议，属于应用层协议。它基于TCP传输协议，并复用HTTP的握手通道。是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket可以在浏览器里使用支持双向通信使用很简单。
2023-07-14 20:14:22
179
原创 什么是闭包?哪些场景运用了
一般函数的词法环境在函数返回后就被销毁，但是闭包会保存对创建时所在词法环境的引用，即便创建时所在的执行上下文被销毁，但创建时所在词法环境依然存在，以达到延长变量的生命周期的目的。一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）中，每当创建一个函数，闭包就会在函数创建的同时被创建出来，作为函数内部与外部连接起来的一座桥梁。还有防抖函数和节流函数中,都是最最经典的闭包!在页面上添加一些可以调整字号的按钮。
2023-07-13 23:10:05
87
原创 TS中interface和type 定义类型的区别
ts中定义对象类型常用的interface和type有什么区别呢?继承：interface 子 extends 父 ｛ 新增的属性名：类型 ｝继承：type 子 = 父 & ｛ 新增的属性名：类型 ｝1.用interface 接口名｛属性名:类型｝,2.type 类型别名 =｛属性名：类型｝这样使用起来就明白很多了.
2023-07-13 22:17:21
145
1
原创 组件之间的常见传值方式
父组件通过 provide 定义变量 ,子组件中通过 inject 调用变量，不管有几层子组件 都能通过 inject 来调用 provide 的数据 , 但是这个数据是不响应的。通过 v-model 双向数据绑定也可以实现组建之间的传值，v-model 是value 和 @input 事件的合写, 也能绑定到组件上。ref 引用可以作用在 h5 标签上，也可作用在组件标签上，作用在 h5 标签上是获取的是 DOM 对象， 作用在组件标签上，通过。对父组件进行操作，在父组件内可以直接通过。
2023-07-11 16:51:06
409
原创 防抖函数与节流函数有什么区别???
通过这种方式，防抖函数可以确保只有在最后一次触发事件后的延迟时间内没有再次触发事件时，才执行相应的操作。防抖函数的原理是在事件触发后，设置一个定时器，在指定的延迟时间内如果再次触发了该事件，就清除之前的定时器重新设置一个新的定时器。只有在延迟时间内没有再次触发事件时，才执行最后一次触发事件时的操作。如果在延迟时间内再次触发了事件，则重复步骤2和步骤3，清除之前的定时器并创建一个新的定时器。如果在延迟时间内没有再次触发事件，定时器触发并执行指定的操作。创建一个新的定时器，在指定的延迟时间后执行指定的操作。
2023-07-11 10:08:12
74
2
原创 $nextTick和$set的具体应用场景
操作 DOM 元素： 在 Vue 中，当你修改了组件的数据后，DOM 并不会立即更新，而是在下一个事件循环中才会进行更新。如果你希望在 DOM 更新完成后对修改后的 DOM 元素进行一些操作（如获取元素的尺寸、操作元素的样式等），可以使用。异步更新 UI： 在某些情况下，当需要在数据更新后执行一些操作，并确保这些操作在下一个事件循环中执行，以避免阻塞主线程。，你可以确保在数据更新后的下一个事件循环中执行代码，从而获得准确的 DOM 尺寸或在正确的时间点更新 UI。来确保在 DOM 更新完成后执行操作。
2023-07-10 17:35:29
264
1
原创 如何统计字符出现的频率？
方法来统计字符出现的频率。中，如果存在，则将对应的计数加 1；如果不存在，则将字符作为键添加到对象中，并设置计数为 1。最后，返回累加器对象。运行上述代码，你将会得到一个对象，该对象记录了每个字符在字符串中出现的频率。在输出结果中，键表示字符，值表示对应字符出现的频率。在每次迭代中，我们检查当前字符是否已经存在于累加器对象。方法将输入的字符串转换为一个字符数组。方法对字符数组进行迭代。出现了 2 次，而其他字符只出现了 1 次。在这个函数中，我们首先使用。出现了 3 次，字符。
2023-07-10 02:45:00
412
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人