アウトライン
最近、常にいくつかの大きなを考えますプロジェクトやっ最近の関連アプリケーションのデザインパターンの問題を、私は今後の参考のために彼自身のレコードが開発するときだと思う、我々はそれが他の人に便利であると考えています。
この関数は1回だけ実行され
私たちはしばしばこのような状況が発生した、ある関数が実行されません後、一度だけ実行されることを望みは。通常の状況下で、我々は記述します。
<script>
export default {
data() {
return {
runOnce: true,
};
},
methods: {
func() {
console.log('hello world', this);
},
funcRunOnce() {
if (this.runOnce) {
this.func();
this.runOnce = false;
}
},
},
};
</script>しかし、これは、それは醜いです、また、2つの方法で達成、データを汚染するだけでなく、エレガントではありません。
改善の閉鎖
だから我々は、の使用を検討クロージャをこの変数は内部の閉鎖にRUNONCE内のデータ、ので、それはデータを汚染しません。コードは以下の通りであります：
<script>
export default {
methods: {
func() {
console.log('hello world', this);
},
funcRunOnce(params) {
let runOnce = true;
return () => {
if (runOnce) {
this.func();
runOnce = false;
}
}();
},
},
};
</script>毎回のfuncRunOnce構造は、この変数が共有されることはありませんRUNONCE内で、閉鎖後に呼び出されますので、しかし、それは、そう明らかに間違って書かれています。だから、次のように読み続けます：
// 方法1
<script>
export default {
created() {
this.funcRunOnce = this.runOnce(this.func);
},
methods: {
func() {
console.log('hello world', this);
},
runOnce(func) {
let runOnce = true;
return (params) => {
if (runOnce) {
func(params);
runOnce = false;
}
};
},
},
};
</script>
// 方法2
<script>
export default {
methods: {
func() {
console.log('hello world', this);
},
runOnce(func) {
let runOnce = true;
return (params) => {
if (runOnce) {
func(params);
runOnce = false;
}
};
},
funcRunOnce: this.runOnce(this.func),
},
};
</script>utilsの使用
私たちは、上記の方法は、まだ非常にエレガントで、見て、どちらかの三つの方法により、作成または2つの方法で実装することができます。そして、一般的なアプローチのrunonceを持つすべての。したがって、我々はにRUNONCEを検討utils.js中に入ります。
// utils.js
export function runOnce(func) {
let runOnce = true;
return (params) => {
if (runOnce) {
func(params);
runOnce = false;
}
};
}
//example.vue
import { runOnce } from '@/utils';
<script>
export default {
methods: {
funcRunOnce: runOnce(() => {
console.log('hello world', this);
}),
},
};
</script>上記の文言は非常に単純なようだが、この点は間違っていたので、実際には、十分ではありません。方法はRUNONCEを返す関数VUE例ないので、これは内部を指し未定義。
注意：我々は、矢印機能によってfuncRunOnce方法は、このインスタンスを、外をキャプチャするかのように見えるが、実際に、それはこのインスタンスが外ではありませんが、この機能のRUNONCEリターンの内側にキャプチャした場合でも。
これをキャプチャ
私たちは、関数が使用される矢印を使用することができますどこで、なぜ我々はまだこのにそれをキャプチャすることができませんか？これは、この方法は、このタスクを完了することはできませんではないでしょうか？
ない、またはいくつかの方法は、方法はある矢印の機能がこれを捕捉していません。コードは以下の通りであります：
// utils.js
export function runOnce(func) {
let runOnce = true;
return function(params) {
if (runOnce) {
func.apply(this, params);
runOnce = false;
}
};
}
//example.vue
import { runOnce } from '@/utils';
<script>
export default {
methods: {
funcRunOnce: runOnce(function h() {
console.log('hello world', this);
}),
},
};
</script>二つの機能はまた、矢印の関数になる、と書き換えられるコードを見て分かるように、これに印加される力を適用する機能を使用します。
そしてfuncRunOnceので全く使用矢印機能はありませんので、我々はできる、矢印の機能を使用しないRUNONCE機能、VUEインスタンスの一部を返す関数なので、それはVUEのインスタンスを指して、返します。この機能その理由は、単純ですこの中に入ることを余儀なくこれに添付FUNCに適用されます使用します！
初めてのフォローアップを行って機能を実行していないため同様に、我々はまた、書くことができます。
// utils.js
// 第一次不执行，后续再执行
export function notRunOnce(func) {
let once = false;
return function(params) {
if (once) {
func.apply(this, params);
}
once = true;
};
}学んだこと
- 初期化メソッド内割当ての形で使用する、または作成することができるVUE初期化方法です。
- 矢印の機能は、このはなく、すべてのものをキャプチャすることができますが、時には私たちは、キャプチャし、この組み合わせを適用する機能を必要としています。