Analisis ringkas tentang cara menggunakan anti goncang dan pendikit dalam komponen Vue

Bagaimana untuk menggunakan anti goncang dan pendikit dalam komponen Vue? Artikel berikut akan menunjukkan kepada anda cara menggunakan pemerhati kawalan anti goncang dan pendikit serta pengendali acara dalam komponen Vue melalui contoh saya harap ia akan membantu anda!

Berhati-hati apabila memantau peristiwa yang sering dicetuskan, seperti pengguna menaip dalam kotak input, saiz semula tetingkap, menatal dan peristiwa Pemerhati Persimpangan.

Acara ini sentiasa dicetuskan dengan kerap, mungkin sekali setiap beberapa saat. Adalah tidak bijak untuk mengeluarkan permintaan pengambilan (atau tingkah laku serupa) untuk setiap acara.

Apa yang perlu kita lakukan ialah memperlahankan pelaksanaan pengendali acara. Teknologi penimbalan ini adalah nyah lantun dan pendikit .

Dalam artikel ini, anda akan belajar cara menggunakan anti goncang dan pendikit untuk mengawal pemerhati dan pengendali acara dalam komponen Vue. [Cadangan berkaitan: "Tutorial vue.js"]

1 Anti-goncang pemerhati

Kami bermula dengan komponen mudah teks yang dimasukkan ke dalam kotak teks adalah output kepada konsol:

<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>

Buka demo:

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

Buka demo dan taip beberapa aksara dalam kotak input. Setiap kali ia dimasukkan, nilai dilog ke konsol.

Kami melaksanakan log pencetakan dengan menggunakan pemerhati untuk mendengar atribut data value. Tetapi jika anda ingin memasukkan permintaan GET menggunakan value sebagai parameter dalam panggilan balik pemerhati, maka anda tidak boleh mengharapkan untuk membuat permintaan terlalu kerap.

Mari kita anti goncang tingkah laku mencetak log konsol. Idea teras adalah untuk mencipta fungsi nyahlantun dan kemudian memanggil fungsi itu di dalam pemerhati.

Saya memilih pelaksanaan anti goncang 'lodash.debounce' di sini, tetapi anda bebas memilih pelaksanaan yang anda suka.

Mari kita gunakan logik anti goncang pada komponen:

<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>

Cuba demo

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

Jika anda membuka demo ini, anda akan mendapati bahawa dari perspektif pengguna, tidak banyak perubahan: anda masih boleh melakukan perkara yang sama seperti dalam demo sebelumnya Anda juga boleh memasukkan aksara secara bebas.

Tetapi terdapat satu perbezaan: nilai input baharu akan dilog ke konsol hanya selepas 500ms terakhir dimasukkan. Ini menunjukkan bahawa anti-goncang sedang berkuat kuasa.

Pelaksanaan anti-goncang pemerhati hanya memerlukan 3 langkah mudah:

• Dalam cangkuk create(), buat panggilan balik anti-goncang dan tetapkannya kepada contoh :this.debouncedWatch = debounce(..., 500).

• Masukkan parameter yang betul dalam panggil balik pemerhati watch.value() { ... } untuk memanggil this.debouncedWatch().

• Akhir sekali, beforeUnmount() memanggil this.debouncedWatch.cancel() dalam cangkuk untuk membatalkan pelaksanaan semua fungsi anti goncang yang belum selesai sebelum menyahpasang komponen.

Dengan cara yang sama, anda boleh menggunakan anti goncang pada pemerhati sebarang atribut data. Kemudian anda boleh melakukan beberapa operasi yang lebih berat dengan selamat dalam panggilan balik anti-goncang, seperti permintaan rangkaian, operasi DOM berat, dsb.

2. Anti goncang pengendali acara

Dalam bahagian di atas, saya menunjukkan cara menggunakan anti goncang untuk pemerhati, tetapi bagaimana pula dengan pengendali acara biasa?

Kami menggunakan semula contoh sebelumnya pengguna memasukkan data ke dalam kotak input, tetapi kali ini kami akan menambah pengendali acara pada kotak input.

Seperti biasa, jika anda tidak mengambil sebarang langkah penimbal, apabila nilai diubah, ia akan dicetak ke konsol:

<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>

Cuba demo:

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

Buka demo ini dan taip beberapa perkataan dalam input watak kotak. Lihat konsol: anda akan melihat bahawa log dicetak setiap kali anda menaip.

Begitu juga, jika anda akan melakukan beberapa operasi berat (seperti permintaan rangkaian), ia tidak sesuai.

Untuk menggunakan anti goncang pada pengendali acara, anda boleh merujuk perkara berikut:

<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>

Cuba demo:

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

Buka demo dan masukkan beberapa aksara. Komponen akan log nilai input baharu ke konsol hanya selepas input terakhir 500ms. Anti goncang berfungsi semula!

Pelaksanaan anti goncang pengendali acara hanya memerlukan 3 langkah:

• Dalam cangkuk create(), selepas mencipta contoh, segera panggil semula anti -goncang debounce(event => {...}, 500) Ditugaskan kepada this.debouncedHandler.

• 在输入框的 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 中的 防抖 和 节流 还什么问题吗？欢迎提问！

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

Atas ialah kandungan terperinci Analisis ringkas tentang cara menggunakan anti goncang dan pendikit dalam komponen Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!