Une brève analyse de la façon d'utiliser l'anti-shake et la limitation dans les composants Vue

Comment utiliser l'anti-shake et la limitation dans les composants Vue ? L'article suivant vous montrera comment utiliser les observateurs de contrôle anti-secousse et de limitation et les gestionnaires d'événements dans les composants Vue à travers des exemples. J'espère qu'il vous sera utile !

Soyez prudent lorsque vous surveillez des événements fréquemment déclenchés, tels que la saisie par l'utilisateur dans la zone de saisie, le redimensionnement de la fenêtre, le défilement et les événements Intersection Observer.

Ces événements sont toujours déclenchés fréquemment, peut-être une fois toutes les quelques secondes. Il ne serait pas judicieux d'émettre une demande de récupération (ou un comportement similaire) pour chaque événement.

Tout ce que nous devons faire est de ralentir l'exécution du gestionnaire d'événements. Cette technologie de mise en mémoire tampon est debounce et throttling.

Dans cet article, vous apprendrez à utiliser l'anti-shake et la limitation pour contrôler les observateurs et les gestionnaires d'événements dans les composants Vue. [Recommandations associées : "Tutoriel vue.js"]

1. Observer anti-shake

Nous commençons par un composant simple :

<template>
  <input v-model="value" type="text" />
  <p>{{ value }}</p>
</template>
<script>
export default {
  data() {
    return {
      value: "",
    };
  },
  watch: {
    value(newValue, oldValue) {
      console.log("Value changed: ", newValue);
    }
  }
};
</script>

Ouvrez la démo :

https://codesandbox.io/s/vue-input-szgn1?file=/src/App.vue

Ouvrez la démo et tapez quelques caractères dans la zone de saisie. Chaque fois qu'elle est saisie, la valeur est enregistrée dans la console.

Nous avons implémenté l'impression du journal en utilisant un observateur pour écouter l'attribut de données value. Mais si vous souhaitez inclure une requête GET utilisant value comme paramètre dans le rappel de l'observateur, vous ne devez pas vous attendre à faire la requête trop fréquemment. value 数据属性 来实现了打印日志。但如果你想在 观察者的回调 中加入一个 使用 value 作为参数 的 GET 请求，那你应该不会期望太过频繁地发起请求。

我们来对 打印控制台日志 这个行为做一下 防抖。核心思想是创建一个 防抖函数，然后在 观察者 内部调用该函数。

我在这里选择了 'lodash.debounce' 的 防抖实现，但你可以自由选择喜欢的实现方式。

我们来将 防抖逻辑 应用到组件：

<template>
  <input v-model="value" type="text" />
  <p>{{ value }}</p>
