Vue の計算プロパティ API (計算) の詳細な分析

#Vue テンプレートの式構文は、単純な操作に対して 1 つの式のみをサポートします。複雑な論理計算の場合は、計算されたプロパティを使用する必要があります。 。

Computed は、props、data、vuex のデータに依存 (計算) できます。つまり、props/data/vuex のデータ変更に応答して計算された属性を宣言し、処理後の結果を返すことができます。何らかの計算。 [関連する推奨事項:

vue.js ビデオ チュートリアル ]

計算属性の記述方法

計算属性の属性値は関数またはオブジェクトになります

1 . 属性値は function です このとき、計算される属性は getter のみです

<div id="app">
    {{fullName}}
</div>
<script>
let vm = new Vue({
  el: &#39;#app&#39;,
  data: {
    firstName: &#39;Foo&#39;,
    lastName: &#39;Bar&#39;
  },
  computed: {
    fullName () {
      return this.firstName + &#39; &#39; + this.lastName
    }
  }
})
</script>

2. 属性値はオブジェクトです
計算される属性値がオブジェクトの場合、オブジェクトの属性属性は、get メソッドと set メソッドを使用して構成できます。このアプローチでは、計算されたプロパティのセッターが提供されます。

fullName: {
   get () {
     return this.firstName + ' ' + this.lastName   },
   set (newValue) {
     const names = newValue.split(' ')
     this.firstName = names[0]
     this.lastName = names[names.length - 1]
   }
 }

計算プロパティのサポート

キャッシュ

ビューは変更されても、計算プロパティが依存するデータが変更されない場合、値はキャッシュから直接取得されます。

次の例では、計算されたプロパティ messageLength とメソッド getMessageLength が同じ関数を実装しています。ボタンをクリックしてビューを更新すると、メソッド getMessageLength が実行されることがわかります。この場合は明らかに、次のように使用します。計算されたプロパティはメソッドよりもパフォーマンスが優れています。

<div id="app">
    {{messageLength}}-{{getMessageLength()}}
    <button @click="onClick">点击{{i}}</button>
</div>
<script>
let vm = new Vue({
  el: &#39;#app&#39;,
  data: {
    message: &#39;Hello world&#39;,
    i: 0
  },
  computed: {
    messageLength () {
      console.log(&#39;messageLength执行了&#39;)
      return this.message.length
    }
  },
  methods: {
    getMessageLength () {
      console.log(&#39;getMessageLength执行了&#39;)
      return this.message.length
    },
    onClick () {
      this.i++
    }
  }
})
</script>

計算されたプロパティのパラメータの受け渡し

Vue インスタンスでは、計算されたプロパティがプロパティとして存在します。パラメータを渡したい場合は、クロージャを使用してプロパティ値を関数に変更する必要があります

computed: {
  fullName () {
    return function (maxLength) {
      return (this.firstName + ' ' + this.lastName).substring(0, maxLength)
    }
  }}

この場合、計算プロパティを使用することは、メソッドを使用することと同じです。

計算プロパティと監視プロパティ

計算プロパティは Vue インスタンスのデータ変更に応答でき、監視プロパティも Vue インスタンスのデータ変更を監視して応答できます。

Watch は、props、data、computed のデータ変更を監視し、関数を実行できます。
使用時:
computed は計算に使用されます。結果が返される必要があります。呼び出し時に括弧を追加する必要はありません。
1 つ以上の依存関係 に基づいて自動的にキャッシュされます。依存関係が変化しない場合、computed は自動的に計算されません。 監視は監視に使用され、一度に
1 つのデータのみを監視できます。。監視されているデータが変更された場合、関数を実行します。これには 2 つがあります。オプション:

immediate は、コンポーネントが初めてレンダリングされるときにこの関数を実行するかどうかを示します。デフォルトは false です。
deep は、オブジェクトの内部属性の変更を監視することを意味し、デフォルトは false です。

非同期計算の実装

1. 計算された属性は、非同期操作の結果ですが、Vuex のデータに依存できるため、store.state

2 を返すことで非同期操作の結果を取得できます。属性の非同期計算は、vue- async-computed プラグイン。list 属性には Promise が割り当てられますが、明らかに必要な結果ではありません

import Vue from 'vue'import AsyncComputed from 'vue-async-computed'import axios from 'axios'Vue.use(AsyncComputed)export default {
  name: 'MediaIndex',
  data () {
    return {
      pageNo: 1
    }
  },
  computed: {
    list () {
      return axios(`https://www.fastmock.site/mock/d6b39fde63cbe98a4f2fb92ff5b25a6d/api/products?pageNo=${this.pageNo}`)
        .then(res => res.data)
    }
  },
  asyncComputed: {
    asyncList () {
      return axios(`https://www.fastmock.site/mock/d6b39fde63cbe98a4f2fb92ff5b25a6d/api/products?pageNo=${this.pageNo}`)
        .then(res => res.data)
    }
  }}

vue-async-computed

Skillful計算されたプロパティを使用して props を計算します

次の例は props を実装します

双方向バインディング

export default {
  name: 'Pagination',
  props: {
   page: {
      type: Number,
      default: 1
    },
    limit: {
      type: Number,
      default: 10
    }
  },
 computed: {
  currentPage: {
    get() {
      return this.page    },
    set(val) {
      this.$emit('update:page', val)
    }
  },
  pageSize: {
    get() {
      return this.limit    },
    set(val) {
      this.$emit('update:limit', val)
    }
  }
 }

以上がVue の計算プロパティ API (計算) の詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。