- 博客(129)
- 收藏
- 关注
RSS订阅原创 vue3中，watch监听你真的会用吗？
Vue3中推荐使用第二种watch写法：watch(()=>isEdit.value, callback, {immediate:true})。相比直接观察isEdit.value，这种getter函数写法能正确响应ref值的变化，更灵活且代码更清晰。第一种写法观察的是固定值而非响应式引用，无法触发回调。使用immediate:true时注意初始立即执行的情况。
2025-07-16 09:01:02
359
原创 为什么props.variable = props.variable.filter达不到props.nodeInfo.data.variables = props.nodeInfo.data.vari
摘要：代码中通过find方法查找符合条件的数据项，并尝试用filter方法过滤props.variable数组。发现直接赋值filter结果无效，而使用splice方法删除元素则有效。原因是props变量具有不变性，不能直接修改。解决方案是使用数组方法（如splice）操作原数组，而非重新赋值。这展示了vue3中props不可变性的特性，需通过适当方法修改数组内容。
2025-07-15 10:43:49
223
原创 vue3实现el-dialog弹窗如图弹窗代码
该代码实现了一个使用Element Plus组件库的弹窗表单，用于添加变量配置。主要功能包括：1) 通过el-dialog组件创建宽度30%的弹窗；2) 提供6种字段类型单选（文本/段落/下拉选项等）；3) 包含变量名称、显示名称的输入框；4) 可设置最大长度数字输入和必填/隐藏复选框；5) 底部有取消和保存按钮，保存时会打印表单数据并关闭弹窗。使用Vue 3的Composition API编写，通过ref管理表单数据和弹窗可见状态。
2025-07-09 09:39:30
472
原创 element-plus表单校验失败问题
表单校验失败问题分析：1.常规校验失效是因为未绑定prop属性，导致valid始终返回true；2.自定义校验无法获取value值是由于prop属性名与form数据不一致。解决方法：在el-form-item上正确绑定prop属性（如prop="name"），并确保rules中的校验字段名与form数据字段名完全匹配（如name对应form.name）。同时校验规则中的字段名也需保持一致。修改后，常规和自定义校验均可正常获取输入值并执行校验逻辑。
2025-07-09 09:32:55
565
原创 vue3中，Object.keys(newData).forEach(key =＞ { props.nodeData[key] = newData[key] })与直接修改props.nodeDat
虽然直接赋值和使用遍历更新都可以在短期内实现数据的更新，但它们都直接修改了props，这是不推荐的做法。推荐使用本地状态和事件通信的方式，这样可以确保数据流的清晰和可控，同时避免潜在的问题。通过在每一层组件中使用本地状态和事件通信，可以避免直接修改props，从而确保数据流的清晰和可控。这种做法的优点包括：遵循 Vue 的单向数据流原则。确保每一层组件之间的数据一致性。避免直接修改props，从而避免 Vue 的警告和潜在的 bug。使组件更加模块化和可维护。
2025-06-26 10:13:27
1157
原创 vue3动态路由的实现
因为vueRouter的路由守卫不推荐next，所以使用return，但是在该处一开始是将return放在异步函数的回调中，造成页面刷新一直白屏，才恍然大悟，return一定要在路由守卫的函数中，但是要保证动态路由已生成，所以使用await，在外层使用return进行重定向即可。在store文件夹下新建menu.ts文件，引入pinia（vue3推荐的全局存储，和vuex类似）创建store存储菜单数据以及定义生成动态路由的方法，通过addRoute添加动态路由。该文件中定义动态路由对应的vue文件。
2025-06-26 09:52:40
454
原创 React 报错：bundle.js:173207 Warning: [antd: Message] You are calling notice in render w
摘要：本文介绍了两种在Ant Design中使用message组件显示提示信息的方法。第一种方法通过useMessage Hook获取messageApi实例调用open方法；第二种更简化的方式是直接使用message.success/error等静态方法。文章建议采用第二种方法，代码更简洁，只需导入message后直接调用相关方法即可显示提示信息。两种方式都能实现相同的功能效果。
2025-06-11 10:24:25
271
原创 forEach不能用return中断循环，还是会走循环外的逻辑
【摘要】在forEach循环中直接使用return无法中断整个循环的执行，导致后续逻辑仍会被执行。正确的处理方式是在循环中设置标志位（如flag.value=true），然后在循环结束后根据标志位统一处理错误提示和返回。示例代码展示了如何通过flag.value标记不符合条件的项，最终在循环外统一进行错误提示和返回操作，确保逻辑正确执行。
2025-06-03 17:36:54
219
原创 vue3 ElMessage提示语换行渲染
ElMessage.error默认忽略换行符\n，要实现换行需使用<br>标签并开启dangerouslyUseHTMLString选项。例如：ElMessage.error({message:'发布失败！<br>'+data.msg,dangerouslyUseHTMLString:true})。这样就能显示多行错误提示信息。
2025-05-30 11:15:27
553
原创 vue3文本超出三行显示省略号，点击查看更多显示全部文本
摘要 本文实现了一个可折叠的文本显示组件，主要功能包括： 默认显示3行文本，超出部分显示"查看更多"按钮 点击按钮可展开/收起全文 通过计算元素高度和行高判断是否需要显示展开按钮 在弹窗打开和数据加载完成后才进行溢出检查 关闭弹窗时自动重置为收起状态 使用CSS实现文本省略和展开样式 该组件通过Vue3的composition API实现，封装了文本展示的常见交互需求。
2025-05-26 17:28:50
633
原创 git 报错：error: cannot lock ref ‘refs/remotes/origin/dev/cib‘: ‘refs/remotes/origin/dev‘ exists； canno
在使用 Git 时遇到 "cannot lock ref 'refs/remotes/origin/dev/cib': 'refs/remotes/origin/d" 这样的错误，通常是因为在尝试推送或拉取远程分支时，本地分支的名称与远程分支的名称冲突或不正确。这里我是用了git remote prune origin后，再git pull 就可以正常拉取了。将同时获取最新的远程仓库数据并删除任何过时的远程跟踪分支。只专注于删除过时的分支，不会获取新的远程仓库数据。
2025-05-06 15:53:16
1261
原创 el-dialog弹窗关闭时调了两次刷新数据的接口
弹窗是父组件通过dialog调用子组件的方式，然后在弹窗里面修改完内容，点击关闭按钮时，需要刷新父组件列表数据。但是调了两次刷新列表的接口。建议关闭的时候不要调取刷新数据的接口，因为如果在弹窗里面啥操作都不做，关闭时还刷新数据就不太友好。建议在保存或者提交的时候刷新数据。通过函数防抖就能防止关闭弹窗时调取两次刷新数据的接口。子组件通知父组件刷新数据。
2025-04-28 18:53:07
539
原创 父组件弹窗关闭时更新子组件的某个属性改为false
父组件弹窗关闭时更新子组件的某个属性改为false（子组件里面表单的展开/收起按钮），以及父组件的dialog的关闭按钮2、定义showPerformanceList 3、父组件关闭弹窗时修改showPerformanceList 的状态为false 子组件：4、子组件defineProps接收showPerformance5、子组件挂载完成时更新showPerformanceList.value的值为父组件传过来的值6、子组件监听OBJECT_ID变化时，
2025-04-23 09:47:11
278
原创 vscode 编辑器代码块展开收起不见了
编辑器找到设置 ——> 输入框查找folding ——> 找到 Editor: Folding Strategy ——> 下拉框选择 indentation。
2025-04-17 17:15:33
799
2
原创 vscode使用Linux的vi命令改错怎么回退
使用撤销命令：在插入模式下，按下`Esc`键返回命令模式，然后按下'u'键，每按一次u键，就能撤销一次编辑，直到回到最初修改之前。（正常模式下，按下`Ctrl + r`键，即可恢复被撤销的操作，每按下一次Ctrl + r键，就可以恢复一次被撤销的操作。`后按下回车，即可退出vi而不保存对文件的修改。2、使用恢复命令：在插入模式下，按下`Esc`键返回命令模式，然后输入`Ctrl + r`命令，即可恢复被撤销的操作。（正常模式下，直接按下u键，即可撤销上一次的编辑操作，每按一次撤销一次修改）
2025-04-15 09:27:58
697
原创 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
769
1
原创 git报错：“fatal:refusing to merge unrelated histories“
拒绝合并无关的历史” 是 Git 在合并无共同祖先的分支时的保护机制。根据你的需求，可以选择强制合并、重新初始化仓库、创建新分支或使用变基等方法解决问题。如果不确定操作的后果，建议先备份重要代码，避免数据丢失。
2025-03-12 10:08:55
9378
原创 前端页面报警告：runtime-core.esm-bundler.js:40 [Vue warn]: injection “Symbol(pinia)“ not found.
完整示例'app',sidebar: {...},...}),actions: {...})
2025-03-07 16:33:40
923
原创 前端页面报错： [Vue warn] Set operation on key “eventCallBks“ failed: target is readonly.
这表明你在尝试修改一个被标记为只读（readonly）的属性。
2025-03-07 16:08:05
965
原创 前端页面报 [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
1618
原创 vue3问题警告解决：传递给组件的某些非 props 属性（例如 class、id 等）无法被自动继承，因为该组件渲染的是片段（fragment）或文本根节点
一些开发工具（如 Vue Devtools）可能会使用组件的名称来提供更好的调试支持。：Vue 3 允许组件返回多个根节点（即片段），但片段无法自动继承父组件传递的非。等）无法被自动继承，因为该组件渲染的是片段（fragment）或文本根节点。：如果你的组件需要递归调用自身，Vue 需要知道组件的名称。如果可能，确保组件的模板只有一个根节点。中不是必需的，但它可以帮助你更好地组织代码，尤其是在大型项目中。在 Vue 3 中，当组件的模板有多个根节点（例如使用了。如果可能，确保组件的模板只有一个根节点。
2025-03-06 09:15:16
4067
3
原创 git cherry-pick - 从另一个分支中选取特定的提交（commit），并将它们应用到当前分支
命令，它允许你从另一个分支中选取特定的提交（commit），并将它们应用到当前分支。这个命令在多个场景下都非常有用，比如当你想要将一个特性分支上的某个特定更改应用到主分支，但又不想合并整个分支时。
2025-03-04 10:11:32
2765
原创 vue3代码解读：列表拖拽排序
返回值类型返回的是被删除的单个元素。返回的是一个包含被删除元素的数组。使用场景如果你需要直接操作被删除的单个元素，使用。如果你需要处理多个被删除的元素，或者需要保留返回的数组形式，使用。
2025-02-10 11:25:46
1827
原创 vue代码片段解读
函数是一个有效的实现，用于生成一个 16 字节的随机盐值，并将其转换为 32 位的十六进制字符串。这个盐值可以用于密码哈希等安全相关的操作。如果你在 Node.js 环境中运行代码，可以使用 Node.js 的crypto模块来生成随机字节。希望这些信息对你有所帮助！
2025-02-07 16:34:03
423
原创 git撤销上一次的提交
这个操作可以保留之前的提交和当前的修改。最近一次的提交到本地的修改的提交会回到暂存区，而当前的修改不会动。撤销最近修改（不保留修改）
2025-02-07 14:25:09
1604
原创 vue3表格数据分2个表格序号连续展示
this.tableData.slice(0, Math.ceil(this.tableData.length / 2))，也就是slice(0, 1)，也就是切割到唯一一条数据。包含 6 条数据，第一个表格显示前 3 条，第二个表格显示后 3 条。，我们希望在第一个表格中展示前半部分的数据，第二个表格中展示后半部分的数据。当数据为单数时，第一条数据会切割到了右边表格，左边表格无数据。当数据为单数时，第一条数据会切割到了右边表格，左边表格无数据。所以有且仅有一条数据时，就跑到了右边表格，左边表格没数据。
2025-01-24 17:14:27
1747
原创 vue3阻止事件冒泡到父元素
使用.stop修饰符：最简单直接的方式。在事件处理函数中调用：提供更灵活的控制。使用.self修饰符：限制事件仅在元素本身触发。使用.capture和.stop组合：适用于复杂场景。选择哪种方法取决于你的具体需求和场景。
2025-01-24 16:18:46
2022
原创 vue3实际开发bug解决
问题出在 componentName 的解构和赋值操作上。你尝试将一个字符串赋值给 ref 的 .value 属性，这导致了错误。ref 是 Vue 3 中用于响应式引用的工具，它返回一个对象，该对象的 .value 属性用于存储实际的值。不要对componentName解构赋值，直接赋值。
2025-01-21 15:33:05
578
原创 vue3代码优化：工厂函数优化
在这个案例中，使用了一个对象来存储每个type对应的构造函数。这样，就不需要使用switch语句，而是直接通过type来获取对应的构造函数。如果type不存在于对象中，就抛出一个错误。注意，这个示例假设cardType是一个枚举或对象，包含了所有可能的类型。如果你的代码中cardType是以不同的方式定义的，你可能需要相应地调整这个示例以适应你的代码基础。此外，如果你使用的是 TypeScript，你可以通过类型注解来进一步优化这个工厂函数。
2024-12-12 17:14:20
235
原创 动静分离具体是怎么实现的？
动静分离是指将网站的静态资源（如图片、CSS、JavaScript 文件）与动态内容（如 PHP、Python 等服务器端脚本生成的内容）分开处理。这样做可以使得静态资源被更快地加载，因为它们不需要经过后端服务器处理。在 Nginx 中实现动静分离是一种常见的优化手段，用于提高网站的性能和可扩展性。动静分离是提高网站性能和可维护性的重要策略，通过合理配置 Nginx，可以有效地实现这一目标。在这个配置中，静态资源被放置在。目录下，而动态请求被转发到。
2024-11-27 11:10:25
555
原创 10个高级JavaScript技巧
这可以极大地简化高度可重用实用函数的创建，使您的代码库更整洁且更易于维护。提供了一种强大的机制来控制和自定义模板字面量的输出，实现更安全和更灵活的模板创建。这可以显著提高具有繁重计算的函数的性能，特别是那些频繁使用相同参数调用的函数。通过使用别名，您可以避免名称冲突，并提高代码的清晰度，使其更易于处理复杂的数据结构。通过确保函数以受控的间隔调用，防止性能问题，减少浏览器的负载并提供更好的用户体验。如果没有记忆化，对斐波那契函数的每次调用都会多次冗余地计算相同的值，导致指数级的时间复杂度。
2024-11-26 16:58:30
1079
原创 前端code review：代码报错捕获、兼容错误、代码规范处理
当你访问基本类型的属性或方法时，JavaScript 会自动将基本类型装箱为其对应的对象类型。这个临时的对象允许你访问属性和方法，但它是短暂的，一旦属性或方法访问完成，这个对象就会被销毁。同样道理，只要变量能被转成对象，就可以使用对象的方法，但是 undefined 和 null 无法转换成对象。null 是一个特殊的基本类型，当尝试访问其属性时会报错，因为 null 不能被装箱为对象。解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象(装箱)。第二种情况，虽然给了默认值，但是依然会报错。
2024-11-26 15:58:33
878
原创 为什么要用 ??=
这种精确性能够有效避免使用更宽泛检查带来的潜在问题。在构建用户界面或处理表单数据时，我们通常希望保留这些“假值”而不是将它们替换为默认值。），它才会赋予默认值，因此适用于保留有效的 0、空字符串或。仅当变量真的是“没有值”时（即。时才会赋予它一个默认值。
2024-11-26 09:26:28
190
原创 JS常见的问题-面试题-实际开发问题：可变性，var 和 变量提升，偶然性全局变量，闭包，对象，this，强制转换， 异步，函数，原型
，这些都是不可变的。这意味着一旦分配了一个值，我们就无法修改它们，我们可以做的是将它重新分配给一个不同的值（不同的内存指针）。另一方面，其他数据类型（如 Object 和 Function）是可变的，这意味着我们可以修改同一内存指针中的值。函数总是同步的，不管每个循环是同步的还是异步的，这意味着每个循环都不会等待另一个。字符串是不可变的，因此一旦分配给一个值，就不能将其更改为不同的值，您可以做的是重新分配它。关键字声明的函数可以提升函数语句，但是不能提升箭头函数，即使它是使用。
2024-11-22 11:21:00
647
Vue.js devtools 6.0.0 beta 21
2024-07-04
Cookie-Editor 1.12.2
2024-07-04
2024前端面试八股文
2024-04-23
2024年前端工程师面试题
2024-04-23
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人