当用户连续点击多次同一个按钮时，最后一次点击之后，过小段时间后才发起一次请求。

原理：每次调用方法后都产生一个定时器，定时器结束以后再发请求，如果重复调用方法，就取消当前的定时器，创建新的定时器，等结束后再发请求。

工作当中可以用第三方封装的工具函数例如lodash的debounce方法来简化防抖的代码。

debounce.js javascript // 实现debounce函数 const debounce = (func, wait) => { let timeoutId; return (...args) => { if (timeoutId) { clearTimeout(timeoutId); } timeoutId = setTimeout(() => { func(...args); }, wait); }; };

---

有关vue的常见面试题（上）

防抖 ：一个频繁触发的函数，在规定时间内，只让最后一次生效，前面的不生效。 例：防抖经常用在我们搜索框输入搜索，点击提交，防止等； 节流 ：一个频繁触发的函数，在规定时间内，函数执行一次后，只有大于设定的执行周期后才会执行第二次。 例：节流一般在onresize、mousemove、滚动事件等事件中使用，防止过多的请求造成服务器压力

盒模型的组成：元素的内容content、元素的内边距padding、元素的外边距margin、元素的边框border 盒模型分为 ： W3C标准盒子 、IE盒子 W3C标准盒子（content-box） ：又称内容盒子，是指块元素box-sizing属性为content-box的盒模型，盒子总宽度 = margin + border + padding + width IE盒子（border-box） ：又称怪异盒模型（边框盒子），是指块元素box-sizing属性为border-box的盒模型，盒子总宽 = margin + width

()与join()一样都是把数组转成以逗号分割的字符串 () 删除数组的最后一项 () 往数组最后添加新数据 () 删除数组最前面的一项

var定义的变量可以修改，如果不初始化会输出undefined，不会报错。 const定义的变量不可以修改，而且必须初始化 let是块级作用域，函数内部使用let定义后，对函数外部无影响。

1.都支持服务器端渲染 2.都有虚拟dom,组件化开发,都有‘props’的概念,允许父组件往子组件传送数据,都实现webComponent规范 3.数据驱动视图 4.都有支持native的方案,React的React native,Vue的weex 5.构建工具 React和Vue都有自己的构建工具，你可以使用它快速搭建开发环境。React可以使用Create React App (CRA)，而Vue对应的则是vue-cli。都有管理状态，React有redux,Vue有自己的Vuex

设计思想 react 1.函数式思想，all in js ,jsx语法，js操控css 2.单项数据流 重新渲染 4.每当应用的状态被改变时，全部子组件都会重新渲染。当然，这可以通过shouldComponentUpdate这个生命周期方法来进行控制，如果为true继续渲染、false不渲染，但Vue将此视为默认的优化。 vue 1.响应式思想，也就是基于数据可变的。把html、js、css、组合到一起，也可以通过标签引擎组合到一个页面中 2.双向绑定，每一个属性都需要建立watch监听（页面不用，涉及到组件更新的话需要） 宣称可以更快地计算出虚拟 DOM的差异，这是由于它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树 性能 react ----大型项目、优化需要手动去做，状态可控 vue ------中小型项目、状态改变需要watch监听，数据量太大的话会卡顿 扩展性 react 1 类式写法api少，更容易结合ts 2 可以通过高阶组件来扩展 vue 1 声明式写法，结合ts比较复杂 2 需要通过mixin方式来扩展

vue-router提供了导航钩子:全局前置导航钩子 beforeEach和全局后置导航钩子 afterEach 导航钩子3个参数(to,from,next):

到达这个组件时：

离开这个组件时：beforeRouteLeave:(to,from,next)=>{} 确认离开next();取消离开next(false)；

beforeEnter:(to,from,next)=>{}，用法与全局守卫一致。只是，将其写进其中一个路由对象中，只在这个路由下起作用。

方法一： 子组件绑定一个事件，通过 this.$emit() 来触发 在子组件中绑定一个事件，并给这个事件定义一个函数

在父组件中定义并绑定 handleChange 事件

方法二： 通过 callback 函数 先在父组件中定义一个callback函数，并把 callback 函数传过去

在子组件中接收，并执行 callback 函数

方法三： 通过 $parent /$children 或 $refs 访问组件实例 这两种都是直接得到组件实例，使用后可以直接调用组件的方法或访问数据。 这种方式的组件通信不能跨级

方法四： $attrs和$listeners

JS中节流和防抖函数的实现和区别

在前端开发中，经常和 DOM 、 BOM 打交道，例如：窗口的resize、scroll，输入框内容校验，按钮点击等等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用 throttle（节流） 和 debounce（防抖） 的方式来减少调用频率，提高性能的同时又不影响实际效果。

实现方式：每次触发事件时，如果当前有等待执行的延时函数，则直接return。

区别 ： 节流函数 不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而 防抖函数 只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。

Lodash是一个一致性、模块化、高性能的JavaScript实用工具库。其中就封装好了节流函数throttle和防抖函数debounce 。

参数：

返回：(Function): 返回 节流 的函数。

例子：

参数：

返回：(Function): 返回新的debounced （防抖动）函数。

例子：

1.节流 ：使得一定时间内只触发一次函数。原理是通过判断是否有延迟调用函数未执行。 2.防抖 ：将多次操作合并为一次操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。

欢迎访问： 天问博客