面试复盘7.0

1、前端的双击校验

前端双击防重复提交校验

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

原生JS实现

<button id="submitBtn">提交登录</button>

<script>
const btn = document.getElementById('submitBtn');
let isClicking = 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);
    });
});

// 模拟登录请求
function loginReq() {
    return new Promise(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'
const debounceClick = _.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

from flask import Flask
app = Flask(__name__)

@app.route("/")
def hello():
    return "Hello Flask"

2. FastAPI

from fastapi import FastAPI
app = FastAPI()

@app.get("/")
def hello():
    return "Hello FastAPI"

3. Django

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

---

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

选 Django 如果你：

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

选 Flask 如果你：

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

选 FastAPI 如果你：

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

---

五、最简单的选择口诀

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

---

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

1. 能使用 computed 就不要用 watch

   计算性能更好、代码更简洁。

2. computed 用来：算值

   拼接、筛选、计算、格式化展示。

3. watch 用来：做事

   发请求、定时器、操作DOM、执行复杂逻辑。

---

五、超级好记的口诀

• 算值用 computed
• 做事用 watch

---

4、vue2和vue3的区别

一、一句话总结

Vue3 是 Vue2 的全面升级版：更快、更小、更强、写法更舒服。

Vue2 已经停止维护（2023年底结束），现在新项目必须用 Vue3。

---

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

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

• Vue2：选项式 API（Options API）

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

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

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

  import { ref } from 'vue'
  const count = ref(0)
  const add = () => { 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

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

---

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

功能	Vue2	Vue3
推荐写法	选项式 API	组合式 API + script setup
响应式	defineProperty	Proxy
数据定义	data()	ref / reactive
根节点	只能 1 个	支持多个
打包体积	较大	更小
运行速度	较快	快很多
维护状态	停止维护	主流、长期支持

---