2401_83539958的博客

原创 # Vue 3 `＜script setup＞` 中变量声明的正确姿势：何时必须使用 `ref()`？

Vue 3 <script setup> 中必须使用 ref() 包装所有需要修改的变量，否则会报错。这是 Vue 3 的有意设计，防止意外修改、优化性能并明确意图。错误示例展示直接修改变量会报错，正确做法是使用 ref() 并通过 .value 修改。实际开发中，需要动态修改或模板使用的数据必须用 ref()，而常量和函数则不需要。常见误区包括认为不在模板使用就不用 ref 或使用 let 可修改等。总结：要修改就用 ref()，不修改则用普通变量。

原创 别名路径的知识点

摘要： @路径是uni-app官方推荐的别名路径，既非相对路径也非绝对路径，属于第三种路径引用方式。相对路径易断裂，绝对路径在小程序中不兼容，而别名路径通过构建工具预设映射到src目录，具有跨平台兼容性、路径稳定性和高可读性。uni-app默认项目模板和文档均推荐使用@，底层由Vite/Webpack支持，无需额外配置。其核心优势包括IDE智能提示、维护成本低，避免相对路径嵌套问题。常见误区如认为@是uni-app自创或绝对路径均不准确，实际为Vue生态标准实践。结论：@是工程化最佳实践，推荐作为uni-a

原创 uni-.scss的文件里定义样式变量

原创 微信开发者工具从 2022 年起引入的「无依赖文件过滤」机制** 导致的典型错误。

微信开发者工具因「无依赖文件过滤」机制误删uni-app组件（如uni-dateformat），导致报错。解决方案： 推荐：关闭过滤功能（修改project.config.json，添加ignoreDevUnusedFiles:false） 在页面显式import组件 在main.js全局注册组件 原因：新版微信工具会过滤无静态引用的文件，而uni-app组件是动态注册的。修改配置后重启工具即可解决。建议开发时关闭过滤，上线前再开启优化包体积。

原创 Sass & SCSS 核心概念梳理

本文系统梳理了Sass和SCSS的核心概念：Sass是CSS预处理器工具，SCSS是其主流语法格式，完全兼容原生CSS。文章详细介绍了Sass的核心价值，包括变量复用、样式封装、嵌套语法和逻辑控制等编程特性，能显著提升开发效率。同时提供了环境安装、新版规范(@use替代@import)等实用建议，帮助开发者避免常见陷阱。理解"Sass是工具，SCSS是语法"这一核心关系，掌握关键特性，即可将CSS代码从静态样式升级为结构化程序。

原创 将新项目从本地推送到远程仓库，并使用 `master` 作为主分支

本文提供了在Git版本管理中强制使用master作为主分支的完整操作流程。首先通过git init初始化本地仓库，然后创建并切换到master分支，添加文件后提交初始版本。接着关联远程仓库并使用git push -u origin master推送代码。文章特别强调认证时需使用访问令牌而非密码，并指出即使推送成功，仍需在Gitee后台手动将默认分支改为master。最后给出了完整的一键复制命令序列和常见问题解决方案，帮助开发者顺利使用master分支进行项目管理。

原创 小程序页面跳转五种方式详解

本文详细解析小程序开发中5种页面跳转API的核心区别：1）wx.navigateTo保留当前页可返回；2）wx.redirectTo关闭当前页不可返回；3）wx.navigateBack返回销毁页面；4）wx.switchTab清除非tab页跳转底部导航；5）wx.reLaunch销毁所有页面重启跳转。通过对比页面销毁情况、返回机制和使用场景，总结出记忆口诀帮助开发者快速掌握。每种跳转方式对应不同的页面生命周期触发和页面栈处理逻辑，开发者应根据具体需求选择合适API。

原创 绝对路径 vs 相对路径

摘要：本文系统梳理了绝对路径与相对路径的核心区别。绝对路径从系统根目录出发，地址固定（如D:\或http://开头），而相对路径依赖当前位置（使用./、../或纯文件名）。路径分隔符方面，Windows本地可用\，但编程/网页开发应统一使用/以避免兼容问题。特别指出网页中的/开头路径属于根相对路径而非绝对路径。使用建议：外部资源用绝对路径，项目内部资源优先用相对路径。记忆口诀：绝对路径"从原点出发"，相对路径"从脚下出发"，分隔符统一用/。

