作为一名大三前端学习者在基于 Vue3 开发道路病害检测系统的过程中我越发觉得框架只是工具JS 基础才是真正的底气。这篇文章就把我在真实项目里高频用到、又特别关键的 JS 知识点整理出来附带实战代码和面试思路既是复盘也希望帮到同样在学前端的同学。一、作用域与闭包按钮防抖、防重复提交在做表单提交、列表搜索、病害数据查询时按钮很容易被重复点击导致重复请求接口。这时候就用到防抖底层就是闭包。1. 知识点闭包内层函数可以访问并保留外层函数的变量块级作用域let/const避免变量污染2. 项目实战代码javascript// utils/debounce.js export function debounce(fn, delay 800) { let timer null; return (...args) { if (timer) clearTimeout(timer); timer setTimeout(() { fn.apply(this, args); }, delay); }; }在 Vue3 组件里使用vuetemplate button clickhandleQuery查询病害数据/button /template script setup import { debounce } from /utils/debounce; // 数据查询防抖避免频繁触发接口 const handleQuery debounce(() { console.log(请求道路病害数据...); // 这里调用接口获取列表数据 }, 800); /script3. 面试点闭包可能造成内存泄漏所以在组件销毁时要清理定时器jsimport { onUnmounted } from vue; onUnmounted(() { timer null; });二、原型与原型链全局挂载工具方法项目里很多地方都要用到时间格式化、文件处理等工具如果每个组件都 import 太麻烦我会把方法全局挂载。1. 知识点实例会继承原型上的方法全局挂载后所有组件都能直接用2. 项目实战javascript// main.js import { createApp } from vue; import App from ./App.vue; import { formatDate } from /utils/date; const app createApp(App); app.config.globalProperties.$formatDate formatDate; app.mount(#app);组件里直接用js// 格式化病害检测时间 const time $formatDate(item.detectTime);3. 面试点Vue 组件方法不要用箭头函数因为箭头函数没有自己的 this会拿不到组件实例。三、Promise async/await接口请求必用我的项目里大量接口请求登录、获取病害列表、上传图片、提交结果全都靠 Promise 和 async/await。1. 知识点Promise 解决回调地狱async/await 让异步代码像同步一样好读2. 项目实战javascript// 获取病害数据async/await 写法 const getDiseaseList async () { try { const res await $axios.get(/api/disease/list, { params: { page: 1, size: 10 } }); tableData.value res.data; } catch (err) { ElMessage.error(数据加载失败); } };并发请求比如同时拿用户信息 统计数据jsconst [userInfo, statistics] await Promise.all([ $axios.get(/api/user/info), $axios.get(/api/disease/statistics) ]);3. 面试点Promise.all全部成功才成功一个失败就整体失败async/await 代码更清晰、便于错误处理四、事件循环 nextTickDOM 更新后操作修改数据后DOM 不会立刻更新。比如我要操作表格、图表、弹窗里的 DOM必须用nextTick。1. 知识点同步任务 → 微任务 → 宏任务nextTick是微任务在 DOM 更新后执行2. 项目实战vuetemplate div refchartRef{{ data }}/div /template script setup import { ref, nextTick } from vue; const data ref(); const chartRef ref(null); const updateData async () { data.value 新数据; // 此时 DOM 还没更 await nextTick(); // 现在可以安全操作 DOM 或初始化图表 console.log(chartRef.value); }; /script3. 面试题必背jsconsole.log(1) setTimeout(()console.log(2),0) Promise.resolve().then(()console.log(3)) nextTick(()console.log(4))输出顺序1 → 3 → 4 → 2五、深浅拷贝避免改坏原数据在做病害信息编辑弹窗时我需要把一行数据复制到表单里。如果直接赋值改表单会同步改列表这就必须深拷贝。1. 知识点浅拷贝只拷贝第一层引用类型共用地址深拷贝完全独立修改不影响原对象2. 项目实战代码javascript// utils/clone.js export function deepClone(obj, map new WeakMap()) { if (obj null || typeof obj ! object) return obj; if (map.has(obj)) return map.get(obj); const res Array.isArray(obj) ? [] : {}; map.set(obj, res); for (const key in obj) { if (obj.hasOwnProperty(key)) { res[key] deepClone(obj[key], map); } } return res; }使用js// 编辑数据时深拷贝防止污染原列表 const formData ref(deepClone(row));3. 面试点Vue 响应式是基于引用类型的不做深拷贝会出现 “牵一发而动全身” 的 BUG。总结这段时间做 Vue3 项目我最大的感受防抖、接口请求、数据处理、DOM 操作全是 JS 基础框架用得越熟练越能体会到 JS 核心的重要性把项目里的知识点整理成博客既是巩固也是面试素材后面我会继续更新Vue3 项目实战、前端面试题、项目踩坑、工程化相关内容欢迎关注
《我在 Vue 项目中用到的 JS 核心知识点》
发布时间：2026/7/16 18:45:27
作为一名大三前端学习者在基于 Vue3 开发道路病害检测系统的过程中我越发觉得框架只是工具JS 基础才是真正的底气。这篇文章就把我在真实项目里高频用到、又特别关键的 JS 知识点整理出来附带实战代码和面试思路既是复盘也希望帮到同样在学前端的同学。一、作用域与闭包按钮防抖、防重复提交在做表单提交、列表搜索、病害数据查询时按钮很容易被重复点击导致重复请求接口。这时候就用到防抖底层就是闭包。1. 知识点闭包内层函数可以访问并保留外层函数的变量块级作用域let/const避免变量污染2. 项目实战代码javascript// utils/debounce.js export function debounce(fn, delay 800) { let timer null; return (...args) { if (timer) clearTimeout(timer); timer setTimeout(() { fn.apply(this, args); }, delay); }; }在 Vue3 组件里使用vuetemplate button clickhandleQuery查询病害数据/button /template script setup import { debounce } from /utils/debounce; // 数据查询防抖避免频繁触发接口 const handleQuery debounce(() { console.log(请求道路病害数据...); // 这里调用接口获取列表数据 }, 800); /script3. 面试点闭包可能造成内存泄漏所以在组件销毁时要清理定时器jsimport { onUnmounted } from vue; onUnmounted(() { timer null; });二、原型与原型链全局挂载工具方法项目里很多地方都要用到时间格式化、文件处理等工具如果每个组件都 import 太麻烦我会把方法全局挂载。1. 知识点实例会继承原型上的方法全局挂载后所有组件都能直接用2. 项目实战javascript// main.js import { createApp } from vue; import App from ./App.vue; import { formatDate } from /utils/date; const app createApp(App); app.config.globalProperties.$formatDate formatDate; app.mount(#app);组件里直接用js// 格式化病害检测时间 const time $formatDate(item.detectTime);3. 面试点Vue 组件方法不要用箭头函数因为箭头函数没有自己的 this会拿不到组件实例。三、Promise async/await接口请求必用我的项目里大量接口请求登录、获取病害列表、上传图片、提交结果全都靠 Promise 和 async/await。1. 知识点Promise 解决回调地狱async/await 让异步代码像同步一样好读2. 项目实战javascript// 获取病害数据async/await 写法 const getDiseaseList async () { try { const res await $axios.get(/api/disease/list, { params: { page: 1, size: 10 } }); tableData.value res.data; } catch (err) { ElMessage.error(数据加载失败); } };并发请求比如同时拿用户信息 统计数据jsconst [userInfo, statistics] await Promise.all([ $axios.get(/api/user/info), $axios.get(/api/disease/statistics) ]);3. 面试点Promise.all全部成功才成功一个失败就整体失败async/await 代码更清晰、便于错误处理四、事件循环 nextTickDOM 更新后操作修改数据后DOM 不会立刻更新。比如我要操作表格、图表、弹窗里的 DOM必须用nextTick。1. 知识点同步任务 → 微任务 → 宏任务nextTick是微任务在 DOM 更新后执行2. 项目实战vuetemplate div refchartRef{{ data }}/div /template script setup import { ref, nextTick } from vue; const data ref(); const chartRef ref(null); const updateData async () { data.value 新数据; // 此时 DOM 还没更 await nextTick(); // 现在可以安全操作 DOM 或初始化图表 console.log(chartRef.value); }; /script3. 面试题必背jsconsole.log(1) setTimeout(()console.log(2),0) Promise.resolve().then(()console.log(3)) nextTick(()console.log(4))输出顺序1 → 3 → 4 → 2五、深浅拷贝避免改坏原数据在做病害信息编辑弹窗时我需要把一行数据复制到表单里。如果直接赋值改表单会同步改列表这就必须深拷贝。1. 知识点浅拷贝只拷贝第一层引用类型共用地址深拷贝完全独立修改不影响原对象2. 项目实战代码javascript// utils/clone.js export function deepClone(obj, map new WeakMap()) { if (obj null || typeof obj ! object) return obj; if (map.has(obj)) return map.get(obj); const res Array.isArray(obj) ? [] : {}; map.set(obj, res); for (const key in obj) { if (obj.hasOwnProperty(key)) { res[key] deepClone(obj[key], map); } } return res; }使用js// 编辑数据时深拷贝防止污染原列表 const formData ref(deepClone(row));3. 面试点Vue 响应式是基于引用类型的不做深拷贝会出现 “牵一发而动全身” 的 BUG。总结这段时间做 Vue3 项目我最大的感受防抖、接口请求、数据处理、DOM 操作全是 JS 基础框架用得越熟练越能体会到 JS 核心的重要性把项目里的知识点整理成博客既是巩固也是面试素材后面我会继续更新Vue3 项目实战、前端面试题、项目踩坑、工程化相关内容欢迎关注
重载到STL算法与Lambda表达式)