</template>
<script>
import debounce from "lodash.debounce";
export default {
  data() {
    return {
      value: "",
    };
  },
  watch: {
    value(...args) {
      this.debouncedWatch(...args);
    },
  },
  created() {
    this.debouncedWatch = debounce((newValue, oldValue) => {
      console.log(&#39;New value:&#39;, newValue);
    }, 500);
  },
  beforeUnmount() {
    this.debouncedWatch.cancel();
  },
};
</script>

试试 demo

https://codesandbox.io/s/vue-input-debounced-4vwex?file=/src/App.vue

如果你打开这个 demo，你会发现其实从用户角度来看，变化不大：你依旧可以像上一个 demo 中一样自由输入字符。

但有一个区别：只有在最后一次输入的 500ms 之后，才会将新的输入值打印日志到控制台。这说明 防抖 在生效。

观察者 的 防抖实现 只需要 3 个简单步骤：

• 在 create() 钩子 里，创建 防抖回调，并将其赋值到实例上：this.debouncedWatch = debounce(..., 500)。

• 在 观察者 回调 watch.value() { ... }  中 传入正确的参数 调用 this.debouncedWatch()。

• 最后，beforeUnmount() 钩子中 调用 this.debouncedWatch.cancel() ，在卸载组件之前，取消所有还在 pending 的 防抖函数执行。

采用同样的方式，你可以对任意数据属性的 观察者 应用 防抖。然后就可以安全执行 防抖回调内部的一些比较重的操作，比如 网络请求、繁重的 DOM 操作，等等。

2. 事件处理器 防抖

上面一节，我展示了如何对 观察者 使用 防抖，那么常规的事件处理器呢？

我们重用之前用户输入数据到输入框的例子，但这一次会给输入框加个 事件处理器。

像往常一样，如果你没有采取任何缓冲的措施，每当值被修改时，会被打印到控制台：

<template>
  <input v-on:input="handler" type="text" />
</template>
<script>
export default {
  methods: {
    handler(event) {
      console.log(&#39;New value:&#39;, event.target.value);
    }
  }
};
</script>

试试 demo：

https://codesandbox.io/s/vue-event-handler-plls4?file=/src/App.vue

打开这个 demo，在输入框打几个字符。看看控制台：你会发现每次你输入的时候就会有日志被打印出来。

同样，如果你会执行一些比较重的操作（比如网络请求），可就不合适了。

对 事件处理器 使用 防抖，可以参考下面这个：

<template>
  <input v-on:input="debouncedHandler" type="text" />
</template>
<script>
import debounce from "lodash.debounce";
export default {
  created() {
    this.debouncedHandler = debounce(event => {
      console.log(&#39;New value:&#39;, event.target.value);
    }, 500);
  },
  beforeUnmount() {
    this.debouncedHandler.cancel();
  }
};
</script>

试试 demo：

https://codesandbox.io/s/vue-event-handler-debounced-973vn?file=/src/App.vue

打开 demo，输入一些字符。组件只有在最后一次输入的 500ms 之后，才会将新的输入值打印日志到控制台。防抖 再一次生效了！

事件处理器 的 防抖实现 只需要 3 个步骤：

• .在 create() 钩子 里，创建实例后，立刻将 防抖回调 debounce(event => {...}, 500) 赋值到 this.debouncedHandler

  Faisons un peu d'anti-tremblement sur le comportement des journaux d'impression de la console. L'idée principale est de créer une fonction anti-rebond, puis d'appeler cette fonction à l'intérieur de l'observateur. 🎜🎜J'ai choisi ici l'implémentation anti-shake de 'lodash.debounce', mais vous êtes libre de choisir l'implémentation que vous aimez. 🎜🎜Appliquons la logique anti-rebond au composant : 🎜

  // ...
    methods: {
      // Why not?
      debouncedHandler: debounce(function () { ... }}, 500)
    }
  // ...

  🎜🎜Essayez la démo🎜🎜https://codesandbox.io/s/vue-input-debouncy-4vwex?file=/src/App.vue🎜🎜🎜 Si Lorsque vous ouvrez cette démo, vous constaterez que du point de vue de l'utilisateur, peu de choses ont changé : vous pouvez toujours saisir librement des caractères comme dans la démo précédente. 🎜🎜Mais il y a une différence : la nouvelle valeur d'entrée sera enregistrée dans la console seulement 500 ms après la dernière entrée. Cela montre que l'anti-tremblement fait effet. 🎜🎜L'implémentation de l'anti-shake de l'observateur ne nécessite que 3 étapes simples : 🎜
  • 🎜Dans le hook create(), créez Anti -bounce callback et attribuez-le à l'instance : this.deboucedWatch = debounce(..., 500). 🎜
  • 🎜Dans le rappel de l'observateur, watch.value() { ... } transmettez les paramètres corrects et appelez this.debououncedWatch(). 🎜
  • 🎜Enfin, appelez this.debouncydWatch.cancel() dans le hook beforeUnmount() pour annuler tous les composants en attente avant de désinstaller le composant. la fonction anti-tremblement est exécutée. 🎜
  🎜De la même manière, vous pouvez appliquer un anti-shake à l'observateur de n'importe quel attribut de données. Vous pouvez ensuite effectuer en toute sécurité des opérations plus lourdes dans le rappel anti-shake, telles que des requêtes réseau, des opérations DOM lourdes, etc. 🎜

  2. Anti-shake du gestionnaire d'événements🎜🎜Dans la section ci-dessus, j'ai montré comment utiliser l'anti-shake pour les observateurs, mais qu'en est-il des gestionnaires d'événements classiques ? 🎜🎜Nous réutilisons l'exemple précédent de l'utilisateur saisissant des données dans la zone de saisie, mais cette fois nous ajouterons un gestionnaire d'événements à la zone de saisie. 🎜🎜Comme d'habitude, si vous ne prenez aucune mesure de mise en mémoire tampon, chaque fois que la valeur est modifiée, elle sera imprimée sur la console : 🎜

  <template>
    <input v-on:input="debouncedHandler" type="text" />
  </template>
  <script>
  import debounce from "lodash.debounce";
  export default {
    methods: {
      // Don&#39;t do this!
      debouncedHandler: debounce(function(event) {
        console.log(&#39;New value:&#39;, event.target.value);
      }, 500)
    }
  };
  </script>

  🎜🎜Essayez la démo : 🎜🎜https://codesandbox.io/s/vue - event-handler-plls4?file=/src/App.vue🎜🎜🎜Ouvrez cette démo et tapez quelques caractères dans la zone de saisie. Jetez un œil à la console : vous remarquerez qu'un journal est imprimé à chaque fois que vous tapez. 🎜🎜De même, si vous effectuez des opérations lourdes (telles que des requêtes réseau), cela ne convient pas. 🎜🎜Pour utiliser l'anti-shake sur le gestionnaire d'événements, vous pouvez vous référer à ce qui suit : 🎜

  // ...
    created() {
      this.debouncedCallback = debounce((...args) => {
        // The debounced callback
      }, 500);
    },
  // ...

  🎜🎜Essayez la démo : 🎜🎜https://codesandbox.io/s/vue-event-handler-debouncy-973vn?file =/src/ App.vue🎜🎜🎜Ouvrez la démo et entrez quelques caractères. Le composant enregistrera la nouvelle valeur d'entrée sur la console seulement 500 ms après la dernière entrée. L'anti-tremblement fonctionne à nouveau ! 🎜🎜L'implémentation anti-shake du gestionnaire d'événements ne nécessite que 3 étapes : 🎜

  • 🎜 Dans le hook create(). , Après avoir créé l'instance, attribuez immédiatement le rappel anti-rebond debounce(event => {...}, 500) à this.debouncingHandler. 🎜

  • 在输入框的 template 中 给 v-on:input  赋上 debouncedHandler ：72aa7f7a662c9ee5d7170c1b88786ba7

  • 最后，在卸载组件之前， 在 beforeUnmount() 钩子中 调用 this.debouncedHandler.cancel() ，取消所有还在 pending 的 函数调用。

  另一方面，这些例子应用了 防抖 的技术。然而，同样的方式可以以用于创建 节流函数。

  3. 注意

  你可能不理解：为什么不直接在 组件的 method 选项中创建 防抖函数，然后在 template 中调用这些方法作为事件处理器？

  // ...
    methods: {
      // Why not?
      debouncedHandler: debounce(function () { ... }}, 500)
    }
  // ...

  这比在实例对象上创建 防抖函数 要简单的多。

  例如：

  <template>
    <input v-on:input="debouncedHandler" type="text" />
  </template>
  <script>
  import debounce from "lodash.debounce";
  export default {
    methods: {
      // Don&#39;t do this!
      debouncedHandler: debounce(function(event) {
        console.log(&#39;New value:&#39;, event.target.value);
      }, 500)
    }
  };
  </script>

  试试 demo

  https://codesandbox.io/s/vue-event-handler-debounced-incorrectly-320ci?file=/src/App.vue

  这次不是在 created() 钩子 里创建 防抖回调了，而是将 防抖回调 赋给了 methods.debouncedHandler 。

  你如果试过 demo，你会发现是有效果的！

  问题是，组件使用 export default { ... } 导出的 options 对象，包括方法，会被组件实例重用。

  如果网页中有 2 个以上的组件实例，那么所有的组件都会应用 相同 的防抖函数 methods.debouncedHandler  — 这会导致防抖出现故障。

  4. 总结

  在 Vue 中，可以很轻松的对 观察者 和 事件处理器 应用 防抖 和 节流。

  核心逻辑就是，在 created() 钩子 里，创建 防抖 或 节流 的回调，并赋值在实例上。

  // ...
    created() {
      this.debouncedCallback = debounce((...args) => {
        // The debounced callback
      }, 500);
    },
  // ...

  A）然后在观察者内部调用实例上的防抖函数：

  // ...
    watch: {
      value(...args) {
        this.debouncedCallback(...args);
      },
    },
  // ...

  B）或在 template 中设定一个事件处理器：

  <template>
    <input v-on:input="debouncedHandler" type="text" />
  </template>

  在这之后，每次调用 this.debouncedCallback(...args) ，就算执行频率非常高，内部的回调也能缓冲执行。

  你对 Vue 中的 防抖 和 节流 还什么问题吗？欢迎提问！

  更多编程相关知识，请访问：编程入门！！

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!