码农研究僧的博客

一键登录：✅ 保证用户身份安全：code 只能用一次，防止重放攻击。✅ 防止 CSRF 攻击：使用 state 进行安全验证。✅ 提升用户体验：授权后自动登录，无需手动输入账号密码

this.$store.dispatch 适用于全局状态管理和异步操作，但代码较冗长。直接调用 API 适合不依赖 Vuex的情况，代码更简单。mapActions 适用于仍然使用 Vuex，但希望代码更简洁的情况。mapMutations 适用于仅需要同步更新 Vuex 状态的情况

需要最大限度控制流程和错误信息展示，优先选择 命令式方式。更好的交互体验和实时反馈，推荐使用 声明式方式，它天然适合和 :disabled、:class 等绑定结合

el-table-v2 适合用于：大数据量场景，百万级行数不卡顿。不适合需要复杂交互（如树形表格、合并单元格）场景。它更像是面向性能优化的纯渲染表格工具

涵盖拍照、预览、删除和提交等核心操作。通过清晰的页面布局、合理的状态提示和详细的注释，使用户能够方便地完成照片提交流程。

在 UniApp 开发中，tabBar 通常是通过 pages.json 配置的，适用于整个应用的全局导航。然而，在某些场景下，我们可能需要只在特定的页面展示 tabBar，而不会影响其他页面的布局。这就需要使用 自定义 tabBar，可以通过 view 组件、uni-segmented-control 组件或 uni-nav-bar 组件等方式来实现。

字典数据管理是一个重要的组成部分，字典数据通常包括各种下拉列表、状态标识等，用于在页面中展示和交互特别是当使用 Vue3 与 Java 后端进行通信时，字典数据的获取、存储、管理和reload都成为关键点

在Uni-app框架中，uni.chooseImage是一个用于让用户选择图片的API，支持从相册或相机选取图片，并返回选择的图片信息

使用 setTimeout 延迟 loaded 赋值，避免 onShow() 立即执行（适用于异步加载）。

KeepAlive 是 Vue 性能优化的重要手段，尤其适用于表单、多页面切换等场景。通过 include、exclude 和 max 进一步优化缓存策略，并结合 activated 和 deactivated 生命周期精细控制组件行为，可以最大化提升 Vue 应用的性能和用户体验

unref 可以解包 ref，获取其 .value，简化代码

该代码中，通过自定义 request 函数对 HTTP 请求进行了统一管理，并且结合了 Token 认证机制

在 SQL Server 中，视图不会自动更新其结构如果表中添加了新字段，但没有刷新视图，查询视图时仍然返回旧结构的数据

推荐方案如果只是传递少量数据（如 ID），URL 传参最简单如果需要传递复杂对象（如 JSON），推荐 eventChannel如果多个页面共享数据，Vuex 是更好的选择如果需要在页面刷新后仍保留数据，localStorage 是不错的方案

TransitionGroup 是 Vue 提供的一个特殊的过渡组件，允许对多个元素的进入、离开和移动进行动画处理，与 Transition 类似，但主要用于列表或动态元素组的动画过渡TransitionGroup 主要用于对一组元素进行添加、移除和位置变换时的动画处理，常用于列表项的增删和重新排序

在 Vue 项目中，缓存通常用于存储用户信息、角色权限、系统设置等，以提高页面加载速度并减少 API 请求这里使用 web-storage-cache 作为封装的本地存储工具，支持 localStorage 和 sessionStorage 方式存储数据

本篇博客将介绍如何通过点击按钮切换不同的图片，并优化交互体验，使页面更流畅、响应更快主要的知识点：Vue 3 组件化开发 - 通过 setup 组合式 API 进行数据管理动态绑定 class - 根据当前选中的图片高亮按钮过渡动画 transition - 让图片切换更流畅图片预加载 - 避免切换时的卡顿样式优化 - 让按钮和图片展示更美观

ref 与 reactive 的基本知识在 Vue 3 中，ref 和 reactive 都用于创建响应式数据，但它们在底层实现和使用方式上有所不同ref：适用于基本数据类型和对象，返回的是一个带有 .value 属性的对象reactive：只能用于对象类型（如数组、对象等），返回的是 Proxy 代理对象let 与 const 的基本知识let 和 const 都是 ES6 引入的变量声明方式，它们的主要区别在于作用域、是否可重新赋值等let：块级作用域，可重新赋值const：块级作用域，

el-tooltip 是 Element Plus（Vue 3 组件库）中的一个用于提示的组件，它可以在用户悬停或点击元素时显示额外信息。通常用于按钮、图标等需要提供额外描述的地方

