- 博客(25)
- 收藏
- 关注
RSS订阅原创 React基础学习
基础知识生命周期ReactVue3componentDidMount()onMountedshouldComponentUpdate()onBeforeUpdatecomponentDidUpdate()onUpdatedcomponentWillUnmount()onBeforeUnmountComponentReact 组件的基类PureComponent注意React.PureComponent 中的 shouldComponent
2022-09-27 22:12:48
407
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
1416
原创 webpack编译优化-(lodash、echarts、element-plus、vxe-table等)vue3版本
webpack编译优化-(lodash、echarts、element-plus、vxe-table等)vue3版本
2022-04-24 09:08:14
1514
2
原创 日常见到的一些js轮子
FileSaver.js主要文件下载原理还是通过 a 标签来进行的主要区分了跨域、不跨域跨域的话，直接 a 标签点击不跨域的话，手动请求返回，生成由blob转化的url，然后再点击与传统的直接 a标签点击 下载，多了一步转化为blob转化过程，可以避免浏览器闪动，或者特殊格式（例如json），浏览器直接打开现象的发生。新知识URL.revokeObjectURL创建经常有，释放往往会被忽略。URL.revokeObjectURL 释放由 URL.createObjectURL()创
2022-02-15 15:38:21
425
原创 音视频相关的知识点
示例：JS 播放视频流时调整 色度， 饱和度，亮度，对比度知识：视频流媒体播放的一些知识示例：在H5中使用video结合canvas来录制视频和上传video正常情况下加载视频，都是使用标签，那么对于一些需要用户自己播放的视频，最好指定标签的preload属性，“preload=none”，这样浏览器就不会预加载任何视频数据。[译] 网速敏感的视频延迟加载方案视频使用时比较 “坑” 的地方其中，有一种情况是，我们发现视频标签在浏览器页面时，它只会显示音频，但是却无法播放视频，这种情况下可能就是
2022-02-12 09:00:00
662
原创 JavaScript - V8
v8V8是一个由Google开发的开源JavaScript引擎，目前主要是用在Chrome浏览器 和 Node.js中。JIT执行高级语言一般是采用以下两种方式执行：解释执行，将源代码通过编译器编译成中间代码（如汇编代码），之后直接使用解释器解释执行中间代码。编译执行，将源代码通过编译器编译成中间代码，再有中间代码编译成机器代码（二进制），直接执行二进制代码。V8使用的是 混合编译执行和解释执行两种手段，这种技术称为JIT。解释执行,启动速度快，执行速度慢；编译执行，启动速度慢，执行
2022-02-10 20:00:00
763
原创 记一次懵逼修复
前言最近，通过webpack本地代理请求后端接口，数据量一多起来，不是尾部被截取，就是中间数据缺失，导致很多依赖异步数据的页面请求不出来。解决将 node版本从8.9，升级到到了16原因推测刚开始怀疑是不是node内存不足,敲一下命令看一下，还是有空间的。而且，真的不足，应该也会报错。>node> process.memoryUsage(){ rss: 27475968, heapTotal: 7708672, heapUsed: 4876592, external:
2022-01-04 21:57:27
204
原创 js-随记
array.filter 不会修改原数组填充一个长度为10，元素为a的数组方法一：Array.from({length:10}, (item)=>'a') 方法二：new Array(10).fill("a")
2021-12-28 19:19:48
285
原创 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
1727
原创 微前端-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
557
原创 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
636
原创 微前端-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
361
原创 Webpack优化 - 图片
图片压缩jpegtran不同窗口大小，显示不同大小,选中不同大小的图片html img[srcset]img元素srcset属性含义及作用在学习如何做网站时，网站中会有图片，图片使用HTML img 图片标签，img元素中有一个很少用的属于-srcset属性。img 元素的 srcset 属性用于浏览器根据宽、高和像素密度来加载相应的图片资源。属性格式：图片地址 宽度描述w 像素密度描述x，多个资源之间用逗号分隔。例如：<imgsrc="small.jpg...
2021-11-11 17:51:22
1154
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
1571
原创 VUE3源码-Compare
目录前言旧vNode 和 新 vNode 的对比主要是判断是否是同一vNodeType两个列表【Children】的对比有设置key值的对比没有设置key值的对比总结前言本章节，我们将一起阅读源码，观看VUE3底层对vNode和列表的比较是怎么进行的，以及为什么列表需要设置key值。旧vNode 和 新 vNode 的对比主要是判断是否是同一vNodeType function isSameVNodeType(n1, n2) { ...
2021-10-20 17:13:40
340
原创 vue3新特性-Suspense和Teleport
前言阅读vue3源码的时候，发现会根据不同shapeFlag来做不一样的渲染，进而发现了vue3的一些新特性。好吧，我承认这个先后顺序可能有点点反。好了，让我们进入正题吧。Suspense【试验性，可能变动，生产环境请勿使用】官方说明：在正确渲染组件之前进行一些异步请求是很常见的事。允许将等待过程提升到组件树中处理，而不是在单个组件中实例：有一个组件的一些数据需要异步请求，请求完成后再渲染。为了显示优化，我们会在请求返回前显示一个Loading。进入页面，显示 Loading，...
2021-10-20 11:24:48
656
原创 菜鸟写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
411
原创 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
869
原创 VUE3源码-生命周期
前言对于VUE3的生命周期，我们经常性会去疑问，生命周期有哪些呢，它是怎么去实现的， 又是什么时候调用的，和VUE2版本有什么不同之处呢？v3生命周期有哪些呢上官方截图v3生命周期的实现这边主要针对的是 Hook inside ，进行分析，主要分析一下几个问题：1.生命周期是如何挂载到实例化的呢？2.又是如何调用的呢？1.生命周期是如何挂载到实例化的呢？onBeforeMount、onMounted等看源码定义，是直接调用 injectHook ...
2021-10-13 10:49:54
1761
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人