原创 Flex 属性核心知识点整理

flex是flex-grow（放大比例）、（缩小比例）、flex-basis。

原创 前端跨域问题详解

摘要：本文详细解析了前端跨域问题的本质与解决方案。跨域源于浏览器的同源策略，仅限制协议、域名、端口不同的请求。核心解决方案包括：1）CORS（主流方案），通过服务器配置响应头实现跨域访问，分为简单请求和预检请求；2）JSONP（兼容方案），利用script标签特性实现GET请求跨域；3）代理服务器方案，适用于不可修改的第三方API。文章还提供了不同场景下的方案选择策略，并强调CORS是现代项目的首选方案，JSONP仅作为老项目兼容的备选方案。

原创 uni-app 开发三个工具的关系

本文介绍了uni-app开发的三个核心工具及其协作流程。HBuilderX是开发IDE，负责代码编写和跨平台编译；微信开发者工具用于小程序运行调试和代码上传；微信公众平台则处理审核发布和管理。完整流程为：HBuilderX编写编译→微信开发者工具调试上传→公众平台审核发布。三者各司其职，共同完成uni-app小程序开发全流程。

原创 Vue 响应式无限递归问题总结

核心问题：Vue 响应式对象在特定情况下会触发无限递归解决方案：使用 JSON 序列化将响应式对象转换为普通对象关键点响应式对象包含特殊的 getter/setter直接访问可能触发无限递归JSON 序列化可以移除响应式特性普通对象不会触发 Vue 的响应式系统这是一个常见的 Vue 响应式系统问题，通过移除响应式引用可以有效解决。

原创 vue2项目改造为vue3遇到的问题以及解决办法

本文总结了Vue 2项目升级到Vue 3过程中的主要问题和解决方案。关键改造包括：1) 使用Composition API替代Options API；2) 采用Pinia替换Vuex进行状态管理；3) 更新Element UI到Element Plus；4) 修正模板语法差异。重点解决了布局组件改造、菜单显示、头像图标、登录状态处理等问题，涉及路由拦截、API请求、状态清除等核心功能。改造后项目保持原有功能，符合Vue 3规范，无语法错误，所有数据均通过API动态获取。

原创 vue3的ref响应式，取值的时候自动补全value的设置，以及两种修改方式

直接修改设置，底层也是修改json文件，但是直接修改json比较麻烦，不好找，还得读配置，所以一般直接修改设置就好。输入dot value，勾选自动补全，注意自动补全需要提前下载Vue (Official)插件。

原创 路由的两种传参方式

路由传参主要有两种方式：1) params传参，需配置路由占位符，参数显示在路径上；2) query传参，无需配置路由，参数以?&拼接在URL后。props是参数接收方式，包含三种写法：直接接收params、静态写死值、动态返回params或query。核心区分：params/query决定如何传参，props决定如何接收，地址栏仅显示传参方式。

原创 vue3的组件间通信ref子组件需要把父组件要的ref数据开放

Vue3相比Vue2在组件数据暴露方面更加严谨和安全。Vue2默认将所有组件内部数据(methods、data等)通过$refs完全暴露给父组件，存在安全和规范问题。而Vue3在<script setup>中默认所有变量和函数都是私有的，父组件无法直接访问。需要通过defineExpose()明确指定要暴露的数据，实现更安全的组件封装。这种设计使组件更独立规范，体现了Vue3更工程化的改进方向。

原创 别人在远端新建了一个分支，但是我本地搜不到这个分支，解决办法

摘要： 解决本地无法获取远端新建分支的问题。当远端创建了新分支但本地无法搜索到时，只需执行git fetch命令即可同步远端分支信息到本地仓库。这一操作能够更新本地对远端分支的追踪，使新创建的分支在本地可见。该方法简单有效，是解决此类分支同步问题的标准操作。

原创 setup() 函数与语法糖

Vue3的<script setup>语法糖相比传统setup()函数具有显著优势。传统写法需要手动return变量、注册组件，代码冗余；而<script setup>自动处理这些操作，无需return即可在模板使用变量，直接导入组件即可使用。两者功能相同，但<script setup>通过defineProps/defineEmits等API简化了props和emit的使用，代码更简洁。目前官方推荐使用<script setup>，它相当于自动挡版本，极大提