页面顶部 增加一个 按钮（el-icon-monitor 图标），点击后弹出浮窗浮窗 使用 iframe 方式加载你的 script 对应的内容可关闭，右上角有 × 号可关闭浮窗

在 Vue 开发中，图片的引用方式主要取决于图片存放的位置，常见的存放方式包括：存放在 public/ 目录存放在 assets/ 目录存放在远程服务器动态拼接图片路径

原先的父子组件传递已经说过很多知识，推荐阅读详细分析Vue3中的props用法（父传子）详细分析Vue3中的defineExpose（附Demo）详细分析Vue3中的emit用法（子传父）

zhilin-picker 是一个自定义的选择器组件，通常用于弹出一个选择列表供用户选择选项。支持多种功能，如多选、搜索和自定义标题等

演示了如何在表单中根据不同的条件启用和禁用按钮，确保用户在满足特定条件时才能提交表单

npm run 是 npm 的一个命令，用于运行 package.json 中定义的脚本，可以通过 “scripts” 字段为项目定义各种任务

该 Demo 实现了一个包含时间选择器的表单，用户可以选择报修时间，并通过表单提交数据时间选择器会显示当前时间，并确保选择的时间不大于当前时间。如果用户点击“确定”按钮提交数据，系统会进行验证并提交到后台

WebStorageCache 是一个用于扩展 HTML5 的 localStorage 和 sessionStorage 的库，增加了超时时间管理和序列化功能。它可以存储 JSON 对象，并且在存储数据时可以方便地设置超时时间。这个库还能够自动清除过期数据，避免了数据的累积

mt-x 是一个用于设置元素上外边距的类名，通常是在 Element Plus UI 组件库中使用的mt 代表 “margin-top”，后面的 x 是数值，表示外边距的大小Element Plus 提供了一系列类似的类来控制外边距和内边距，方便在组件中快速调整布局

el-card 是 Element Plus 组件库中的一个重要组件，用于展示内容块，通常用于显示信息、图片、操作按钮等具有良好的可定制性和灵活性，适合多种使用场景

保留小数位数的常见方法是使用 JavaScript 中的 toFixed 方法，用于将数字转换为字符串，并保留指定的小数位数

el-breadcrumb 是 Element Plus 中的面包屑导航组件，主要用于展示当前页面在整个应用程序中的位置，并提供导航功能面包屑通常用于提高用户体验，尤其是在多层级的页面结构中，让用户更容易理解其当前所在的位置并能够快速返回上级页面

在 Vue 3 中，provide 和 inject 是用于组件间数据共享的 API，允许父组件向子组件传递数据而不需要通过 props 一层层传递provide：在父组件中定义，可以提供数据给其所有子孙组件该数据可以是任何类型（对象、数组、基本数据类型等）inject：在子组件中使用，用于接收来自祖先组件提供的数据通过 inject，子组件可以直接使用父组件提供的数据，而无需通过 props

createGlobalState 是 Vue 3 中一种管理全局状态的简便方式，通常用于管理多个组件间共享的状态由 @vueuse/core 提供的，允许创建一个响应式的全局状态，可以在任意组件中访问和更新

在 Vue 3 中，shallowReactive 是一种创建响应式对象的方法，主要用于避免深度嵌套对象的响应式代理与 reactive 不同，shallowReactive 仅对第一层属性进行响应式处理，而嵌套属性保持为普通对象

深入解析 JavaScript 中的 Object.defineProperty() 与 Object.defineProperties() 方法

Nodemon 深入解析与使用指南Nodemon 是一个强大的开发工具，用于监控 Node.js 应用程序中的文件变更，能自动重启应用，极大提高开发效率

全屏 APIdocument.documentElement.requestFullscreen()：请求全屏模式document.exitFullscreen()：退出全屏模式document.fullscreenElement：返回当前处于全屏状态的元素

Canvas API：一种用于在网页上绘制图形的 HTML 元素，使用 JavaScript 的 Canvas API 来进行绘制使用 getContext('2d') 方法获取 2D 绘图上下文，允许开发者绘制矩形、文本、图像等缩放和拖动：通过监听鼠标滚轮事件 (wheel) 可以实现缩放功能，使用 scale 来控制当前缩放比例鼠标按下、移动和松开事件实现了拖动功能，允许用户在 Canvas 上自由移动视图

这一类的时间点是因数据而异，所以定时任务不适用，需要前端表格自身数据到达之后去触发往下的数据多数结合自身实战代码的一个总结

Extraneous children found when component already has explicitly named default slot 原理分析