Vue の計算プロパティ、メソッド、リスナーの使用を開始する例-jsチュートリアル-php.cn

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

王雪芹

リリース： 2020-08-18 14:41:38

オリジナル

1653 人が閲覧しました

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

効果:

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

<div id="root">
        {{name}}
    </div>

    <script>
        
        // 父组件
        new Vue({
            el:"#root", 
            data:{
                name1:&#39;jiang&#39;,
                name2:&#39;he&#39;,
                name:&#39;jiang he&#39;,
            }
        })
     </script>

ログイン後にコピー

ブラウザ効果:

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

1. 計算属性実装効果

<div id="root">
        {{name}}
    </div>

    <script>
        
        // 父组件
        new Vue({
            el:"#root", 
            data:{
                name1:&#39;jiang&#39;,
                name2:&#39;he&#39;,
            },
           
            computed:{
                name:function(){
                 return this.name1+&#39; &#39;+this.name2;
              }
            }
        })
    </script>

ログイン後にコピー

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

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

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

2. 効果を実現する方法

<div id="root">
        {{name()}}
    </div>

    <script>
        
        // 父组件
        new Vue({
            el:"#root", 
            data:{
                name1:&#39;jiang&#39;,
                name2:&#39;he&#39;,
            },
           
            methods:{
                name:function(){
                    return this.name1+&#39; &#39;+this.name2;
                }
            }
            
        })
    </script>

ログイン後にコピー

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

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

3. リスナー実装の効果

<div id="root">
        {{name}}
    </div>

    <script>
        
        // 父组件
        new Vue({
            el:"#root", 
            data:{
                name1:&#39;jiang&#39;,
                name2:&#39;he&#39;,
                name:&#39;jiang he&#39;,
            },
            watch:{
                name1:function(){
                    this.name= this.name1+&#39; &#39;+this.name2;
                 },
                name2:function(){
                    this.name= this.name1+&#39; &#39;+this.name2;
                }
            }

ログイン後にコピー

注: リスナー実装は文字通りに理解できます。監視とは、name1 と name2 の変更を監視することです。変更がある場合、名前は再割り当てされます。ここでは、name にデフォルト値があります。

#最後に

#3 つの方法はすべて同じ方法を実現できますが、どれが最適でしょうか?

最良の方法は最初の計算属性です。2 番目の方法と比較して、計算属性はキャッシュされてパフォーマンスが節約され、3 番目の方法と比較してコードが単純です。

熟練すると、誰もがそれらをよりよく理解できるようになります。

以上がVue の計算プロパティ、メソッド、リスナーの使用を開始する例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。