So verwenden Sie das berechnete Attribut in Vue

Dieses Mal zeige ich Ihnen, wie Sie das berechnete Attribut in Vue verwenden. Was sind die Vorsichtsmaßnahmen , wenn Sie das berechnete Attribut in Vue verwenden? Hier ist ein praktischer Fall.

Die berechneten Eigenschaften in Vue werden berechnete Eigenschaften genannt . In diesem Abschnitt erfahren wir, wie man berechnete Eigenschaften in Vue verwendet. Denken Sie daran, dass Sie beim Erlernen des vorlagenbezogenen Wissens von Vue wussten, dass Sie Ausdrücke in Vorlagen verwenden können und Ausdrücke in Vorlagen sehr praktisch sind, diese Art der Durchquerung jedoch bestimmte Einschränkungen aufweist Sie werden tatsächlich verwendet für einige einfache Operationen. Das heißt, wenn einer Vorlage zu viel Logik hinzugefügt wird, kann sie übergewichtig und schwer zu warten sein. Schauen wir uns zunächst ein Beispiel an:

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

In diesem Beispiel ist die Vorlage nicht mehr einfach und klar. Sie müssen eine Weile zuschauen, bis Ihnen klar wird, dass Sie hier den umgedrehtenString der variablen Nachricht anzeigen möchten. Es wird schwieriger, damit umzugehen, wenn Sie die umgedrehte Zeichenfolge hier in der Vorlage mehrmals referenzieren möchten.

Aus diesem Grund sollten Sie für jede komplexe Logik berechnete Eigenschaften verwenden. Als Nächstes lernen wir die berechneten Eigenschaften in Vue kennen.

Berechnete Eigenschaften können verwendet werden, um in einer Ansicht angezeigte Eigenschaften schnell zu berechnen. Diese Berechnungen werden zwischengespeichert und nur bei Bedarf aktualisiert.

Es gibt mehrere Möglichkeiten, Werte für Ansichten in Vue festzulegen:

• Verwenden Sie Direktiven, um Datenwerte direkt an Ansichten zu binden

• Verwenden Sie einfache Ausdrücke, um einfache Transformationen für Inhalte durchzuführen

• Verwenden Sie FilterEinfach Konvertierung von Inhalten

Abgesehen davon können wir auch berechnete Eigenschaften verwenden, um den Anzeigewert basierend auf einem Wert oder einer Reihe von Werten im Datenmodell zu berechnen.

Berechnete Eigenschaft

Berechnete Eigenschaften ermöglichen es uns, komplexe Wertberechnungen für eine bestimmte Ansicht durchzuführen. Diese Werte werden an die Abhängigkeitswerte gebunden und nur bei Bedarf aktualisiert.

Beispielsweise könnten wir ein Ergebnisarray im Datenmodell haben:

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

Angenommen, wir möchten die Gesamtzahl aller Themen sehen. Für diese Aufgabe können wir keine Filter oder Ausdrücke verwenden.

• Filter: werden für einfache Datenformate verwendet, die an mehreren Stellen in der Anwendung benötigt werden.

• Ausdrücke: Erlauben Sie nicht die Verwendung von Stream-Operationen oder anderer komplexer Logik. Sie sollten es einfach halten

Zu diesem Zeitpunkt können berechnete Eigenschaften nützlich sein. Wir können dem Modell wie folgt einen berechneten Wert hinzufügen:

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

Das berechnete Attribut „totalMarks“ verwendet die Markierungen in den Array-Ergebnissen, um den Gesamtwert zu berechnen. Es durchläuft einfach die Werte und gibt die Zwischensumme zurück.

Den berechneten Wert können wir uns dann in der Ansicht anzeigen lassen:

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

Berechnete Eigenschaften vs. Methoden

Wir können die Methode in Vue verwenden, um die Gesamtpunktzahl des Probanden zu berechnen, und das endgültige Gesamtergebnis ist dasselbe.

Basierend auf dem obigen Beispiel verschieben wir die Funktion „totalMarks“ im berechneten Block in Methoden. Ersetzen Sie außerdem {{ totalMarks }} durch {{ totalMarks() }} in der Vorlage. Am Ende sehen Sie das gleiche Ergebnis, wie unten gezeigt:

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

Obwohl die Ausgabeergebnisse dieser beiden Methoden gleich sind, wird die Leistung einen verheerenden Einbruch erleiden. Bei diesem Ansatz wird die totalMarks()-Methode bei jedem Rendern der Seite einmal ausgeführt (z. B. bei jeder Änderung).

Wenn wir eine berechnete Eigenschaft haben, merkt sich Vue den Wert, von dem die berechnete Eigenschaft abhängt (in unserem Fall sind das die Ergebnisse). ). Dadurch kann Vue Werte nur dann berechnen, wenn sich Abhängigkeiten ändern. Andernfalls wird der zuvor zwischengespeicherte Wert zurückgegeben. Dies bedeutet auch, dass, solange sich die Ergebnisse nicht verändert haben, mehrere Besuche möglich sind Die berechnete Eigenschaft „totalMarks“ gibt sofort das Ergebnis der vorherigen Berechnung zurück, ohne dass die Funktion erneut ausgeführt werden muss.

Die beiden oben genannten Beispiele veranschaulichen auch, dass in Vue berechnete Eigenschaften basierend auf ihren Abhängigkeiten zwischengespeichert werden, Methoden jedoch nicht basierend auf ihren Abhängigkeiten zwischengespeichert werden. Daher bietet die Verwendung berechneter Eigenschaften eine bessere Leistung als Methoden.

Dies bedeutet auch, dass die folgende berechnete Eigenschaft nicht mehr aktualisiert wird, da Date.now() keine reaktive Abhängigkeit ist:

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 。

Da ich ein Anfänger in Vue bin, habe ich nur ein oberflächliches Verständnis der Recheneigenschaften von Vue. Wenn ich es von einer tieferen Ebene aus betrachte, wird es immer noch gewisse Probleme geben. Ich hoffe, ihr könnt mich korrigieren oder eure eigenen Erfahrungen mitteilen.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung nativer Ajax-Get- und Post-Methoden

Node.js injiziert große Mengen Datenmengen in MySQL

Funktion „Zurück zum Anfang“ mit requireJS hinzufügen

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das berechnete Attribut in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!