File tree 1 file changed +5
-5
lines changed
1 file changed +5
-5
lines changed Original file line number Diff line number Diff line change @@ -81,16 +81,16 @@ Vue は、 `methods` の `this` を自動的に束縛して、常にコンポー
81
81
82
82
### Debounce (デバウンス) と Throttle (スロットル)
83
83
84
- Vue は、 デバウンスやスロットルのサポートが組み込まれていませんが 、 [ Lodash] ( https://lodash.com/ ) などのライブラリを使って実装することができます。
84
+ Vue は、 Debounce や Throttle のサポートが組み込まれていませんが 、 [ Lodash] ( https://lodash.com/ ) などのライブラリを使って実装することができます。
85
85
86
- コンポーネントが一度しか使われない場合には、 ` methods ` の中で直接デバウンスを適用することができます :
86
+ コンポーネントが一度しか使われない場合には、 ` methods ` の中で直接 Debounce を適用することができます :
87
87
88
88
``` html
89
89
<
script src =
" https://unpkg.com/[email protected] /lodash.min.js" ></
script >
90
90
<script >
91
91
Vue .createApp ({
92
92
methods: {
93
- // Lodash によるデバウンス
93
+ // Lodash による Debounce
94
94
click: _ .debounce (function () {
95
95
// ... クリックに反応 ...
96
96
}, 500 )
@@ -99,12 +99,12 @@ Vue は、 デバウンスやスロットルのサポートが組み込まれて
99
99
</script >
100
100
```
101
101
102
- しかし、この方法ではコンポーネントが再利用される場合に、すべてのコンポーネントが同じデバウンス関数を共有するため 、問題が起きる可能性があります。コンポーネントのインスタンスをお互いに独立させるために、 ` created ` ライフサイクルフックにデバウンス関数を追加することができます :
102
+ しかし、この方法ではコンポーネントが再利用される場合に、すべてのコンポーネントが同じ Debounce 関数を共有するため 、問題が起きる可能性があります。コンポーネントのインスタンスをお互いに独立させるために、 ` created ` ライフサイクルフックに Debounce 関数を追加することができます :
103
103
104
104
``` js
105
105
app .component (' save-button' , {
106
106
created () {
107
- // Lodash によるデバウンス
107
+ // Lodash によるDebounce
108
108
this .debouncedClick = _ .debounce (this .click , 500 )
109
109
},
110
110
unmounted () {
You can’t perform that action at this time.
0 commit comments