vue の計算プロパティの詳細については、こちらをご覧ください。-Vue.js-php.cn

vue の計算プロパティの詳細については、こちらをご覧ください。

青灯夜游

リリース： 2020-11-02 17:54:14

転載

2650 人が閲覧しました

次の Vue.js チュートリアル列では、vue で計算されるプロパティについて説明します。一定の参考値があるので、困っている友達が参考になれば幸いです。

vue の計算プロパティの詳細については、こちらをご覧ください。

#1. 計算属性とは何ですか

テンプレート内の式は非常に便利ですが、元々は使用するために設計されています。 簡単な操作。テンプレートにロジックを入れすぎると、テンプレートが太くなり、保守が困難になる可能性があります。例:

<p id="example">
  {{ message.split('').reverse().join('') }}</p>

ログイン後にコピー

ここの式には 3 つの操作が含まれていますが、これはあまり明確ではないため、複雑なロジックに遭遇した場合は、それを処理するために計算される Vue の特別な計算属性を使用する必要があります。

2. 計算属性の使用法

演算、関数呼び出しなどを含むさまざまな複雑なロジックを計算属性で完了できます。最終的なリターンは 1 つの結果で十分です。

計算されたプロパティを使用して上記の例を書き直してみましょう

<p id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>　　//我们把复杂处理放在了计算属性里面了</p>

ログイン後にコピー

var vm = new Vue({
    el: '#example',
    data: {
        message: 'Hello'
    },
    computed: {
        reversedMessage: function () {            // `this` 指向 vm 实例
            return this.message.split('').reverse().join('')
        }
    }
});

ログイン後にコピー

結果:

元のメッセージ: "Hello"

計算された反転メッセージ: "olleH "

上記の例の単純な使用法に加えて、計算されたプロパティは複数の Vue インスタンスのデータに依存することもできます。 データのいずれかが変更される限り、計算されたプロパティはが再実行されると、ビューも更新されます。

<body>
    <p id="app">
        <button @click="add()">补充货物1</button>
        <p>总价为：{{price}}</p>
    </p></body>

ログイン後にコピー

var app = new Vue({        
       el: '#app', 
   data: {
       package1: {
           count: 5,
           price: 5
       },
       package2: {
           count: 10,
           price: 10
       }
    },
    computed: {
     price: function(){         return this.package1.count*this.package1.price+this.package2.count*this.package2.price　　//总价随着货物或价格的改变会重新计算
     }
    },
    methods: {   //对象的方法
        add: function(){            this.package1.count++
        }
    }
});

ログイン後にコピー

計算プロパティについては、見落とされがちな非常に実用的なヒントが 2 つあります: まず、計算プロパティは他の計算プロパティに依存する可能性があります。第 2 に、計算プロパティは現在の Vue のデータのみに依存できるわけではありません。インスタンスだけでなく、他のインスタンス , のデータにも依存します。例:

    <p id="app1"></p>
    <p id="app2">{{ reverseText}}</p>

ログイン後にコピー

var app1 = new Vue({
   el: '#app1',
 data: {
      text: 'computed'
    }
});var app2 = new Vue({
    el: '#app2',
    computed: {
        reverseText: function(){
        return app1.text.split('').reverse().join('');  //使用app1的数据进行计算        }
    }
});

ログイン後にコピー

各計算プロパティにはゲッターとセッターが含まれます。上記の 2 つの例は、デフォルトの使用法です。計算されたプロパティ。getter を使用して読み取るだけです。

必要に応じて、セッター関数を提供することもできます。通常のデータを変更するのと同じように、計算されたプロパティの値を手動で変更すると、セッター関数がトリガーされて、次のようなカスタム操作が実行されます。 :

var vm = new Vue({
    el: '#demo',
    data: {
        firstName: 'Foo',
        lastName: 'Bar'
    },
    computed: {
        fullName: {            // getter
            get: function () {                return this.firstName + ' ' + this.lastName
            },            // setter
            set: function (newValue) {                var names = newValue.split(' ');                this.firstName = names[0];                this.lastName = names[names.length - 1];
            }
        }
    }
});//现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。

ログイン後にコピー

ほとんどの場合、計算されたプロパティを読み取るためにデフォルトのゲッターメソッドのみを使用します。セッターはビジネスではほとんど使用されないため、計算されたプロパティを宣言するときは、デフォルトの書き込みメソッドを直接使用できます。 getter と setter の両方を宣言する必要はありません。

3. 計算属性キャッシュ

上記の例では、計算プロパティを使用することに加えて、式の中で次のようなメソッドを呼び出すことによっても同じ効果を実現できます。 :

<p>{{reverseTitle()}}</p>

ログイン後にコピー

// 在组件中methods: {
  reverseTitle: function () {    return this.title.split('').reverse().join('')
  }
}

ログイン後にコピー

同じ関数を計算されたプロパティの代わりにメソッドとして定義することもでき、どちらの方法でも最終結果はまったく同じになります。 1 つだけが reverseTitle() を使用して値を取得し、もう 1 つが reverseTitle を使用して値を取得します。

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

これは、タイトルが変更されていない限り、reverseTitle 計算プロパティに複数回アクセスすると、関数を再度実行することなく、前の計算結果がすぐに返されることを意味します。

小さな例:

        <p>{{reverseTitle}}</p>
        <p>{{reverseTitle1()}}</p>
        <button @click="add()">补充货物1</button>
        <p>总价为：{{price}}</p>

ログイン後にコピー

    computed: {
      reverseTitle: function(){          return this.title.split('').reverse().join('')　　//而使用计算属性，只要title没变，页面渲染是不会重新进这里来计算的，而是使用了缓存。
      },
     price: function(){         return this.package1.count*this.package1.price+this.package2.count*this.package2.price
     }
    },
    methods: {   //对象的方法
        add: function(){            this.package1.count++
        },
        reverseTitle1: function(){            return this.title.split('').reverse().join('')　　//点击补充货物，也会进这个方法，再次计算。不是刷新，而是只要页面渲染，就会进方法里重新计算。
        }
    },

ログイン後にコピー

対照的に、再レンダリングがトリガーされるたびに、呼び出しメソッドは

常に再び機能します。

なぜキャッシュが必要なのでしょうか?巨大な配列を走査して多くの計算を行う必要がある、計算コストの高いプロパティ

A があるとします。その場合、A に依存する他の計算プロパティがある可能性があります。

キャッシュがない場合、必然的に

A のゲッターを複数回実行することになります。キャッシュしたくない場合は、代わりにメソッドを使用してください。