原创 ref和reactive

Vue3响应式数据管理核心：ref和reactive对比指南。ref是万能响应式盒子，支持基本类型和对象，JS中需用.value访问，模板自动解包；reactive仅适用于对象/数组，直接修改属性即可。关键区别在于ref允许整体替换值而保持响应性，reactive则不行。注意解构会丢失响应性，需用toRefs转换。使用建议：基本类型用ref，对象且不需整体替换用reactive，需解构时用toRefs。ref底层实际通过reactive实现，为基本类型添加对象包装使其可被代理。

原创 【无标题】

var声明问题摘要 var声明存在三个主要问题：1)函数作用域特性导致变量在语句外可访问；2)允许重复声明变量，容易导致变量覆盖；3)在循环中使用var声明变量配合异步回调时，由于变量提升和共享作用域，所有回调都会引用循环结束后的最终变量值。这些问题使得var在复杂代码中容易引发意外行为，建议使用let/const替代。

原创 邀请他人管理仓库的链接地址

本文介绍了如何邀请开发者加入仓库管理的操作流程：首先进入个人仓库页面，选择目标仓库后进入成员管理界面，定位到开发者选项，点击"邀请用户"功能并复制生成的邀请链接即可完成操作。文中通过8张配图详细展示了每个操作步骤的界面截图，包括仓库选择、成员管理、开发者权限设置和链接生成等关键环节，为用户提供了直观的操作指引。该流程适用于需要为项目仓库添加开发人员协作权限的场景。

原创 从0开始创建一个Vue3项目

摘要：创建Vue3项目时，使用vite方式需注意node版本兼容问题。当node版本非最新时（如18.20.8），需指定匹配的vite大版本（如5.0.0）以避免创建失败。成功创建项目后，还需手动执行npm install安装依赖才能运行。相比传统webpack方式，vite创建的项目具有更快的构建速度，但需注意版本适配问题。（150字）

原创 Vue 3 中的 setup()

Vue 3 中的 setup() 是什么？它的执行时机是什么？能做什么？bilibiliVue3学习地址VUE3中，reactive()和ref()的区别10分钟讲清楚深入解析 setup语法糖（巨好用）

原创 git推送代码到gitee，需要身份验证窗口，但是输入gitee账号密码却验证失败

Gitee身份验证失败的解决方法：自2021年起Gitee已改用个人访问令牌(PAT)认证，不再支持账号密码直接验证。当出现认证窗口时，需要前往Gitee账户的「设置」→「安全设置」→「个人访问令牌」生成具有仓库权限的Token，然后在密码框输入该Token而非登录密码。建议将Token设置为永久有效并妥善保存，以便后续验证使用。此方法可解决因使用密码验证导致的认证失败问题。

原创 resize.js

这段代码的核心作用和关键点：自适应调整：监听浏览器窗口 resize 事件，结合防抖优化性能，让图表自动适配窗口大小。主动更新：组件 DOM 更新后主动触发图表 resize，保证数据变化时图表尺寸正确。资源清理：组件销毁时移除事件监听、销毁图表实例，避免内存泄漏（这是前端图表开发的关键最佳实践）。简单来说，这是 Vue 中处理图表自适应的 “标准写法”，既保证了交互体验（不卡顿），又避免了内存泄漏问题。

原创 分析分析Vue与VueComponent的关系

文章]()

原创 loadingUI组件绑定的一个特例

组件loading链接

原创 nvm,node,npm关系

NVM管Node，Node定NPM，NPM管包，包的版本匹配项目，最终由Node版本决定项目能否正常运行，开发的核心是「根据项目选Node版本，通过NVM实现版本切换，让Node、NPM、项目包三者版本兼容」。

原创 关于增删改的样式的小细节

范围这里要求value是个数组，这里先判断orm.contractStartDate，form.contractEndDate是否存在，然后存在放在数组里，否则返回一个空数组，同时在通过Input,收集用户输入的日期数据，返回是也是一个数组，按照对应的属性位置，分别存起来。指定要读的属性，比如label: ‘name’,，这是指原来读的是label属性，现在不是了，是读name属性。解决v-if销毁el-col,不能自动补位的问题 class="flex-wrap"绑定的是value的值。

