2024年前端最新Vue中使用防抖和节流_vue防抖代码，2024最新前端面经分享

js基础

1)对js的理解？
2)请说出以下代码输出的值？
3)把以下代码，改写成依次输出0-9
4)如何区分数组对象，普通对象，函数对象
5)面向对象、面向过程
6)面向对象的三大基本特性
7)XML和JSON的区别？
8)Web Worker 和webSocket？
9)Javascript垃圾回收方法？
10)new操作符具体干了什么呢？
11)js延迟加载的方式有哪些？
12)WEB应用从服务器主动推送Data到客户端有那些方式？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

文章目录

• 防抖
• 节流

防抖

防抖：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间
应用场景： 登陆，发短信（倒计时），提交请求等，主要是为了防止用户点击过快。

在vue中为了方便管理，在utils文件夹下面新建一个公共方法Debounce.js(名字随便起)

Debounce.js的代码

export default function(fn, delay = 1000) {
    let timer
    return function(...args) {
        clearInterval(timer)
        timer = setTimeout(() => {
            fn.call(this, ...args)
        }, delay)
    }
}

在需要的页面中用Import引入
vue页面代码

<template>
  <div class="about">
    <button @click="clickeMe">点击我</button>
  </div>
</template>
<script>
import debounce from "@/utils/Debounce"
export default {
  name: 'Home',
  components: {
  },
  methods:{
      clickeMe: debounce(function (){ 
         console.log("我被点击了")  //这里写需要的代码 
      },500) 
  }
}
</script>
vue3写法
<script setup>
import debounce from "@/utils/Debounce"   
const clickeMe = debounce(async() => {
  console.log( "await我被点击了");//这里写需要的代码 
},1000); 

</script>

最后看效果截图

效果如图点击了五次只执行了一次~~

框架相关

原生JS虽能实现绝大部分功能，但要么就是过于繁琐，要么就是存在缺陷，故绝大多数开发者都会首选框架开发方案。现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。

在框架方面，生命周期、钩子函数、虚拟DOM这些基本知识是必须要掌握的，在学习的过程可以结合框架的官方文档

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

Vue框架

知识要点：
1. vue-cli工程
2. vue核心知识点
3. vue-router
4. vuex
5. http请求
6. UI样式
7. 常用功能
8. MVVM设计模式

React框架

知识要点：
1. 基本知识
2. React 组件
3. React Redux
4. React 路由

框架**

知识要点：
1. 基本知识
2. React 组件
3. React Redux
4. React 路由

[外链图片转存中…(img-BEWe5hGn-1715015984726)]