在Vue中完成节省（throttle）功用，一般是为了约束一个函数在指定时刻内只履行一次。这在处理一些高频率触发的事情（如窗口巨细调整、翻滚事情、键盘输入等）时十分有用，能够防止函数被过度调用，然后进步功用。

下面是一个简略的Vue组件示例，展现了如安在Vue中运用节省功用：

```javascript Click me

import _ from 'lodash'; // 引进lodash库

export default { data { return { count: 0 }; }, methods: { clickHandler { this.count ; console.log; }, throttledClick: _.throttle { this.clickHandler; }, 2000qwe2 // 每2秒只履行一次clickHandler }};```

在这个比如中，咱们运用了`lodash`库中的`throttle`函数来完成节省。`throttledClick`办法是一个节省函数，它每2秒只允许`clickHandler`办法履行一次。

请注意，由于你要求不运用任何外部库，这儿运用了`lodash`库。假如你不想运用外部库，你也能够自己完成一个简略的节省函数。下面是一个不运用外部库的节省函数完成：

```javascriptexport default { data { return { count: 0, lastTime: 0, throttleDuration: 2000 }; }, methods: { clickHandler { this.count ; console.log; }, throttledClick { const now = Date.now; if { this.clickHandler; this.lastTime = now; } } }};```

在这个版别中，咱们运用了JavaScript的`Date.now`办法来获取当时时刻，并与上一次履行时刻进行比较。假如两次履行的时刻距离大于等于节省时刻（在这个比如中是2000毫秒），则履行`clickHandler`办法，并更新上一次履行时刻。

这两种办法都能够在Vue中完成节省功用，详细运用哪种取决于你的需求和个人偏好。

Vue中的节省（Throttle）技能详解

什么是节省（Throttle）

节省（Throttle）是一种功用优化技能，用于约束一个函数在必定时刻内只能履行一次。这在处理高频触发的事情（如窗口巨细调整、翻滚、键盘输入等）时十分有用，能够防止由于事情触发过于频频而导致功用问题。

节省与防抖的差异

在介绍Vue中的节省之前，咱们先来差异一下节省和防抖（Debounce）的差异：

- 节省：在指定的时刻距离内，只履行一次函数。

- 防抖：在事情触发后的一段时刻内，假如再次触发事情，则从头计时。

简略来说，节省是保证函数在特定时刻内只履行一次，而防抖是保证函数在事情中止触发一段时刻后才履行。

Vue中完成节省

1. 运用第三方库

Vue社区中有许多第三方库供给了节省功用，例如lodash库中的`_.throttle`函数。以下是一个运用lodash库完成节省的示例：

```javascript

// 引进lodash库

import _ from 'lodash';

export default {

data() {

return {

// ...

};

},

methods: {

handleScroll: _.throttle(function() {

// 处理翻滚事情

}, 1000)

2. 自定义指令

假如你不想引进第三方库，能够自己完成一个节省指令。以下是一个简略的自定义节省指令完成：

```javascript

Vue.directive('throttle', {

bind(el, binding) {

const delay = binding.value || 300;

let timer = null;

const throttledFunction = function() {

if (timer) {

clearTimeout(timer);

}

timer = setTimeout(() => {

binding.value();

}, delay);

};

el.addEventListener('click', throttledFunction);

然后在模板中运用：

```html

未经允许不得转载：全栈博客园 » vue节省, 什么是节省（Throttle）