Vue の計算プロパティ、メソッド、リスナーの使用を開始する例

初心者が Vue を学習する場合、計算されたプロパティ、メソッド、リスナーは必須の知識ポイントです。便宜上、簡単にするために、今回は同じ例を使用し、計算プロパティ、メソッド、リスナーという 3 つのメソッドを使用して同じ効果を実現します。何もせずに、車に乗りましょう。

効果:

Vue で 2 つの値 name1 と name2 を定義しました。期待される効果は、名前を html に出力することであり、名前は次の連結です。 name1とname2になります。 name1 が変更されるか、name2 が変更されるかに関係なく、それに応じて名前も変更されます。

        {{name}}
    

    

ブラウザ効果:

1. 計算属性実装効果

        {{name}}
    

    

分析: computed は計算された属性です。文字通りに計算することもできます。つまり、name1 と name2 を結合して最終的に name を生成します。

計算された属性はキャッシュされることに注意してください。つまり、name1 または name2 が変更され、キャッシュ内の値と異なる場合にのみ再計算されます。

name1 または name2 が変更されない場合、computed は再計算されません。

2. 効果を実現する方法

        {{name()}}
    

    

注: 補間式 {{name()}} には括弧が必要です。

計算プロパティとは異なり、ページが 1 回読み込まれる限り、メソッドは 1 回実行され、キャッシュはありません。

3. リスナー実装の効果

        {{name}}