1、前端的双击校验前端双击防重复提交校验核心点击后锁定按钮倒计时解锁阻止短时间重复双击/连击请求原生JS实现buttonidsubmitBtn提交登录/buttonscriptconstbtndocument.getElementById(submitBtn);letisClickingfalse;// 点击锁btn.addEventListener(click,function(){// 锁定状态直接拦截if(isClicking)return;// 开启锁定isClickingtrue;this.disabledtrue;this.innerText提交中...;// 模拟接口请求loginReq().then(res{alert(登录成功);}).catch(err{alert(请求失败);}).finally((){// 2秒后解锁setTimeout((){isClickingfalse;this.disabledfalse;this.innerText提交登录;},2000);});});// 模拟登录请求functionloginReq(){returnnewPromise(resolvesetTimeout(resolve,1000));}/scriptVue 简写版template button clickhandleLogin :disabledloading {{ loading ? 提交中 : 登录 }} /button /template script setup import { ref } from vue const loading ref(false) const handleLogin async () { if (loading.value) return loading.value true try { // 调用后端登录接口 await loginApi() } finally { loading.value false } } // 模拟接口 const loginApi () new Promise(resolve setTimeout(resolve, 1000)) /scriptReact 简写版import { useState } from react function LoginBtn() { const [loading, setLoading] useState(false) const handleClick async () { if (loading) return setLoading(true) try { await loginApi() } finally { setLoading(false) } } return ( button onClick{handleClick} disabled{loading} {loading ? 提交中 : 登录} /button ) } const loginApi () new Promise(resolve setTimeout(resolve, 1000))关键要点全局布尔锁标记点击状态双击直接拦截按钮置灰禁用视觉反馈防止误点请求结束后才解除锁定异常场景也必解锁通用防抖兜底也可搭配lodash.debounce限制点击频次防抖函数兜底通用import_fromlodashconstdebounceClick_.debounce(handleLogin,1500,{leading:true,trailing:false})2、django和flask的fastapi的区别一句话总结Django大而全自带一切适合大型项目、后台管理、企业系统Flask轻量小巧自由灵活适合小项目、简单接口、学习练手FastAPI现代快速自动文档适合API接口、高并发、前后端分离一、核心区别最简单版1. Django全能型特点 batteries included自带电池自带ORM、admin后台、用户认证、表单、模板、路由、session、csrf优点不用装插件就能做完整网站开发快、安全、生态强缺点重、学习曲线稍陡、不够灵活适合电商、CMS、企业后台、博客、大型系统2. Flask轻量灵活型特点微型框架只给核心其他自己装自带只有路由 模板优点极简、自由、易上手缺点功能要自己装插件数据库、登录、权限…适合小工具、小接口、个人项目、学习Python Web3. FastAPI现代高性能API型特点专为API而生速度极快自动生成接口文档自带异步支持、数据验证、自动OpenAPI文档优点极快接近Go/Node、自动文档、类型提示、异步缺点不能做传统网页只适合接口、生态比Django小适合前后端分离、微服务、高并发接口、AI服务接口二、性能速度对比由快到慢FastAPI异步→ 最快Flask同步Django同步→ 功能最全但稍慢三、代码对比最简单的接口1. FlaskfromflaskimportFlask appFlask(__name__)app.route(/)defhello():returnHello Flask2. FastAPIfromfastapiimportFastAPI appFastAPI()app.get(/)defhello():returnHello FastAPI3. Django# 要创建项目、配置、路由…代码量明显更多四、你该怎么选最实用建议选 Django 如果你要做完整网站带后台管理、用户、登录、权限想快速开发不想自己组装插件做企业系统、电商、管理后台选 Flask 如果你做小项目、小接口喜欢自由灵活想学习 Web 原理选 FastAPI 如果你只做API 接口前后端分离想要自动接口文档追求高性能、高并发做AI模型接口、数据分析接口五、最简单的选择口诀做大系统 → Django做小项目 → Flask做API接口 → FastAPI3、前端vue中computed和watch的区别一句话核心区别computed计算属性依赖多个值算出一个新值只读、缓存、简洁watch监听器监听一个值值变了做一件事执行逻辑、异步、复杂操作二、超清晰对比特性computed计算属性watch监听作用计算出一个新值监听值变化执行逻辑依赖依赖多个数据监听一个数据缓存有缓存依赖不变不重新计算无缓存一变就执行异步不支持异步支持异步定时器/接口场景数据展示、格式化、筛选执行操作、异步请求、复杂逻辑写法像变量一样使用像函数一样执行三、最简单代码示例1. computed计算属性场景姓名拼接、数据筛选、价格计算template div{{ fullName }}/div /template script setup import { ref, computed } from vue const firstName ref(张) const lastName ref(三) // 依赖 firstName lastName自动计算出新值 fullName const fullName computed(() { return firstName.value lastName.value }) /script特点有缓存依赖不变不会重复计算必须return一个结果像变量一样使用{{ fullName }}2. watch监听场景搜索框请求接口、表单变化做操作、值变化执行逻辑script setup import { ref, watch } from vue const keyword ref() // 监听 keyword变了就执行逻辑 watch(keyword, (newVal) { // 可以做异步 console.log(关键词变了, newVal) // 可以发请求 // axios.get(...) }) /script特点监听一个变量可以执行异步、复杂逻辑不需要 return四、你最该记住的 3 条规则能使用 computed 就不要用 watch计算性能更好、代码更简洁。computed 用来算值拼接、筛选、计算、格式化展示。watch 用来做事发请求、定时器、操作DOM、执行复杂逻辑。五、超级好记的口诀算值用 computed做事用 watch4、vue2和vue3的区别一、一句话总结Vue3 是 Vue2 的全面升级版更快、更小、更强、写法更舒服。Vue2 已经停止维护2023年底结束现在新项目必须用 Vue3。二、最核心的 6 大区别必看1. 写法风格完全不同最直观Vue2选项式 APIOptions APIexportdefault{data(){return{count:0}},methods:{add(){}},computed:{},watch:{}}缺点代码分散功能多了很难维护。Vue3组合式 APIComposition API推荐script setupimport{ref}fromvueconstcountref(0)constadd(){count.value}优点代码按功能聚合维护超级方便。2. 响应式原理不一样底层Vue2用Object.defineProperty缺陷无法监听新增/删除属性、数组下标修改。Vue3用Proxy代理对象优势完美监听所有对象/数组操作无任何缺陷。3. 数据定义方式不同Vue2data() { return {} }Vue3ref/reactive你刚才问的ref就是 Vue3 最核心的写法。4. 性能大幅提升渲染速度快 55%打包体积小 40%内存占用更少支持Fragment模板可以多个根节点template !-- Vue3 支持 -- div/div div/div /template5. 生命周期有变化Vue2 → Vue3beforeCreate → 不用了 created → 不用了 beforeMount → onBeforeMount mounted → onMounted beforeUpdate → onBeforeUpdate updated → onUpdated beforeDestroy → onBeforeUnmount destroyed → onUnmounted6. 全局配置方式不同Vue2Vue.prototype.$httpaxiosVue3constappcreateApp(App)app.config.globalProperties.$httpaxios三、快速对比表一看就懂功能Vue2Vue3推荐写法选项式 API组合式 API script setup响应式definePropertyProxy数据定义data()ref / reactive根节点只能 1 个支持多个打包体积较大更小运行速度较快快很多维护状态停止维护主流、长期支持
