- 博客(38)
- 收藏
- 关注
RSS订阅原创 【vue3】watch、watchEffect、watchPostEffect和watchSyncEffect的区别详解
主要讲述vue3中watch、watchEffect、watchPostEffect和watchSyncEffect的区别和使用场景
2025-09-27 12:42:24
269
原创 babel使用及其底层原理介绍
Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。
2025-08-26 17:55:19
385
原创 webpack文件指纹：hash、chunkhash与contenthash详解
name]表示模块名称[hash:8]表示取哈希值的前 8 位通常建议将不同类型的文件放在不同目录（如 js/、css/、assets/）便于管理JS 文件推荐使用chunkhashCSS 文件推荐使用（需要配合图片等静态资源可以使用hash或哈希长度一般取 8-16 位即可，既能保证唯一性又不会过长。
2025-08-25 17:34:23
392
原创 Reflect.deleteProperty
Reflect.deleteProperty 和 delete核心区别。，不会删除原型链上的属性。若对象自身没有该属性，返回。对象的静态方法，更适合。两者行为完全一致：若删除。（2）不可配置属性的处理。（3）对原型链属性的影响。（1）语法与使用场景。
2025-08-15 15:54:10
279
原创 vue异步加载组件
本文介绍了两种Vue异步组件加载方式：1)通过require实现；2)使用defineAsyncComponent结合动态import。重点封装了一个可配置的createAsyncComponent工具函数，支持设置加载动画、延迟显示、超时处理及重试机制等参数。该函数基于Vue3的异步组件API，可自定义加载状态组件（如Ant Design的Spin），并提供了错误处理和重试逻辑。最后展示了如何在组件中调用该工具函数异步加载BasicTable组件，并启用加载动画。这种封装提高了代码复用性，优化了用户体验。
2025-08-15 10:43:02
228
原创 vue3:customRef 自定义ref
场景：输入框输入数值，要过一会才回显到页面上，如果使用v-model则实时变化，所以可以使用官方提供的customRef。
2025-08-13 16:09:31
249
原创 uniapp中使用uView-plus踩坑记录
本文介绍了两种安装uview-plus组件库的方法： 插件市场安装 通过DCloud插件市场下载导入，需在main.js引入、uni.scss导入样式，并在pages.json配置easycom自动导入规则。 npm安装 执行npm install uview-plus安装，配置方式与插件市场类似，但文件路径需改为node_modules中的uview-plus。 两种方法均需完成组件注册、样式引入和自动导入配置，区别在于安装路径不同。插件市场安装更便捷，适合uni-app项目；npm安装则适合需要版本管理
2025-07-09 22:25:02
447
原创 flv.js 播放flv文件，定时清除缓存
摘要：本文介绍了一个基于Vue.js的FLV视频播放组件实现。该组件通过flv.js库加载并播放FLV格式视频流，支持直播场景。主要功能包括：1) 自动初始化播放器并处理跨域问题；2) 提供30秒定时清理缓存机制，防止多次打开后视频加载变慢；3) 实现缓冲区跳转优化播放体验；4) 组件卸载时自动销毁播放器释放资源。组件采用TypeScript编写，支持通过props配置视频URL和直播模式，适用于需要在弹窗中展示实时视频流的应用场景。
2025-05-20 10:41:33
204
原创 js坐标的相关属性
表示事件发生时，鼠标指针相对于浏览器窗口可视区域左上角的水平和垂直坐标，不考虑页面滚动的影响。表示事件发生时，鼠标指针相对于整个文档（包含滚动部分）左上角的水平和垂直坐标。表示事件发生时，鼠标指针相对于用户屏幕左上角的水平和垂直坐标。表示事件发生时，鼠标指针相对于触发事件的元素（目标元素）左上角的水平和垂直坐标。：这是元素的一个方法，会返回一个包含元素的大小及其相对于浏览器窗口可视区域位置的对象。该对象包含 、、、、 和 属性。
2025-03-31 22:04:43
342
原创 前端如何实现生成excel文件，并下载
后端很忙没有实现配合，主要由前端来实现，需要点击下载模版生成一个excel并下载的功能，另外如果数据是json格式，这里没有用到。上传文件后，前端读取上传的excel。也可以多列数据，这个暂时用不到。
2025-03-14 17:51:05
762
原创 vue3:Suspense的作用
它让我们可以在组件树上层等待下层的多个嵌套异步依赖项解析完成，并可以在等待时渲染一个加载状态。通俗来讲就是用来处理异步组件加载时的 loading 状态的，等待组件异步加载，加载完成后统一显示。一般组件中获取接口数据，使用v-if和v-else控制loading，当接口返回后把loading设为false，但是当页面接口过多时，到处都是 loading，为了协调整个页面的加载状态，这里有一个深度嵌套的组件，它需要整整5秒来加载，阻塞了整个UI，尽管大多数组件加载完成的时间要早得多。另外，这些组件都通常与。
2024-07-30 10:36:34
472
原创 window.matchMedia
matchMedia() 返回一个新的 MediaQueryList 对象，表示指定的媒体查询字符串解析后的结果。
2024-07-09 22:23:31
383
原创 ResizeObserver和IntersectionObserver
ResizeObserver是监听DOM元素宽高的变化，需要注意的一点就是监听出变化结果是contentBox的宽度和高度。IntersectionObserver 是监听DOM元素是否可见。用于监听元素大小的变化。
2024-07-01 10:23:11
242
原创 qiankun微前端：qiankun+vite+vue3+ts
微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。
2024-06-28 14:10:38
663
2
原创 fatal: detected dubious ownership in repository at ‘xxx‘
【代码】fatal: detected dubious ownership in repository at ‘xxx‘
2023-05-15 11:50:08
368
转载 如何搭建一个组件库
自动创建 packages文件夹和lerna.json和package.json。App.vue和template.html里面就写了最基本的格式这里不再赘述。新建site/webpack.config.js。新建index.ts和button.vue。12.新建babel.config.js。删除无关的文件，新建index.ts。在package.json下补充。创建tsconfig.json。在package.json下添加。在lerna.json下补充。
2023-04-17 13:52:11
323
2
原创 vue-property-decorator
是依赖于ts的一个装饰库，用来简化书写npmvue-property-decorator是vue-class-component的进一步封装，提供了 写法template和css写法不变，只是在script上加上lang='ts':script声明当前语言是ts@Component：注明此类为一个vue组件 export default class Test extends Vue:当前组件类继承vue生命周期 方法 组件 watch 计算属性对于V
2023-04-14 13:11:25
462
原创 electron
Electron窗口与进程通信摘要：本文介绍了Electron中窗口管理、进程通信和API调用等核心功能。主要内容包括：1）窗口生命周期事件（ready、window-all-closed等）；2）父子窗口创建与模态窗口设置；3）BrowserView和BrowserWindow的无边框实现；4）主进程与渲染进程间通过ipcMain/ipcRenderer进行通信；5）对话框、菜单和网络请求API的使用。重点展示了窗口间消息传递（postMessage）、进程间通信机制以及网络请求实现方式，为Electro
2023-04-14 12:57:44
425
原创 【electron】-This renderer process has “webSecurity“ disabled. This exposes users of this app to sever
原因：有跨域请求在主进程里添加了webSecurity:false,控制台出现如下警告⚠️。
2023-04-14 12:42:15
1491
原创 vue resolveDynamicComponent的使用
这几个组件里的内容写在对应的views的component文件夹下。使用resolveDynamicComponent动态解析组件。遇到这种情况，每个卡片的布局一致，只有内容不一致。组件注册在global或者在main.ts里导入。对应的ts写出对应的标题和详情页配置。
2023-04-14 12:31:44
782
原创 打开一个页面，数据是接口轮询返回的，还可以修改属性，如何在编辑时暂停轮询
使用 @vueuse/core封装的方法，传递一个函数，监听一个boolean值。
2023-04-14 11:53:18
147
原创 什么是闭包
换而言之，闭包让开发者可以从内部函数访问外部函数的作用域。在 JavaScript 中，闭包会随着函数的创建而被同时创建。如果不是特定的需要应该尽量减少使用闭包，闭包会消耗内存。（closure）是一个函数以及其捆绑的周边环境状态（
2023-03-25 22:31:34
72
原创 createWebHistory和createWebHashHistory的区别
history每次刷新会向后端发起请求，需要和后端配合，如果对于项目没有硬性标准要求，我们可以直接使用hash模式开发。history刷新会出现404需要配nginx的url重定向。createWebHashHistory路由带#createWebHistory路由不带#
2023-03-24 10:46:40
602
原创 EventBus,$emit,$on
EventBusEventBus 又称为事件总线。如果组件之间没有引入关系，也不需要用vuex库来处理通信，则可以用EventBusmain.jsVue.prototype.$EventBus = new Vue()如果有两个组件A，B需要进行通信，点击A页面按钮则传递数据给BA.vue<button @click="sendMsg"></button> methods: { sendMsg() { EventBus.$emit("change",
2021-06-11 23:52:05
2168
1
原创 关于 vue.use（plugin, arguments）
Vue.use( plugin )先举个栗子，常见的用法import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。该方法需要在调用 new Vue() 之前被调用。当 install 方法被同一个插件多次调用，插件将只会被安装一次。plugins.j
2021-06-11 00:26:29
380
3
原创 promise和async
由于javascript是单线程的，只能在JS引擎的主线程上运行的，所以js代码只能一行一行的执行，不能在同一时间执行多个js代码任务，这就导致如果有一段耗时较长的计算，或者是一个ajax请求等IO操作，如果没有异步的存在，就会出现用户长时间等待，并且由于当前任务还未完成，所以这时候所有的其他操作都会无响应。那么常见的异步模式有哪些呢？回调函数事件监听发布/订阅模式（又称观察者模式）promise具体JS是如何实现异步操作的呢？当JS解析执行时，会被引擎分为两类任务，同步任务（synchron
2021-06-07 13:37:12
329
原创 （git-报错）LF will be replaced by CRLF in README.md.
修改代码提交本地git add . 时报错LF will be replaced by CRLF in README.md. The file will have its original line endings in your working directory翻译：LF将被README.md中的CRLF所取代。该文件在您的工作目录中有其原始的行结尾git config --global core.autocrlf falsegit config --list...
2021-06-04 09:38:26
496
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人