- 博客(26)
- 收藏
- 关注
原创 React基础学习
基础知识生命周期ReactVue3componentDidMount()onMountedshouldComponentUpdate()onBeforeUpdatecomponentDidUpdate()onUpdatedcomponentWillUnmount()onBeforeUnmountComponentReact 组件的基类PureComponent注意React.PureComponent 中的 shouldComponent
2022-09-27 22:12:48 423 1
原创 在keep-alive的页面,Deactivated状态下依然会触发watch操作(vue3)
前言通常有一些全局的变量,每个页面都有监听,但是我们只希望在当前页面执行监听就好处理//记录所有的watch const watchList = []; function initWatch() { let aWatch = watch( () => store.state.a, (newV) => { console.log('watch active') }, { deep: true,
2022-05-13 16:48:29 1535
原创 webpack编译优化-(lodash、echarts、element-plus、vxe-table等)vue3版本
webpack编译优化-(lodash、echarts、element-plus、vxe-table等)vue3版本
2022-04-24 09:08:14 1549 2
原创 日常见到的一些js轮子
FileSaver.js主要文件下载原理还是通过 a 标签来进行的主要区分了跨域、不跨域跨域的话,直接 a 标签点击不跨域的话,手动请求返回,生成由blob转化的url,然后再点击与传统的直接 a标签点击 下载,多了一步转化为blob转化过程,可以避免浏览器闪动,或者特殊格式(例如json),浏览器直接打开现象的发生。新知识URL.revokeObjectURL创建经常有,释放往往会被忽略。URL.revokeObjectURL 释放由 URL.createObjectURL()创
2022-02-15 15:38:21 435
原创 音视频相关的知识点
示例:JS 播放视频流时调整 色度, 饱和度,亮度,对比度知识:视频流媒体播放的一些知识示例:在H5中使用video结合canvas来录制视频和上传video正常情况下加载视频,都是使用标签,那么对于一些需要用户自己播放的视频,最好指定标签的preload属性,“preload=none”,这样浏览器就不会预加载任何视频数据。[译] 网速敏感的视频延迟加载方案视频使用时比较 “坑” 的地方其中,有一种情况是,我们发现视频标签在浏览器页面时,它只会显示音频,但是却无法播放视频,这种情况下可能就是
2022-02-12 09:00:00 675
原创 JavaScript - V8
v8V8是一个由Google开发的开源JavaScript引擎,目前主要是用在Chrome浏览器 和 Node.js中。JIT执行高级语言一般是采用以下两种方式执行:解释执行,将源代码通过编译器编译成中间代码(如汇编代码),之后直接使用解释器解释执行中间代码。编译执行,将源代码通过编译器编译成中间代码,再有中间代码编译成机器代码(二进制),直接执行二进制代码。V8使用的是 混合编译执行和解释执行两种手段,这种技术称为JIT。解释执行,启动速度快,执行速度慢;编译执行,启动速度慢,执行
2022-02-10 20:00:00 798
原创 记一次懵逼修复
前言最近,通过webpack本地代理请求后端接口,数据量一多起来,不是尾部被截取,就是中间数据缺失,导致很多依赖异步数据的页面请求不出来。解决将 node版本从8.9,升级到到了16原因推测刚开始怀疑是不是node内存不足,敲一下命令看一下,还是有空间的。而且,真的不足,应该也会报错。>node> process.memoryUsage(){ rss: 27475968, heapTotal: 7708672, heapUsed: 4876592, external:
2022-01-04 21:57:27 214
原创 js-随记
array.filter 不会修改原数组填充一个长度为10,元素为a的数组方法一:Array.from({length:10}, (item)=>'a') 方法二:new Array(10).fill("a")
2021-12-28 19:19:48 294
原创 elementUI源码学习
源码目录package.jsonasync-validatorvalidate form asynchronous表单异步效验的库//实例import Schema from 'async-validator';const descriptor = { name(rule, value, callback, source, options) { const errors = []; if (!/^[a-z0-9]+$/.test(value)) { err
2021-12-08 22:13:12 1779
原创 微前端-qiankun小知识点(杂)
前言本文记录一下学习qiankun过程中,学习到的一些小知识点。packagejest测试框架官网dumiDocumentation Generator of React Componentfather-buildLibrary toolkit based on rollup and babel.Features✔︎ 基于 docz 的文档功能✔︎ 基于 rollup 和 babel 的组件打包功能✔︎ 支持 TypeScript✔︎ 支持 cjs、esm 和 umd
2021-12-01 17:11:44 582
原创 vuex源码-初探
源码Exports首先查看一下源码输出:exportsvar index = { Store: Store, install: install, version: '3.1.0', mapState: mapState, mapMutations: mapMutations, mapGetters: mapGetters, mapActions: mapActions, createNamespacedHelpers: createNamespacedHelpers
2021-11-19 20:36:08 651
原创 微前端-qiankun初探索
前言这边主要是以vue3为主应用,引入vue2作为子应用,先进行初次尝试。搭建初始化主项目这边主要以 vue3 为 主项目 进行构建初始化#这边选择vue3进行初始化vue create main cd mainyarn add vue-loader-v16 vue-router@4 --save当前 目录 结构在src下面新建 router/index.js文件import { createRouter, createWebHashHistory} from
2021-11-17 17:25:44 376
原创 Webpack优化 - 图片
图片压缩jpegtran不同窗口大小,显示不同大小,选中不同大小的图片html img[srcset]img元素srcset属性含义及作用在学习如何做网站时,网站中会有图片,图片使用HTML img 图片标签,img元素中有一个很少用的属于-srcset属性。img 元素的 srcset 属性用于浏览器根据宽、高和像素密度来加载相应的图片资源。属性格式:图片地址 宽度描述w 像素密度描述x,多个资源之间用逗号分隔。例如:<imgsrc="small.jpg...
2021-11-11 17:51:22 1201 1
原创 Webpack优化 - echarts和elementUI
前言开发小哥哥说,现在启动好慢呀;测试小姐姐也说,打包太慢了,要一分半呢。分析使用webpack-bundle-analyzer分析打包文件安装一下webpack-bundle-analyzeryarn add webpack-bundle-analyzer –save-dev在 vue.config.conf 上配置一下chainWebpack(config) { config .plugin('webpack-bundle-analyzer')
2021-11-10 11:01:41 1690
原创 VUE3源码-Compare
目录前言旧vNode 和 新 vNode 的对比主要是判断是否是同一vNodeType两个列表【Children】的对比有设置key值的对比没有设置key值的对比总结前言本章节,我们将一起阅读源码,观看VUE3底层对vNode和列表的比较是怎么进行的,以及为什么列表需要设置key值。旧vNode 和 新 vNode 的对比主要是判断是否是同一vNodeType function isSameVNodeType(n1, n2) { ...
2021-10-20 17:13:40 394
原创 vue3新特性-Suspense和Teleport
前言阅读vue3源码的时候,发现会根据不同shapeFlag来做不一样的渲染,进而发现了vue3的一些新特性。好吧,我承认这个先后顺序可能有点点反。好了,让我们进入正题吧。Suspense【试验性,可能变动,生产环境请勿使用】官方说明:在正确渲染组件之前进行一些异步请求是很常见的事。允许将等待过程提升到组件树中处理,而不是在单个组件中实例:有一个组件的一些数据需要异步请求,请求完成后再渲染。为了显示优化,我们会在请求返回前显示一个Loading。进入页面,显示 Loading,...
2021-10-20 11:24:48 698
原创 菜鸟写Canvas动画
前言基础动画三要素:item、path、speedItem:待运动的单位Path:路径动画不得不知晓的三大路径:直线、圆、贝塞尔曲线直线:X轴和Y轴上的运动速度是恒定的。即:已知x=x+vx;y=y+vy;vx、vy是一个常量,恒定的。圆:绕圆来运动的话,一般X轴和Y轴上的运动速度用的是动态的选用三角函数来表示。vx = speed*Math.cos(angle);vy= speed*Math.sin(angle);贝塞尔曲线:
2021-10-19 15:42:40 451
原创 VUE3源码-CreateApp与mount
vue3中实例化一个vue,是从createApp开始的,那我们createApp到底做了啥呢?createApp源码const createApp = ((...args) => { const app = ensureRenderer().createApp(...args); { injectNativeTagCheck(app); injectCompilerOptionsCheck(app); } ..
2021-10-14 14:55:31 896
原创 VUE3源码-生命周期
前言对于VUE3的生命周期,我们经常性会去疑问,生命周期有哪些呢,它是怎么去实现的, 又是什么时候调用的,和VUE2版本有什么不同之处呢?v3生命周期有哪些呢上官方截图v3生命周期的实现这边主要针对的是 Hook inside ,进行分析,主要分析一下几个问题:1.生命周期是如何挂载到实例化的呢?2.又是如何调用的呢?1.生命周期是如何挂载到实例化的呢?onBeforeMount、onMounted等看源码定义,是直接调用 injectHook ...
2021-10-13 10:49:54 1845
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人