Vue で計算された属性を使用する方法

今回は、Vue で computed アトリビュートを使用する方法を説明します。Vue で computed アトリビュートを使用する際の 注意事項 について、実際のケースを見てみましょう。

Vue の計算プロパティは計算プロパティと呼ばれます 。このセクションでは、Vue で計算されたプロパティを使用する方法を学びます。 Vue のテンプレート関連の知識を学ぶときは、テンプレートで

式 を使用できることを覚えておいてください。テンプレート内の式は非常に便利ですが、この種の走査にはいくつかの単純な操作に実際に使用されるため、一定の制限があります。つまり、テンプレートにロジックを入れすぎると、テンプレートが太くなり、保守が困難になる可能性があります。まずは例を見てみましょう:

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

この例では、テンプレートはもはや単純明快ではありません。ここに変数メッセージを表示するために反転された

string があることがわかるまで、しばらく観察する必要があります。ここで反転した文字列をテンプレート内で複数回参照したい場合、対処がさらに難しくなります。

このため、複雑なロジックでは計算されたプロパティを使用する必要があります。次に、Vue の計算プロパティについて学びましょう。

計算されたプロパティを使用すると、ビューに表示されるプロパティをすばやく計算できます。これらの計算はキャッシュされ、必要な場合にのみ更新されます。

Vue でビューの値を設定するには複数の方法があります:

• ディレクティブを使用してデータ値をビューに直接バインドします

単純な変換には単純な式を使用します
• フィルターを使用します単純な変換にはフィルター

  を使用します

これとは別に、計算プロパティを使用して、データ モデル内の値または値のセットに基づいて表示値を計算することもできます。

計算されたプロパティ

計算されたプロパティを使用すると、指定されたビューで複雑な値の計算を実行できます。これらの値は依存関係の値にバインドされ、必要な場合にのみ更新されます。

たとえば、データ モデルに結果配列を含めることができます:

data () {
  return {
    results: [
      {
        name: 'English',
        marks: 70
      },
      {
        name: 'Math',
        marks: 80
      },
      {
        name: 'History',
        marks: 90
      }
    ]
  }
}

すべてのトピックの合計数を確認したいとします。このタスクを実行するためにフィルターや式を使用することはできません。

• フィルター: アプリケーション内の複数の場所で必要な単純なデータ形式用

• 式: ストリーム操作やその他の複雑なロジックの使用を許可しません。シンプルにしておくべきです

このとき、計算されたプロパティが便利です。次のように計算された値をモデルに追加できます:

computed: {
  totalMarks: function () {
    let total = 0
    let me = this
    for (let i = 0; i < me.results.length; i++) {
      total += parseInt(me.results[i].marks)
    }
    return total
  }
}

totalMarks 計算属性は、配列結果内のマークを使用して合計値を計算します。値をループして小計を返すだけです。

その後、計算された値をビューに表示できます:

<p id="app">
  <p v-for="subject in results">
    <input v-model="subject.marks">
    <span>Marks for {{ subject.name }}: {{ subject.marks }}</span>
  </p>
  <p>
    Total marks are: {{ totalMarks }}
  </p>
</p>

計算されたプロパティとメソッド

Vue のメソッドを使用して科目の合計スコアを計算することができ、最終的な合計結果は同じになります。

上記の例に基づいて、計算ブロック内の totalMarks 関数をメソッドに移動します。また、テンプレート内の {{ totalMarks }} を {{ totalMarks() }} に置き換えます。 以下に示すように、同じ結果が表示されます:

let app = new Vue({
 el: '#app',
 data () {
  return {
   results: [
    {
     name: '英语',
     marks: 70
    },
    {
     name: '数学',
     marks: 80
    },
    {
     name: '历史',
     marks: 90
    }
   ]
  }
 },
 methods: {
  totalMarks: function () {
   let total = 0
   let me = this
   for (let i = 0; i < me.results.length; i++) {
    total += parseInt(me.results[i].marks)
   }
   return total
  }
 }
})

これら 2 つの方法の出力結果は同じですが、パフォーマンスは壊滅的な打撃を受けます。このアプローチでは、totalMarks() メソッドは、ページがレンダリングされるたびに (たとえば、変更ごとに) 1 回実行されます。

計算されたプロパティがある場合、Vue は計算されたプロパティが依存する値 (この場合は結果) を記憶します。 ）。こうすることで、Vue は依存関係が変更された場合にのみ値を計算できるようになります。それ以外の場合は、以前にキャッシュされた値が返されます。これは、結果が変わらない限り、複数の訪問が可能であることも意味します。 totalMarks 計算プロパティは、関数を再度実行することなく、前の計算の結果をすぐに返します。

上の 2 つの例は、Vue では計算されたプロパティは依存関係に基づいてキャッシュされますが、メソッドは依存関係に基づいてキャッシュされないことも示しています。したがって、計算されたプロパティを使用すると、メソッドよりもパフォーマンスが向上します。

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

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

相比之下，每当触发重新渲染时，方法的调用方式将总是再次执行函数。因此，函数必须是一个纯函数。它不能有副作用。输出只能依赖于传递给函数的值。

