- 博客(110)
- 收藏
- 关注
RSS订阅原创 vue3开发问题解决：[Vue warn]: Invalid prop: type check failed for prop “menuWidth“. Expected N
如果menuWidth本身可以接受带单位的字符串（如"124px"），你可以直接修改propsprops: {然后在组件内部根据需要处理这个字符串值。这个警告的根本原因是传递给menuWidth的值类型不符合组件的期望。解决方法包括：确保传递的值是数字类型。在父组件中解析字符串为数字。在子组件中处理字符串值并解析为数字。调整props的定义以接受字符串类型。根据你的具体需求选择合适的方法。这里我用了方法1去解决。
2025-03-13 09:54:30
524
原创 git报错：“fatal:refusing to merge unrelated histories“
拒绝合并无关的历史” 是 Git 在合并无共同祖先的分支时的保护机制。根据你的需求，可以选择强制合并、重新初始化仓库、创建新分支或使用变基等方法解决问题。如果不确定操作的后果，建议先备份重要代码，避免数据丢失。
2025-03-12 10:08:55
2084
原创 前端页面报警告：runtime-core.esm-bundler.js:40 [Vue warn]: injection “Symbol(pinia)“ not found.
完整示例'app',sidebar: {...},...}),actions: {...})
2025-03-07 16:33:40
527
原创 前端页面报错： [Vue warn] Set operation on key “eventCallBks“ failed: target is readonly.
这表明你在尝试修改一个被标记为只读（readonly）的属性。
2025-03-07 16:08:05
482
原创 前端页面报 [Vue warn]: Invalid prop: custom validator check failed for prop “pagerCount”.
如果在某些情况下（例如组件重新渲染时）值被错误地覆盖或解析为其他类型，仍可能触发警告。所以全局搜索 pager-count，盲猜一定是有赋值不在5-21之间的奇数的范围的。即使 pager-count="7"写死为7，还是报那错误；Element Plus 的。：必须是大于等于 5 的奇数。
2025-03-07 15:35:46
534
原创 vue3问题警告解决：传递给组件的某些非 props 属性（例如 class、id 等）无法被自动继承，因为该组件渲染的是片段（fragment）或文本根节点
一些开发工具（如 Vue Devtools）可能会使用组件的名称来提供更好的调试支持。：Vue 3 允许组件返回多个根节点（即片段），但片段无法自动继承父组件传递的非。等）无法被自动继承，因为该组件渲染的是片段（fragment）或文本根节点。：如果你的组件需要递归调用自身，Vue 需要知道组件的名称。如果可能，确保组件的模板只有一个根节点。中不是必需的，但它可以帮助你更好地组织代码，尤其是在大型项目中。在 Vue 3 中，当组件的模板有多个根节点（例如使用了。如果可能，确保组件的模板只有一个根节点。
2025-03-06 09:15:16
1443
3
原创 git cherry-pick - 从另一个分支中选取特定的提交（commit），并将它们应用到当前分支
命令，它允许你从另一个分支中选取特定的提交（commit），并将它们应用到当前分支。这个命令在多个场景下都非常有用，比如当你想要将一个特性分支上的某个特定更改应用到主分支，但又不想合并整个分支时。
2025-03-04 10:11:32
872
原创 vue3代码解读：列表拖拽排序
返回值类型返回的是被删除的单个元素。返回的是一个包含被删除元素的数组。使用场景如果你需要直接操作被删除的单个元素，使用。如果你需要处理多个被删除的元素，或者需要保留返回的数组形式，使用。
2025-02-10 11:25:46
943
原创 vue代码片段解读
函数是一个有效的实现，用于生成一个 16 字节的随机盐值，并将其转换为 32 位的十六进制字符串。这个盐值可以用于密码哈希等安全相关的操作。如果你在 Node.js 环境中运行代码，可以使用 Node.js 的crypto模块来生成随机字节。希望这些信息对你有所帮助！
2025-02-07 16:34:03
283
原创 git撤销上一次的提交
这个操作可以保留之前的提交和当前的修改。最近一次的提交到本地的修改的提交会回到暂存区，而当前的修改不会动。撤销最近修改（不保留修改）
2025-02-07 14:25:09
853
原创 vue3表格数据分2个表格序号连续展示
this.tableData.slice(0, Math.ceil(this.tableData.length / 2))，也就是slice(0, 1)，也就是切割到唯一一条数据。包含 6 条数据，第一个表格显示前 3 条，第二个表格显示后 3 条。，我们希望在第一个表格中展示前半部分的数据，第二个表格中展示后半部分的数据。当数据为单数时，第一条数据会切割到了右边表格，左边表格无数据。当数据为单数时，第一条数据会切割到了右边表格，左边表格无数据。所以有且仅有一条数据时，就跑到了右边表格，左边表格没数据。
2025-01-24 17:14:27
1518
原创 vue3阻止事件冒泡到父元素
使用.stop修饰符：最简单直接的方式。在事件处理函数中调用：提供更灵活的控制。使用.self修饰符：限制事件仅在元素本身触发。使用.capture和.stop组合：适用于复杂场景。选择哪种方法取决于你的具体需求和场景。
2025-01-24 16:18:46
847
原创 vue3实际开发bug解决
问题出在 componentName 的解构和赋值操作上。你尝试将一个字符串赋值给 ref 的 .value 属性，这导致了错误。ref 是 Vue 3 中用于响应式引用的工具，它返回一个对象，该对象的 .value 属性用于存储实际的值。不要对componentName解构赋值，直接赋值。
2025-01-21 15:33:05
301
原创 vue3代码优化：工厂函数优化
在这个案例中，使用了一个对象来存储每个type对应的构造函数。这样，就不需要使用switch语句，而是直接通过type来获取对应的构造函数。如果type不存在于对象中，就抛出一个错误。注意，这个示例假设cardType是一个枚举或对象，包含了所有可能的类型。如果你的代码中cardType是以不同的方式定义的，你可能需要相应地调整这个示例以适应你的代码基础。此外，如果你使用的是 TypeScript，你可以通过类型注解来进一步优化这个工厂函数。
2024-12-12 17:14:20
149
原创 动静分离具体是怎么实现的？
动静分离是指将网站的静态资源（如图片、CSS、JavaScript 文件）与动态内容（如 PHP、Python 等服务器端脚本生成的内容）分开处理。这样做可以使得静态资源被更快地加载，因为它们不需要经过后端服务器处理。在 Nginx 中实现动静分离是一种常见的优化手段，用于提高网站的性能和可扩展性。动静分离是提高网站性能和可维护性的重要策略，通过合理配置 Nginx，可以有效地实现这一目标。在这个配置中，静态资源被放置在。目录下，而动态请求被转发到。
2024-11-27 11:10:25
445
原创 10个高级JavaScript技巧
这可以极大地简化高度可重用实用函数的创建，使您的代码库更整洁且更易于维护。提供了一种强大的机制来控制和自定义模板字面量的输出，实现更安全和更灵活的模板创建。这可以显著提高具有繁重计算的函数的性能，特别是那些频繁使用相同参数调用的函数。通过使用别名，您可以避免名称冲突，并提高代码的清晰度，使其更易于处理复杂的数据结构。通过确保函数以受控的间隔调用，防止性能问题，减少浏览器的负载并提供更好的用户体验。如果没有记忆化，对斐波那契函数的每次调用都会多次冗余地计算相同的值，导致指数级的时间复杂度。
2024-11-26 16:58:30
899
原创 前端code review：代码报错捕获、兼容错误、代码规范处理
当你访问基本类型的属性或方法时，JavaScript 会自动将基本类型装箱为其对应的对象类型。这个临时的对象允许你访问属性和方法，但它是短暂的，一旦属性或方法访问完成，这个对象就会被销毁。同样道理，只要变量能被转成对象，就可以使用对象的方法，但是 undefined 和 null 无法转换成对象。null 是一个特殊的基本类型，当尝试访问其属性时会报错，因为 null 不能被装箱为对象。解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象(装箱)。第二种情况，虽然给了默认值，但是依然会报错。
2024-11-26 15:58:33
775
原创 为什么要用 ??=
这种精确性能够有效避免使用更宽泛检查带来的潜在问题。在构建用户界面或处理表单数据时，我们通常希望保留这些“假值”而不是将它们替换为默认值。），它才会赋予默认值，因此适用于保留有效的 0、空字符串或。仅当变量真的是“没有值”时（即。时才会赋予它一个默认值。
2024-11-26 09:26:28
136
原创 JS常见的问题-面试题-实际开发问题：可变性，var 和 变量提升，偶然性全局变量，闭包，对象，this，强制转换， 异步，函数，原型
，这些都是不可变的。这意味着一旦分配了一个值，我们就无法修改它们，我们可以做的是将它重新分配给一个不同的值（不同的内存指针）。另一方面，其他数据类型（如 Object 和 Function）是可变的，这意味着我们可以修改同一内存指针中的值。函数总是同步的，不管每个循环是同步的还是异步的，这意味着每个循环都不会等待另一个。字符串是不可变的，因此一旦分配给一个值，就不能将其更改为不同的值，您可以做的是重新分配它。关键字声明的函数可以提升函数语句，但是不能提升箭头函数，即使它是使用。
2024-11-22 11:21:00
599
原创 JS新功能之：全新 Set 方法
目前，这些新方法已被主流浏览器普遍支持。：判断第一个集合是否是第二个集合的子集。：判断第一个集合是否是第二个集合的超集。：返回第一个集合与第二个集合的差集。JavaScript 的内置。：判断两个集合是否不相交。：返回两个集合的对称差。：返回两个集合的交集。：返回两个集合的并集。
2024-10-28 16:26:49
294
原创 JS新功能：Promise.try
如果f是同步函数并返回一个值，则Promise.try会返回一个解析为该值的Promise。如果f是异步函数并返回一个Promise，则Promise.try会返回该Promise并保持其状态。：：在实际编程中，经常遇到需要处理一个函数f，这个函数可能是同步的，也可能是异步的（即返回Promise）。在这个示例中，函数asyncF是异步的，并返回一个在1秒后解析的Promise。不同的是，使用Promise.try时，如果f是同步函数，它会在当前事件循环中立即执行，而不是在下一个事件循环中。
2024-10-28 16:24:22
560
原创 判断数组arr1中是否包含和数组arr2的FieldName名称一样的，包含返回true，不包含返回false
判断数组arr1中是否包含和数组arr2的FieldName名称一样的，包含返回true，不包含返回false为了判断数组arr1中是否至少有一个元素的与数组arr2中的任意一个FieldName相同，你可以使用方法结合方法来实现。
2024-10-11 16:27:15
678
原创 vue3中，拦截双击事件的第一次点击，写一些逻辑
开发案例中，到目前为止，可以成功拦截第一次点击，但是需要注意的是，需要双击的频率在合适（双击频率要在300ms内点击第二次）的情况下才会拦截第一次点击，在里面写你要的TODO逻辑即可。如果需要每次双击都拦截到第一次点击，可以调一下定时器的时间即可，可以调到500ms，一般人双击的频率都可以在500ms点击第二次。在 Vue 3 中，如果想要拦截双击事件的第一次点击并执行一些逻辑，你可以使用一个状态变量来跟踪第一次点击事件，并在第二次点击时阻止第一次点击逻辑的执行。
2024-10-11 10:19:58
676
原创 Object.values() 、 Object.keys()
只能获取对象自身的可枚举属性值，不会获取继承的属性值。如果你的对象中包含了嵌套对象，那么返回的数组将只包含嵌套对象的引用，而不是嵌套对象的值。如果你需要递归地获取所有嵌套对象的值，你可能需要编写一个递归函数来实现这一点。这样，如果对象中有多个相同的值，你就能获取到所有对应的键。在 Vue 3 的组合式 API 中，如果你有一个响应式对象，例如。如果你需要在 Vue 组件中获取响应式对象的值，你可以使用同样的。的所有键，并检查每个键对应的值是否等于我们想要找的值。一旦找到匹配的值，我们就得到了对应的键。
2024-09-30 17:05:29
787
1
原创 自定义验证器函数
组件，来确保用户输入的数据符合特定的要求。例如，你可能不希望用户在某些输入字段中使用特定的关键字，因为这些关键字可能是保留字或有特殊意义。这个验证规则对象通常用在表单组件中，例如 Element Plus 的。
2024-09-30 16:58:30
694
原创 已知有一个对象，通过对象的值拿到对象的键
函数返回一个数组，包含所有与目标值相匹配的键。这样，如果对象中有多个相同的值，你就能获取到所有对应的键。函数遍历对象的键，并检查每个键对应的值是否等于目标值。如果找到匹配的值，函数返回对应的键。函数接受两个参数：一个对象。
2024-09-30 16:52:00
232
原创 vue3代码优化
这段代码可以通过减少重复代码和简化条件逻辑来优化。首先，可以观察到，无论。：通过提前返回或继续到下一个条件，减少嵌套的深度，使代码更易于阅读和维护。这种优化不仅减少了代码量，还提高了代码的可读性和可维护性。如何，这个值只在不是主表的情况下设置一次。都被设置为取消主表的文本。的逻辑移动到条件之外，因为无论。的检查，直接在一行中设置。：使用三元运算符来简化。
2024-09-20 10:07:44
304
原创 vue3兄弟组件间的通信 mitt
这样兄弟组件child2触发事件时，就会通过$bus.emit发出通知，兄弟组件child1通过$bus.on监听到，就可以做下一步的逻辑。注意，当子组件child1调用完$bus.on后，在组件销毁前，销毁监听事件。两个子组件都引入mitt.js文件。
2024-09-12 10:58:43
405
原创 vue3项目监听浏览器的返回按键事件
有这样一个需求，当在用户在浏览器点击返回按钮的时候，需要弹出当前组件的退出确认框。并且如果当前页面有个已经打开了的弹窗时，弹窗还没关闭就点击浏览器的返回按钮，要求点击返回时，弹窗要关闭。在组件被卸载时，确保移除事件监听器，避免内存泄漏。当用户点击浏览器返回按钮时，会触发。当组件被挂载时，添加了一个。
2024-09-12 09:28:55
1475
原创 问题：vite首次加载慢
不是说vite项目的启动很快很快吗？vite项目的启动确实是快（注意这里的启动是指命令行启动完毕，不是指启动完之后首页加载完毕）如果某个界面是首次进入，且依赖比较多/比较复杂的话，那就会比较慢了。vite之所以启动快，是因为vite启动时并不会像webpack一样对所有代码进行编译/打包/压缩, 他只会对一小部分代码进行一些简单的处理，剩余的工作都交给浏览器，以及运行时进行依赖分析，动态打包，动态引入。引入element-plus组件后。
2024-09-11 11:43:44
1431
原创 判断展示栏是否包含某字段，已有的话不能再添加该表格的字段
(x) =>currentDisplay.value.arr是当前展示栏展示的数组元素；params是当前这张表格正在添加的元素字段的信息，包含当前的表格名和字段名；
2024-09-03 16:43:59
209
原创 vue3实现拖拽移动位置，拖拽过程中鼠标松开后元素还吸附在鼠标上并随着鼠标移动
拖拽元素移动的时候，偶尔会出现拖拽过程中鼠标松开后元素还吸附在鼠标上并随着鼠标移动，要再按一下元素才会被放置下来。出现该问题的原因是：这个过程会触发H5原生的拖拽事件，并且不会监听到onmouseup，从而导致鼠标松开也能够拖拽。在相应的位置添加这2个函数即可。
2024-09-03 09:07:02
1304
原创 vue3代码解读：=＞ let BASEURL；// 注册实例export const initAxiosInstance = ({ baseUrl = ‘/‘, beforeReques
这段代码是一个用于初始化和配置 HTTP 请求实例的模块，可能是用于一个基于 Axios 的自定义 HTTP 客户端。代码使用了 ES6 语法，并且似乎是为 Vue.js 或类似的前端框架设计的。：声明了一个名为BASEURL的变量，这个变量将用于存储 HTTP 请求的基础 URL。：这是一个名为的导出常量，它是一个函数，用于初始化 HTTP 请求实例。函数接收一个对象参数，该对象包含用于配置 HTTP 请求的属性。：在对象解构时提供了baseUrl的默认值，如果调用时没有提供baseUrl，则默认使用。
2024-08-22 17:20:04
432
原创 vue3模拟生成并渲染10万条数据，并实现本地数据el-table表格分页
【代码】vue3模拟生成并渲染1万条数据，并实现本地数据el-table表格分页。
2024-08-22 17:09:23
846
2
原创 vue3实际开发过程中 控制台警告：=＞ DerivativeIndicators.vue:288 value cannot be made reactive: null
原本代码 let rowData = reactive(null);，null是基本数据类型，应该用ref定义，reactive定义的话是定义对象那些；改为 let rowData = reactive({});
2024-08-21 10:16:12
275
原创 vue3实际开发中的问题 =＞ main.js:36 ElementPlusError: [el-dialog] [Attribute] custom-class is about to be dep
如果你正在从 Vue 2 迁移到 Vue 3 或从 Element UI 迁移到 Element Plus，你需要将。组件中： custom-class="dialog-root" => class="dialog-root"在 Vue 3 和 Element Plus（Element UI 的 Vue 3 版本）中，在 Vue 3 和 Element Plus 中，你可以直接使用。属性用于给组件自定义类名已经被弃用。属性，允许你为组件的根元素添加一个自定义类名。属性来为组件添加自定义类名。
2024-08-21 09:44:33
1851
原创 js reduce()方法的基本使用
/ })第一个参数 prev(必需)：上一次调用回调返回的值，第一次初始值是数组的第一项。如上述例子，prev就是1，第二次就是 prev + cur 的结果；第二个参数 cur(必需)：当前数组中被处理的元素，第一次是数组的第二项。如上述例子，cur是 2，第二次就是 3；第三个参数 index(可选)：当前被处理元素在数组中的索引。如上述例子，index第一次是 1，第二次是 2；第四个参数 arr(可选)：调用 reduce()方法的数组。
2024-08-19 14:37:55
498
Cookie-Editor 1.12.2
2024-07-04
Vue.js devtools 6.0.0 beta 21
2024-07-04
2024前端面试八股文
2024-04-23
2024年前端工程师面试题
2024-04-23
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人