- 博客(54)
- 收藏
- 关注
原创 vue3 知识点 捋一遍。
异步组件会被打包工具(Webpack/Vite)自动分割为独立文件import() 会触发更彻底的 Tree Shaking, 且只在需要时加载组件代码(如路由切换时)// 方式1:直接传入加载函数// 方式2:配置对象形式delay: 200, // 延迟显示 loadingtimeout: 3000, // 超时时间(毫秒)suspensible: false // 是否由 Suspense 控制})
2025-04-27 11:20:57
1020
原创 微前端随笔
js-entry通过es-module 或 umd 动态插入 js 脚本 ,在主应用中发送请求,来获取子应用的包,该子应用的包主应用直接执行该脚本,拿到子应用包。该包中暴露了主应用规定的那几个生命周期函数,
2025-04-06 23:12:06
649
原创 vue2 vue3 响应式差异
总结: object.defineproperty()是对属性的劫持,对属性劫持有两大缺陷。2. 后添加的属性,无法获得响应式,因为劫持是初始化时完成的。1. 需要遍历对象的所有属性,深层属性需递归,存在效率问题。vue3最主要的区别就是在这,其他思想和vue2 一样。
2025-04-06 20:56:23
267
原创 Set,Map,WakeSet,WakeMap
Set、Map、WeakMap 和 WeakSet 是 ES6 引入的高级数据结构,它们的底层实现和特性与传统的对象和数组有显著差异强弱引用了解: link
2025-03-30 16:51:24
267
原创 js 强引用 弱引用
在 JavaScript 中,和是两种不同的对象引用机制,它们直接影响垃圾回收(Garbage Collection)的行为。
2025-03-30 16:15:26
415
原创 webpack5 小记
webpack 于2012年发布es6 2015年发布webpack 初期主要目的解析和打包 CommonJS 和 AMD 模块,将它们转换为浏览器可用的代码 ,es6 的出现淡化了这一功能。模块隔离,将每个模块封装在一个函数作用域中,避免模块内的变量泄露到全局。支持非 JavaScript 资源。
2025-03-27 18:05:27
487
原创 JS 装饰器
JavaScript 装饰器是一种声明式元编程工具,通过高阶函数和属性描述符操作,允许开发者以非侵入方式动态修改类或方法的行为,平衡了代码简洁性与灵活性。声明式:用 @ 语法修饰类或方法,直接声明其增强行为,而不需要手动修改被装饰目标的内部逻辑。@log // 声明式地添加日志功能元编程:指编写能够操作其他程序(或自身)的程序TypeScript/Babel 等工具在编译阶段处理 @装饰器逻辑,转换为高阶函数调用原始代码:@decorator转换后。
2025-03-27 17:02:30
876
原创 redux ,react-redux,redux-toolkit 简单总结
Redux、React-Redux 和 Redux Toolkit 是协同工作的三个库,各自承担不同角色,相互协同。React-Redux:连接 React 组件与 Redux Store。Redux Toolkit:效率工具,对上面二者封装了最佳实践。Redux:基础底座。
2025-03-26 18:07:25
257
原创 redux-tooltik
redux-tooltik 是官方效率工具,通过封装最佳实践(如自动生成 Action/Reducer、内置 Immer 和异步处理)简化 Redux 使用。Immer库 简介:Immer 使修改看似是“直接赋值”,但 Immer 会返回一个全新的不可变对象,原始状态保持不变。
2025-03-26 17:22:29
277
原创 rudux中间件
通过 Redux-Thunk,Redux 的 Action可以是一个函数,异步逻辑封装函数中,函数最后返回拿到结果的action对象,给reducer 的switch 用。它位于 Action 到达 Reducer 之前,可以拦截、处理或增强 Action。在没有 Redux-Thunk 的情况下,Redux 的 Action。不用 Redux-Thunk ,如何处理异步事件。1:直接在组件中处理异步(适用于简单场景)缺点:业务逻辑耦合在组件中,难以复用和测试。❓ 为什么需要 Redux-Thunk?
2025-03-26 16:34:13
493
原创 es6 fetch
问题:调用 response.json() 或 response.text() 后,响应体会被标记为已使用,再次读取会报错。问题:fetch 仅在网络故障(如无法连接)时 reject,但 HTTP 错误(如 404、500)会正常返回响应。问题:发送 JSON 数据时需手动调用 JSON.stringify(),而 axios 等库会自动处理。告知接收方(如服务器或浏览器)传输的数据是什么类型,例如:JSON、HTML、表单、图片等。问题:跨域请求默认不发送 Cookie,可能导致身份验证失败。
2025-03-25 23:08:48
445
原创 css-in-js
开发者编写 CSS-in-JS → Webpack + Babel 编译 → 生成 JS/CSS 文件 → 浏览器加载 JS → 运行时注入样式 → 组件渲染。
2025-03-21 17:46:39
424
原创 react18 核心知识点杂记1
render 的 React.createElement 返回如下 轻量级虚拟 DOM 对象 (或称:React 元素对象)
2025-03-17 16:43:34
888
原创 vue2 响应式原理(超简洁版)
网络上的相关文章又干又长,大多数时候只想知道vue2响应式的运转框架,不关注太多细节的东西,所以自己总结了这篇。
2024-04-19 19:50:52
386
1
原创 路由的 base 和webpack的publicPath(vite的base)区别
打包文件放置在dist目录下, _dirname 为当前文件在电脑中的绝对路径名,/a/b/dist, /a/b/就是 _dirname,path.resolve()通过这两个参数就能指定打包后dist文件放在项目的哪个位置。如果规定路径为“/my-app”,则从nginx/html/my-app/的目录下开始解析。所以通过上面的链接,能在服务器的 webApp 文件夹下拿到 子应用的所有js文件,这样vue 就能被加载出来,处理前端路由等工作。开头的路径,且服务器没有该资源时,重定向到。
2023-08-30 17:41:37
3159
原创 vue3 vite ts :eslint & prettierrc 配置
文件,如果不是js后缀,改成cjs,将以下文件替换进去。安装 eslint & prettierrc。package.json中,新增全局校验命令。
2023-05-31 16:04:29
728
原创 vue3 通信方式
/ 父组件 < child @事件 A = 'lb1' > < / child > lb1 =('回传参数1' , '回传参数2') => {// 子组件 // defineEmit 无需引入 let $emit = defineEmit([ '事件A' ]) // 创建emit实例 const fn2 =() = {$emit('事件A' , '参数1' , '参数...') }
2023-05-23 14:37:39
135
原创 动态引入图片为什么要加require?
答:因为动态添加src被当做静态资源处理了,而静态资源是会webpack编译的,不加require的src是不会编译src里的地址,而assets里的图片经过wabpack编译为dist后,地址已经变了,所以引入地址,资源地址在编译后对不上了。
2023-05-19 18:18:38
1644
原创 window.history对象
如果当前活动的历史记录项是被 pushState 创建的,或者是由 replaceState 改变的,那么 popstate 事件的状态属性 state 会包含一个当前历史记录状态对象的拷贝。每个标签都有一个独立的历史记录,里面维护着一条或多条记录。每条记录保存了对应 URL 的一些状态,仅能在当前页面的 window.history 对象读取到。
2023-05-12 14:27:28
1578
原创 grid布局
写在父元素grid-template-columns :定义列宽,给定几个参数,就把块分为几列。grid-template-rows :定义行高,给定几个参数,就定义这几行的行高,剩下的行为原始值。
2023-03-15 22:24:56
146
原创 post传参 params与body的区别(RequestParam 和 RequestBody的区别)
post传参 params与body的区别
2022-12-12 11:16:38
3143
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人