原创 add组件增删改的表单处理

当点击编辑的时候会把row传给ctx.record，然后add组件通过组件标签的:record="ctx.record"，会得到这个值，然后isEdit的返回结果为true,下面的计算属性就会执行编辑相关的操作，点击新增的时候，没有row，这个ctx.record为null,所以record.id为undefied,这个isEdit返回结果为false,执行：后的操作。加了这个属性组件创建了就会一直显示，这里配合下面的V-If来控制它的显隐，组件创建就显示，组件销毁，它也就没有了。- 比较运算符 (!

原创 员工表格api接口的请求封装

【代码】员工表格api接口的请求封装。

原创 ctx 上下文对象控制新增 / 编辑表单显示隐藏的逻辑

此时 Add 组件显示，且 :record=“ctx.record” 传递的是 null，子组件可识别为「新增模式」，展示空白表单。Add 组件显示，且接收了当前行的完整数据，子组件可识别为「编辑模式」，将 record 中的数据回显到表单对应字段。点击子组件的关闭按钮时，触发 @close=“handleClose”，重置上下文状态，表单隐藏且数据清空。

原创 关于get和post请求

接口文档一般都会明确说明该用哪种传参方式，这些参数的拼接、封装这些底层的操作，axios内部都会自动处理好，不用我们操心，只要记住GET对应params（或直接拼路径）、POST对应data传参就行。GET请求分两种传参方式，一种是用params传参，axios会自动把params里的参数处理成?key=value的形式，拼到请求路径后面，不用自己手动拼接；还有一种是路径传参，比如删除接口需要传ID的时候，直接把动态ID拼在路径后面，格式就是路径/ID，这种情况就不用params传参了。

原创 try/catch+async/await与Promise.then对比

简单说，Promise.then不是没好处，但仅适用于无依赖的简单请求；async/await天生比.then更优，配合工具类封装后，异步代码写起来会特别顺畅，完全不用纠结错误拦截和嵌套的问题。异步请求处理核心知识点。

原创 Promise.all同时发出三个异步请求

还有这个Promise.all的好处是，这三个请求是互不关联的，它可以同时发出这三个请求，这三个请求的几乎就是同时执行的，就不会像分开的await那样，上个请求完才会执行下一个，缩短了请求时间。首先第一步把loading.value设为ture说明正在加载中，然后通过Promise.all同时调用三个请求，等待全部请求完成后，才会执行，关闭加载状态，说明数据获取完成了，这里的配合awit to那个工具函数使用的，只会返回一个成功的数组，没有失败的情况所以不需要try catch包一下。

原创 地图快速上手

✅ 核心原因：高德地图 JS API 在加载时会立即读取这个全局配置📌 执行顺序是关键： 你在 HTML 中先定义 window._AMapSecurityConfig然后才加载高德地图 SDK 在初始化时，会立刻从 window 上读取 securityJsCode如果没找到，就会报错：“安全密钥未配置” 或 “Invalid JsCode”🔥 这个过程发生在 SDK 加载的瞬间，比 Vue、React 等框架启动还要早！

原创 封装请求​

需要params传参数。

原创 ECharts 初始化代码为什么写在 mounted 生命周期钩子中,以及快速了解配置项文章

DOM 元素必须存在 ：容器尺寸必须确定 ：初始化时机最佳 ：第三方库集成标准 ：

原创 从远端服务器请求数据，并且完善员工管理列表

里面变量值换为真实目标服务器地址。

原创 跨域问题及Vue项目中本地/线上解决方法核心总结

跨域问题的核心是浏览器的同源策略，即协议、域名、端口三者不一致时，前端直接请求后端接口会被拦截，代理服务器是解决跨域的核心方案，核心原理是让代理服务器与前端项目地址同源，绕开浏览器的同源校验，再由代理服务器转发请求到真实后端接口（服务器间请求不受同源策略限制）。代理服务器是解决前端跨域的核心方案，核心原理是让代理服务器地址与浏览器中前端项目地址保持同源，绕开浏览器同源策略拦截；前端先请求同源的代理服务器，再由代理服务器转发请求到真实后端接口（服务器间请求不受同源策略限制），以此实现跨域通信。