- 博客(165)
- 收藏
- 关注
RSS订阅
转载 Vue源码学习（零）：内部原理解析
原文地址：https://www.cnblogs.com/zs-note/p/8675755.html本篇文章是在阅读《剖析 Vue.js 内部运行机制》小册子后总结所得，想要了解详细内容，请参考原文：https://juejin.im/book/5a36661851882538e2259c0f阅读源码前想要先了解Vue的内部机制和运行原理，帮助更快更有针对性的阅读源码 所以就找到了上面的小册子，小册子里主要是简化版的源码 这篇文章更主要是对小册子消化后的个人笔记和总结，大部分内容是使用流.
2020-07-03 18:41:25
275
原创 VUE watch与computed异同
在vue的项目中，我们时常会需要对data的改变做出处理，这时候就需要用到watch和computed这两个属性，既然都是数值改变触发改变的属性，他们之间又有什么异同呢？笔者将在接下来进行解析computed:计算属性通过属性计算而得来的属性1. get用法data: { firstName: 'Liu', lastName: 'lu'},computed: { fullName: function () { return this.firstName + '.
2020-07-03 18:09:38
837
原创 echarts 柱状图加圆角
function stackingBar() { var itemStyle = { //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多 emphasis: { barBorderRadius: 30 }, normal: ...
2018-11-26 15:42:38
7295
原创 js toFixed()方法的坑
最近发现JS当中toFixed()方法存在一些问题，采用原生的Number对象的原型对象上的toFixed()方法时，规则并不是所谓的“四舍五入”或者是“四舍六入五成双”，以谷歌浏览器为例:alert(1.5451.toFixed(2));//输出 1.55alert(1.545.toFixed(2)); //输出 1.54alert(1.5551.toFixed(2)); //输出 1....
2023-08-28 16:53:47
336
原创 qiankun切换子应用样式会有短暂错乱的问题
再次加载，css和js文件有缓存，直接返回304状态码，不会触发onload事件，js和css同时加载执行，js可能在css之前加载完，导致没有样式，出现短暂的结构错乱问题。第一次加载，js文件有defer属性，js文件先下载，等页面onload后执行js文件，css文件在js文件之前执行。解决办法就是将css打包到js中，这样能保证css先执行，不用单独打包出css文件。代码配置，在vue.config.js中，加上配置, 将css打包进js中。qiankun子应用。
2023-06-08 14:04:05
510
原创 element-plus中el-popover边界会超出页面，显示滚动条
解决办法：获取到弹窗数据后添加el-popover数据后触发el-popover的update方法，在nextTick中触发不生效，所以在setTimeout里边执行update方法。边界的el-popover 会溢出viewport，出现滚动条的问题。vue3+element-plus的解决方法。vue2+elementui解决办法。
2023-05-10 11:20:22
2288
1
原创 【无标题】
进程与线程进程：每个进程都有独立的代码和数据空间（进程上下文），进程间的切换会有较大的开销，一 个进程包含1--n个线程。（进程是资源分配的最小单位）线程：同一类线程共享代码和数据空间，每个线程有独立的运行栈和程序计数器(PC)，线程切换 开销小。（线程是cpu调度的最小单位）进程与线程的区别： （1）调度：线程作为调度和分配的基本单位，进程作为拥有资源的基本单位 （2）并发性：不仅进程之间可以并发执行，同一个进程的多个线程之...
2023-05-10 11:10:58
94
原创 【无标题】
promise function myPromise(constructor) { let self = this; self.status = "pending" 定义状态改变前的初始状态 self.value = undefined; 定义状态为resolved的时候的状态 self.reason = undefine......
2023-05-10 11:10:40
430
原创 letcode
输入：intervals = [[1,3],[2,6],[8,10],[15,18]]解释：区间 [1,3] 和 [2,6] 重叠, 将它们合并为 [1,6].输出：[[1,6],[8,10],[15,18]]
2023-05-10 11:10:30
45
原创 tinymce无法预览视频问题结局
tinymce中默认视频无法预览，一个特丑的框，默认是img标签解决办法，将plugins中的media标签去掉即可
2023-05-10 11:10:01
307
1
原创 前端错误监控
本地找到代码行，git blame -L <range> <file> git blame -L 10,100 .env.hecs 找到commit记录，责任到人，处理问题。devtool：‘nosource-source-map’ 只会将代码定位到多少行，不会跳转源码。定位问题版本，window暴露package.json version字段 打印出代码版本/分支名称/编译时间/git-revision-webpack-plugin插件获取git版本，分支，commit信息。
2023-05-10 11:09:35
54
原创 vue问题
一、路由hash模式（location.hash + hashchange 事件）hash 模式的实现方式就是通过监听 URL 中的 hash 部分的变化，触发haschange事件，页面做出不同的响应。但是 hash 模式下，URL 中会带有 #，不太美观。history模式：在会话历史中向前或者向后移动指定页数：在会话历史中向前移动一页，跟浏览器的前进按钮功能相同：在会话历史记录中向后移动一页，跟浏览器的后腿按钮功能相同。
2023-05-10 11:09:25
643
原创 项目问题~
count = 0;//a标签下载console.timeEnd("并发下载1");// fileServer.js保存FileSaver.saveAs(blob , '文件名')});前端多线程大文件下载实践，提速10倍(拿捏百度云盘)-阿里云开发者社区。
2023-05-10 11:09:08
748
原创 elementui el-popconfirm @onConfirm 不生效
el-popconfirm 点击确定不触发 父组件绑定的事件有说confirm 改成 onConfirm, 也有说 onConfirm 改成 confirm的，试了都不行 找到源码发现子组件$emit 传递的是onConfirm 和 onCancel //elementui.min.js 源码 methods: { confirm: function () { this...
2022-04-27 11:15:03
2114
原创 element el-cascader 回显 删除选项不是当前点击的
el-cascader回显开启多选,开启tag 导致的删除出现错误具体配置开启多选 开启tag 开启可删除 开启只显示末级错误描述当我根据后台数据回显后, 点击删除A 其实删除的确实B解决方法由于顺序错误的问题导致的, 回显顺序和数据源顺序不一样，点击删除第一个会出现删除的是最后一个el-cascader 显示的顺序是根据下拉列表的顺序展示的，并不是后台返回的顺序分析： el-cascader 的tag 是按照index排序的 ，没有绑定id，所以删除是根...
2022-03-11 10:59:04
1843
2
原创 前端面试题
一、斐波那契数列function febi(n) { return n === 0 || n === 1 ? 1 : febi(n - 1) + this.febi(n - 2)}//进阶版本，做缓存var cache = {}function febi(n) { if (cache.hasOwnProperty(n)) { return cache[n] } let v = n === 0 || n === 1 ? 1 :.
2022-03-10 16:55:35
130
原创 基于elementui的大文件断点续传
一、前端大文件上传文件的痛点1、文件过大会导致带宽资源紧张，请求速度下降 ；2、如果上传过程中服务中断、网络中断 、页面崩溃，可能会导致文件重新开始上传。二、痛点的分析前端选择文件后上传，后端在处理文件过程中，首先会将文件加载到运行内存中，之后再调用相应的API进行写入硬盘内存的操作，完成整个文件的上传。但这样直接上传文件，可能会因为某个环节出了问题导致整个流程的雪崩，所以大文件直接上传是不可取的。解决问题最好办法是分片断点续传，该方式主要是针对大文件（比如100M以上的文件）。三
2022-03-09 14:25:02
1528
1
原创 video 标签有缓存，跳转了新页面继续按空格视频还会继续播放，会有声音
尝试了多种1.跳转页面前移除video标签，不生效2.页面跳转后刷新页面，很Low，页面会重新载入 beforeRouteEnter(to, from, next) { next(() => { if (from.name === 'livePage') window.location.reload() }) }3.成功办法，就是跳转前将video的src置空beforeRouteLeave(to, from, n
2021-11-18 18:00:44
1143
原创 vue + ckplayer 直播播放m3u8文件，退出页面也会一直请求文件，还会有直播声音
退出直播页面也会一直请求这个比较难处理，因为一旦请求成功，就会一直推送直播流，没办法断开，只有刷新页面最简单的方法就是beforeRouteEnter 判断如果是直播页面跳转的就重新刷新下页面，就会断开需要写一个全局的方法，应用vue的mixin方法注册全局方法弊端就是接口还未成功就会被取消，由于只涉及到从直播页面跳转的，这个刷新频率比较低，影响不大...
2021-09-16 15:57:53
1442
原创 echarts 立体柱状图
initChart() { this.chart = echarts.init(document.querySelector('.visit-ranking #echarts')); let option = { grid: { left: '3%', right: '4%', bottom: '3%', top: '4%', containLabel: true...
2021-09-13 15:25:39
1374
1
原创 柱状图添加左右边界
xAxis: { type: 'category', //boundaryGap: false, 注释 data: ['院系名称', '院系名称', '院系名称', '院系名称', '院系名称'], axisLabel: { textStyle: { color: 'rgba(255, 255, 255, 0.65)' } ...
2021-09-10 17:32:46
138
原创 echarts 折线图下方区域渐变色
series: [ { name: '教师', type: 'line', stack: '总量', data: [120, 132, 101, 134, 90, 230, 210], areaStyle: { normal: { color: new echarts.graphic.LinearGrad...
2021-09-09 19:05:40
2166
原创 解决Module build failed: Error: no such file or directory, scandir ‘...node_modules\node-sass\vendor‘
使用npm启动vue项目时出现以下错误：at Object.readdirSync (fs.js:785:3) at Object.getInstalledBinaries (D:\project\xxx\node_modules\node-sass\lib\extensions.js:130:13) at foundBinariesList (D:\project\xxx\node_modules\node-sass\lib\errors.js:20:15) at foundB...
2021-09-07 09:47:12
674
原创 axios的onUploadProgress + el-progress 实现上传文件进度条
<el-progress v-show="drawer.showProgress" :text-inside="true" :stroke-width="18" :percentage="drawer.progress"></el-progress> const config = { onUploadProgress: (progress) => { // 格式化成百分数 _this.drawer.progress = .
2021-08-25 17:46:08
479
原创 js复制内容
copyCopyUrl() { //复制分享链接 let input = document.createElement('input') input.value = this.copyUrl document.body.appendChild(input); input.select(); // 选择对象 document.execCommand("Copy"); this.$successMsg('复制成功')},...
2021-08-13 17:22:25
87
原创 前端如何进行 AES 加密 / 解密
信息安全一直是大家关注点比较高问题, 信息泄露, 请求篡改, 报文拦截等层出不穷.如何才能让请求 和 返回的数据更加安全?今天介绍其中一种 加密 / 解密 的方法 使用插件Crypto.JS ( AES )需求是：websocket聊天信息加密keys：前后端共同制定的公钥params: 加密字段第一步: 安装npm install --save_dev crypto-js第二步: 全局引用// 导入 crypto-js 包 import cryptoJS from
2021-08-12 11:03:13
1326
原创 websock + vue +webpack配置
webpackthis.webSocket = new WebSocket(`wss://${location.host}/websocket/${this.resourceId}/${this.name}`); this.webSocket.onopen = function () { console.log('open') }; this.webSocket.onerror = function () { console.l.
2021-08-05 16:24:30
177
原创 vue 动态绑定文件地址 :src=“logo“ 不生效，针对需要计算的文件地址
<imgv-if="logo":src="logo"class="sidebar-logo">logo:require('../../../assets/portal/logo.png') 使用require即可
2021-08-05 16:20:02
274
转载 git push失败，报错fatal: does not appear to a git repository Could not read from remote repository
https://blog.csdn.net/python_neophyte/article/details/83381936
2021-07-30 11:22:50
906
原创 前端实现复制功能
let input = document.createElement('input') input.value = this.copyUrl document.body.appendChild(input); input.select(); // 选择对象 document.execCommand("Copy");
2021-07-01 11:18:54
118
原创 app给h5传递数据
方法一：app可以把参数传到h5的链接里，用类似?xx=xx&xx=xx的形式拼接，js解析参数即可。方法二：情况一：app调用h5原生app都可以对js的function进行触发，前端要做的只是将js定义好方法名和参数，交给app人员即可，app将数据通过参数传入情况二：h5调用app当H5页面加载时，就可以通过javascript去调用app自定义的方法（和调用js函数相似），执行成功后，app会进行callback回调把数据返回给H5，也就是函数的返回值...
2021-06-16 18:00:54
1302
原创 H5 内嵌app，添加调试工具
在页面中加入此段代码，即可调用VConsole<script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.3.4/vconsole.min.js"></script><script type="text/javascript"> var vConsole = new VConsole();</script>
2021-06-16 17:55:23
324
原创 正则表达式(/＜img[^＞]*?(src=“[^“]*?“)[^＞]*?＞/g这一句话怎么解释
（1）/正则表达式内容/这里的/是正则分隔符，不同语言有不同的定义，js里只能用/，如果正则表达式内容本身需要用到/，则需要转义，如：/<\/div>/（2）/g这里的g是模式修饰符，表示全局匹配，也就是正则表达式内容能匹配多次的情况下，会得到多个匹配结果。常用的模式修饰符有：i不区分大小写m多行模式，^匹配行开头，$匹配行结尾s单行模式，.能匹配所有字符，^匹配整个文本开头，$匹配整个文本结尾模式修饰符在不冲突的情况下可以同时...
2021-06-07 14:59:34
1152
原创 vue 面试题（基于源码讲解）
一、父组件监听子组件生命周期1、使用on和on和emit子组件emit触发一个事件，父组件emit触发一个事件，父组件on监听相应事件。// Parent.vue<Child @mounted="doSomething"/> // Child.vuemounted() { this.$emit("mounted");}2、hook钩子函数使用vue hook生命周期钩子函数。// Parent.vue<Child @hook:mounte
2020-07-06 15:08:52
706
原创 package-lock.json的作用
npm 5.0版本之后，npm install后都会有一个package-lock.json,作用是什么？1、锁定安装时的包的版本号，需要上传到git，保证大家的依赖包一致。2、package-lock.json是在 `npm install`时候生成一份文件，用来记录当前状态下实际安装的各个npm package的具体来源和版本号。3、它有什么用呢？因为npm是一个用于管理package之间依赖关系的管理器，它允许开发者在pacakge.json中间标出自己项目对npm各库包的依赖。你可以选.
2020-07-03 16:11:48
10585
1
原创 解决vue项目在IE中请求缓存的问题
IE中如果本次请求和上次请求一样，会优先使用缓存我碰到的问题是，我删除了某列的数据，需要重新刷新列表，但是删除成功以后重新请求IE优先使用了缓存解决方法就是在每个url上添加一个随机数，使得每次请求不一样，就不存在缓存问题了PS：垃圾IE...
2020-07-01 14:31:05
1074
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人