那么我们为什么需要缓存？假设我们有一个性能开销比较大的的计算属性 A ，它需要遍历一个极大的数组和做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter ！如果你不希望有缓存，请用方法来替代。

计算属性的 setter

计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：

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]
    }
  }
}

你在输入框中输入一个 fullName ，然后点击 set 按钮，可以看到对应的效果。你现在再运行 app.fullName="Airen liao" 时，计算属性的 setter 会被调用， app.firstName 和 app.lastName 也相应地会被更新。

观察者

虽然计算属性在大多数情况下更合适，但有时候也需要一个自定义的 watcher 。这是为什么Vue通过 watch 选项提供一个更通用的方法，来响应数据的变化。当你想要在数据变化响应时，执行异步操作或开销较大的操作，这是很有用的。

Vue确实提供了一种更通用的方式来观察和响应Vue实例上的数据变动： watch 属性 。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch 。然而，通常更好的想法是使用计算属性而不是命令式的 watch 回调。比如下面的示例：

<p id="app">
  {{ fullName }}
</p>
let app = new Vue({
  el: '#app',
  data () {
    return {
      firstName: 'Foo',
      lastName: 'Bar',
      fullName: 'Foo Bar'
    }
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

上面代码是命令式的和重复的。将它与计算属性的版本进行比较：

let app = new Vue({
  el: '#app',
  data () {
    return {
      firstName: 'Foo',
      lastName: 'Bar'
    }
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

在Vue中使用异步计算属性

Vue中的计算属性非常好。它们允许你执行复杂的操作或数据格式，同时最大限度地执行依赖项计算的性能，只在依赖更改时更新视图。但遗憾的是，它们完全是同步的。

值得庆幸的是，有一个插件。使用vue-async-computed 包可以通地将一个 promise 的值绑定到组件属性来创建和使用组件中的异步计算属性。

我们可以在项目的根目录下通过 yarn 或 npm 来安装 vue-async-computed 插件：

# Yarn
$ yarn add vue-async-computed
# NPM
$ npm i vue-async-computed --save

接下来在你的项目中开启这个插件：

// main.js
import Vue from 'vue';
import AsyncComputed from 'vue-async-computed'
import App from 'App.vue';
Vue.use(AsyncComputed);
new Vue({
  el: '#app',
  render: h => h(App)
});

如果你和我一样，对Vue的构建工具不是很熟悉的话，我建议你使用Vue官方提供的构建工具 Vue CLI 。默认情况，它提供了五种模板，你可以根据自己喜欢的方式选择自己需要的模板即可。

确认在项目中引用 vue-async-computed 之后，咱们就可以开始使用这个插件了。使用如何使用这个插件之前，先来简单的了解一些概念。

在Vue中标准计算属性和异步属性之间有一些区别：

• 异步属性不能有 setter

• 直到 promise 的 resolve 为止，除非 default 被设置，否则该值为 null

在大多数情况下，你可以将它们视为返回 promise 的计算属性。

<!-- MyComponent.vue -->
<template>
  <!-- 在一两秒后 myResolvedValue将变成"*Fancy* Resolved Value" -->
  <h2>Asynchronous Property {{ myResolvedValue }}</h2>
</template>
<script>
  export default {
    asyncComputed: {
      myResolvedValue () {
        return new Promise((resolve, reject) => {
          setTimeout(() => resolve('*Fancy* Resolved Value!'), 1000)
        })
      }
    }
  }
</script>

使用ES7 / ES2016的 async / await ，这将变得更简单：

<!-- MyComponent.vue -->
<template>
  <!-- 在一两秒后 myResolvedValue将变成"*Fancy* Resolved Value" -->
  <h2>Asynchronous Property {{ myResolvedValue }}</h2>
</template>
<script>
  function fancinessComesLater () {
    return new Promise((resolve, reject) => {
      setTimeout(() => resolve('*Fancy* Resolved Value!'), 1000)
    })
  }
  export default {
    asyncComputed: {
      async myResolvedValue() {
        return await fancinessComesLater()
      }
    }
  }
</script>

有关于vue-async-computed 更详细的使用和介绍，可以阅读其 官网 提供的相关介绍。

总结

今天主要学习了Vue中的计算属性。在Vue中的计算属性可以让我们很好的监听多个数据或者一个数据来维护返回一个状态值，只要其中一个或多个数据发生变化，则会重新计算整个函数体，重新皇家马德里回状态值，从而更新对应的视图（View）。其次，计算属性具有缓存，相比Vue中的方法而言，性能更佳。但Vue中的计算属性都是同步的，如果需要异步我们得依赖于vue-async-computed 。

私は Vue の初心者なので、Vue の計算特性については表面的なものしか理解していませんが、より深いレベルから見ても、依然として特定の問題が存在します。皆さんが私を修正したり、あなた自身の経験を提供していただければ幸いです。

この記事の事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

ネイティブ Ajax の get メソッドと post メソッドの使用方法の詳細な説明

Node.js は MySQL に大量のデータを挿入します

requireJS を使用して先頭に戻る関数を追加する

以上がVue で計算された属性を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。