面试复盘7.0

1、前端的双击校验

前端双击防重复提交校验

核心：点击后锁定按钮，倒计时解锁，阻止短时间重复双击/连击请求

原生JS实现

<buttonid="submitBtn">提交登录</button><script>constbtn=document.getElementById('submitBtn');letisClicking=false;// 点击锁btn.addEventListener('click',function(){// 锁定状态直接拦截if(isClicking)return;// 开启锁定isClicking=true;this.disabled=true;this.innerText='提交中...';// 模拟接口请求loginReq().then(res=>{alert('登录成功');}).catch(err=>{alert('请求失败');}).finally(()=>{// 2秒后解锁setTimeout(()=>{isClicking=false;this.disabled=false;this.innerText='提交登录';},2000);});});// 模拟登录请求functionloginReq(){returnnewPromise(resolve=>setTimeout(resolve,1000));}</script>

Vue 简写版

<template> <button @click="handleLogin" :disabled="loading"> {{ 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)) </script>

React 简写版

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))

关键要点

1. 全局布尔锁标记点击状态，双击直接拦截
2. 按钮置灰禁用，视觉反馈防止误点
3. 请求结束后才解除锁定，异常场景也必解锁
4. 通用防抖兜底：也可搭配lodash.debounce限制点击频次

防抖函数兜底（通用）

import_from'lodash'constdebounceClick=_.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 Web

3. FastAPI（现代高性能API型）

特点：专为API而生，速度极快，自动生成接口文档

• 自带：异步支持、数据验证、自动OpenAPI文档
• 优点：极快（接近Go/Node）、自动文档、类型提示、异步
• 缺点：不能做传统网页（只适合接口）、生态比Django小
• 适合：前后端分离、微服务、高并发接口、AI服务接口

二、性能速度对比（由快到慢）

1. FastAPI（异步）→ 最快
2. Flask（同步）
3. Django（同步）→ 功能最全但稍慢

三、代码对比（最简单的接口）

1. Flask

fromflaskimportFlask app=Flask(__name__)@app.route("/")defhello():return"Hello Flask"

2. FastAPI

fromfastapiimportFastAPI app=FastAPI()@app.get("/")defhello():return"Hello FastAPI"

3. Django

# 要创建项目、配置、路由…代码量明显更多

四、你该怎么选？（最实用建议）

选 Django 如果你：

• 要做完整网站（带后台管理、用户、登录、权限）
• 想快速开发，不想自己组装插件
• 做企业系统、电商、管理后台

选 Flask 如果你：

• 做小项目、小接口
• 喜欢自由灵活
• 想学习 Web 原理

选 FastAPI 如果你：

• 只做API 接口（前后端分离）
• 想要自动接口文档
• 追求高性能、高并发
• 做AI模型接口、数据分析接口

五、最简单的选择口诀

• 做大系统 → Django
• 做小项目 → Flask
• 做API接口 → FastAPI

3、前端vue中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 条规则

1. 能使用 computed 就不要用 watch
   计算性能更好、代码更简洁。

2. computed 用来：算值
   拼接、筛选、计算、格式化展示。

3. watch 用来：做事
   发请求、定时器、操作DOM、执行复杂逻辑。

五、超级好记的口诀

• 算值用 computed
• 做事用 watch

4、vue2和vue3的区别

一、一句话总结

Vue3 是 Vue2 的全面升级版：更快、更小、更强、写法更舒服。
Vue2 已经停止维护（2023年底结束），现在新项目必须用 Vue3。

二、最核心的 6 大区别（必看）

1. 写法风格完全不同（最直观）

• Vue2：选项式 API（Options API）

  exportdefault{data(){return{count:0}},methods:{add(){}},computed:{},watch:{}}

  缺点：代码分散，功能多了很难维护。

• Vue3：组合式 API（Composition API），推荐<script setup>

  import{ref}from'vue'constcount=ref(0)constadd=()=>{count.value++}

  优点：代码按功能聚合，维护超级方便。

2. 响应式原理不一样（底层）

• Vue2：用Object.defineProperty
  缺陷：无法监听新增/删除属性、数组下标修改。

• Vue3：用Proxy代理对象
  优势：完美监听所有对象/数组操作，无任何缺陷。

3. 数据定义方式不同

• Vue2：data() { return {} }
• Vue3：ref/reactive
  你刚才问的ref就是 Vue3 最核心的写法。

4. 性能大幅提升

• 渲染速度快 55%
• 打包体积小 40%
• 内存占用更少
• 支持Fragment（模板可以多个根节点）

  <template> <!-- Vue3 支持 --> <div></div> <div></div> </template>

5. 生命周期（有变化）

Vue2 → Vue3

beforeCreate → 不用了 created → 不用了 beforeMount → onBeforeMount mounted → onMounted beforeUpdate → onBeforeUpdate updated → onUpdated beforeDestroy → onBeforeUnmount destroyed → onUnmounted

6. 全局配置方式不同

• Vue2

  Vue.prototype.$http=axios

• Vue3

  constapp=createApp(App)app.config.globalProperties.$http=axios

三、快速对比表（一看就懂）