Vue.js の計算メソッドとメソッドの違いは何ですか? (例付き)

この記事の内容は、Vue.js の計算とメソッドの違いについてです。 (例も添付されています)、困っている友人が参考になれば幸いです。

公式ドキュメントで説明されていますので、ここに私の理解を記録します。

computed の使用シナリオ

HTML テンプレート内の複雑な論理式の場合、ロジックが重くなりすぎて保守が困難になるのを防ぐために、関連するロジックを次のようにする必要があります。計算された属性に入れられます。

このような

<div id="root">
     <p>Reversed message: "{{ message.split(&#39;&#39;).reverse().join(&#39;&#39;) }}"</p>
</div>

この場所では、テンプレートは単純な宣言型ロジックではなくなりました。以下は、変数メッセージを表示する反転された文字列です。複雑なロジック処理を含む式では、計算されたプロパティを使用する必要があります。

計算とメソッドの違い

1. 計算は属性呼び出しですが、メソッドは関数呼び出しです

これは、HTML 補間では次のことを意味します。

computed で定義されたメソッドは、{{reversedMessageComputed}}

methods などの属性アクセスの形式で呼び出されます。定義されたメソッドは、() を追加して呼び出す必要があります。たとえば、{{reversedNameMethod( ) }}、それ以外の場合は、次のコンテンツが view

function () { [ネイティブ コード] }

2 にレンダリングされます。computed にはキャッシュ関数がありますが、メソッドにはキャッシュ関数がありません。

ここで公式ドキュメントを引用しましょう

計算されたプロパティは、依存関係に基づいてキャッシュされます。関連する依存関係が変更された場合にのみ再評価されます。

<!-- html -->
<div id="root">
    <p>Reversed message: "{{ reversedNameMethod() }}"</p>
    <p>Reversed message: "{{ reversedMessageComputed }}"</p>
</div>

// javascript
var vm = new Vue({
    el: '#root',
        data: {
        name: 'Alex',
        message: 'Hello'
    },
    methods: {
      reversedNameMethod: function () {
        return this.name.split('').reverse().join('')
      }
    },
    computed: {
        // 计算属性的 getter
        reversedMessageComputed: function () {
        // `this` 指向 vm 实例
        return this.message.split('').reverse().join('')
        }
    }
})

上記の例では、キャッシュとは、メッセージが変更されていない限り、reversedMessageComputed 計算プロパティに複数回アクセスすると、関数を再度実行することなく、前の計算結果がすぐに返されることを意味します。 reversedNameMethod() メソッドは、呼び出されるたびに関数を再実行します。

しかし同時に、Date.now() はリアクティブな依存関係ではないため、これは次の計算されたプロパティが更新されなくなることも意味することに注意することが重要です:

// javascript
computed: {
    now: function () {
        return Date.now()
    }
}

now の値は Vue インスタンス内にあります。これは変換時に生成され、変更されることはありません。

対照的に、呼び出しメソッドは、再レンダリングがトリガーされるたびに常に関数を再度実行します。

computed に関するその他の指示

Computed とメソッドに同じ名前を付けることはできません

Vue は、メソッドとデータ内のすべてのものを、Vue によって生成されたオブジェクトにプロキシします。 computed

に重複した名前を持つ属性

以上がVue.js の計算メソッドとメソッドの違いは何ですか? (例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。