面接速記のcomputedとwatchの違い
1137 ワード
computed:
show me the code
computed : {
}data() {
}計算プロパティは、前回の計算結果をキャッシュし、すべての履歴ではなく前回であることを強調します.これを呼び出すたびにfooは、前回の結果を返しますか、それともfoo関数を実行して最新の結果を返しますか.computedのレスポンスコンストラクタ内部の変数dirty制御により、dirtyがtrueでfooが実行され、最新の結果が返されます.そうしないとキャッシュの値が返され、fooが実行されるたびにdirtyがfalseに復元されます.つまりdirtyがキャッシュから値を読み出すかどうかを制御している場合、dirtyがtrueに変更されるのはいつですか.depsに修正または新規(記憶が容易で、新規がトリガーされるのではなく、新規時にも同期してdirtyの修正がトリガーされる)がある場合.computedの応答構造器の内部にはdirtyのほかにdepsの配列があり、配列項はfooという計算属性の依存項であり、この依存はコード表面上のthisではないことに注意した.a,this.b,this.cではなくfoo関数を実行する場合、ある値のgetterがトリガーされた場合にのみ依存配列に追加され、depsのデフォルトは[]であり、foo関数を最初に実行するとif(this.a)に遭遇してthisがトリガーされる.aのgetters、これを.a depsに追加すると、依存性にはthisしかありません.a,dirtyをtrueに同期して変更しfoo関数を実行し続け,最新の結果を返す
擬似コード表現はこの場合depsにthisしかないと仮定する.a
これを実行します.b='2'if(!deps.includes('this.b'){return前回の値}でthisを実行します.a=2、最新の値を返し、
最初からそうだったらa=-1,依存配列にa,b,cがあり,このときthis.a=-2、新しい値は古い値と同じですが、前回の値を返しますか?それとも再計算しますか?前回の値(fooのconsoleが実行されていない)を返すと、この理論に問題があることを示します.
show me the code
computed : {
foo() {
if(this.a>0){ return this.a}
else { return this.b + this.c }
}
}data() {
a: 1,
b: 1,
c: 1,
}計算プロパティは、前回の計算結果をキャッシュし、すべての履歴ではなく前回であることを強調します.これを呼び出すたびにfooは、前回の結果を返しますか、それともfoo関数を実行して最新の結果を返しますか.computedのレスポンスコンストラクタ内部の変数dirty制御により、dirtyがtrueでfooが実行され、最新の結果が返されます.そうしないとキャッシュの値が返され、fooが実行されるたびにdirtyがfalseに復元されます.つまりdirtyがキャッシュから値を読み出すかどうかを制御している場合、dirtyがtrueに変更されるのはいつですか.depsに修正または新規(記憶が容易で、新規がトリガーされるのではなく、新規時にも同期してdirtyの修正がトリガーされる)がある場合.computedの応答構造器の内部にはdirtyのほかにdepsの配列があり、配列項はfooという計算属性の依存項であり、この依存はコード表面上のthisではないことに注意した.a,this.b,this.cではなくfoo関数を実行する場合、ある値のgetterがトリガーされた場合にのみ依存配列に追加され、depsのデフォルトは[]であり、foo関数を最初に実行するとif(this.a)に遭遇してthisがトリガーされる.aのgetters、これを.a depsに追加すると、依存性にはthisしかありません.a,dirtyをtrueに同期して変更しfoo関数を実行し続け,最新の結果を返す
擬似コード表現はこの場合depsにthisしかないと仮定する.a
これを実行します.b='2'if(!deps.includes('this.b'){return前回の値}でthisを実行します.a=2、最新の値を返し、
最初からそうだったらa=-1,依存配列にa,b,cがあり,このときthis.a=-2、新しい値は古い値と同じですが、前回の値を返しますか?それとも再計算しますか?前回の値(fooのconsoleが実行されていない)を返すと、この理論に問題があることを示します.