Der Unterschied zwischen berechneten Eigenschaften, Methoden und Überwachung in Vue

Für diejenigen, die gerade erst anfangen, Vue zu lernen, können die Unterschiede zwischen Methoden, berechneten Eigenschaften und Beobachtern etwas verwirrend sein. Auch wenn Sie mit jedem von ihnen oft mehr oder weniger das Gleiche erreichen können, ist es wichtig zu wissen, inwiefern sie besser sind als die anderen.

In diesem kurzen Tipp befassen wir uns mit diesen drei wichtigen Aspekten von Vue-Anwendungen und ihren Anwendungsfällen. Wir werden mit jeder dieser drei Methoden dieselbe Suchkomponente erstellen.

Methoden

Methoden sind mehr oder weniger das, was Sie erwarten würden – eine Funktion, die eine Eigenschaft eines Objekts ist. Sie können Methoden verwenden, um auf Ereignisse zu reagieren, die im DOM auftreten, oder Sie können sie von einer anderen Stelle in der Komponente aufrufen (z. B. in einer berechneten Eigenschaft oder einem Beobachter). Methoden werden verwendet, um häufig verwendete Funktionen zu gruppieren – zum Beispiel für die Bearbeitung von Formularübermittlungen oder den Aufbau wiederverwendbarer Funktionen, wie zum Beispiel das Senden von Ajax-Anfragen.

Sie können eine Methode in einer Vue-Instanz innerhalb des Methodenobjekts erstellen:

new Vue({
  el: "#app",
  methods: {
    handleSubmit() {}
  }
})

Wenn Sie sie in einer Vorlage verwenden möchten, können Sie Folgendes tun:

<div id="app">
  <button @click="handleSubmit">
    Submit
  </button>
</div>

Wir hängen den Event-Handler mit dem v-on an Direktive zu unserem DOM-Element, das auch mit dem Symbol @ abgekürzt werden kann. Die Methode „handleSubmit“ wird jedes Mal aufgerufen, wenn auf die Schaltfläche geklickt wird. Wenn Sie beispielsweise die erforderlichen Parameter im Methodenkörper übergeben möchten, können Sie Folgendes tun: @符号。

handleSubmit方法将在每次单击按钮时被调用。例如，当你想要传递方法体中需要的参数时，你可以执行以下操作：

<div id="app">
  <button @click="handleSubmit(event)">
    Submit
  </button>
</div>

在这里，我们传递了一个事件对象，例如，它可以防止我们在提交表单时阻止浏览器的默认操作。

但是，由于我们使用指令附加事件，因此可以利用修饰符更优雅地实现同一件事：@click.stop="handleSubmit"。

现在，让我们看一个使用方法筛选数组中的数据列表的示例。

在演示中，我们要呈现数据列表和搜索框。每当用户在搜索框中输入值时，呈现的数据都会更改。模板将如下所示：

<div id="app">
  <h2>Language Search</h2>

  <div class="form-group">
    <input
      type="text"
      v-model="input"
      @keyup="handleSearch"
      placeholder="Enter language"
      class="form-control"
    />
  </div>

  <ul v-for="(item, index) in languages" class="list-group">
    <li class="list-group-item" :key="item">{{ item }}</li>
  </ul>
</div>

正如您所看到的，我们引用一个handleSearch方法，每次用户在搜索字段中键入内容时都会调用该方法。我们需要创建方法和数据：

new Vue({
  el: '#app',
  data() {
    return {
      input: '',
      languages: []
    }
  },
  methods: {
    handleSearch() {
      this.languages = [
        'JavaScript',
        'Ruby',
        'Scala',
        'Python',
        'Java',
        'Kotlin',
        'Elixir'
      ].filter(item => item.toLowerCase().includes(this.input.toLowerCase()))
    }
  },
  created() { this.handleSearch() }
})

handleSearch方法使用输入字段的值更新列出的项目。需要注意的一件事是，在methods对象中，不需要使用this.handleSearch引用该方法（在react中必须这样做）。

计算属性

尽管以上示例中的搜索按预期工作，但更优雅的解决方案是使用计算属性。 计算属性对于从现有资源中组合新数据非常方便，并且与方法相比，它们的一大优点是可以缓存其输出。 这意味着，如果页面上与计算属性无关的某些内容发生更改，并且UI会重新呈现，则将返回缓存的结果，并且将不会重新计算计算属性，从而为我们节省了潜在的昂贵操作。

计算属性使我们能够使用可用的数据即时进行计算。 在这种情况下，我们有一系列需要排序的项目。 我们想要在用户在输入字段中输入值时进行排序。

我们的模板看起来与之前的迭代几乎相同，除了我们向v-for指令传递了一个计算属性（filteredList）：

<div id="app">
  <h2>Language Search</h2>
  <div class="form-group">
    <input
      type="text"
      v-model="input"
      placeholder="Enter language"
      class="form-control"
    />
  </div>
  <ul v-for="(item, index) in filteredList" class="list-group">
    <li class="list-group-item" :key="item">{{ item }}</li>
  </ul>
</div>

脚本部分略有不同。我们在data属性中声明语言（以前这是一个空数组），而不是将方法转移到计算属性中的方法：

new Vue({
  el: "#app",
  data() {
    return {
      input: '',
      languages: [
        "JavaScript",
        "Ruby",
        "Scala",
        "Python",
        "Java",
        "Kotlin",
        "Elixir"
      ]
    }
  },
  computed: {
    filteredList() {
      return this.languages.filter((item) => {
        return item.toLowerCase().includes(this.input.toLowerCase())
      })
    }
  }
})

filteredList 计算的属性将包含一个包含输入字段值的项目数组。 在第一次渲染时（当输入字段为空时），将渲染整个数组。 当用户在字段中输入值时，filteredList

computed: {
  fullName() {
    return `${this.firstName} ${this.lastName}`
  }
}

Hier übergeben wir ein Event-Objekt

, das uns beispielsweise daran hindert, die Standardaktion des Browsers beim Absenden eines Formulars zu blockieren.

Da wir jedoch Ereignisse mithilfe von Anweisungen anhängen, können wir Modifikatoren

verwenden eleganter Um dasselbe zu erreichen: @click.stop="handleSubmit". 🎜🎜Sehen wir uns nun ein Beispiel für die Verwendung einer Methode zum Filtern einer Liste von Daten in einem Array an. 🎜🎜In der Demo möchten wir die Datenliste und das Suchfeld rendern. Immer wenn der Benutzer einen Wert in das Suchfeld eingibt, ändern sich die gerenderten Daten. Die Vorlage sieht folgendermaßen aus: 🎜

<div id="app">
  <h2>Language Search</h2>

  <div class="form-group">
    <input
      type="text"
      v-model="input"
      placeholder="Enter language"
      class="form-control"
    />
  </div>

  <ul v-for="(item, index) in languages" class="list-group">
    <li class="list-group-item" :key="item">{{ item }}</li>
  </ul>
</div>

🎜Wie Sie sehen können, verweisen wir auf eine handleSearch-Methode, die jedes Mal aufgerufen wird, wenn der Benutzer etwas in das Suchfeld eingibt. Wir müssen Methoden und Daten erstellen: Die Methode 🎜

new Vue({
  el: "#app",
  data() {
    return {
      input: '',
      languages: []
    }
  },
  watch: {
    input: {
      handler() {
        this.languages = [
          'JavaScript',
          'Ruby',
          'Scala',
          'Python',
          'Java',
          'Kotlin',
          'Elixir'
        ].filter(item => item.toLowerCase().includes(this.input.toLowerCase()))
      },
      immediate: true
    }
  }})

🎜handleSearch aktualisiert die aufgelisteten Elemente mit dem Wert des Eingabefelds. Zu beachten ist, dass Sie im Methodenobjekt nicht mit this.handleSearch auf die Methode verweisen müssen (Sie müssen dies in React tun). 🎜🎜🎜🎜🎜Berechnete Eigenschaften🎜🎜🎜Während die Suche im obigen Beispiel wie erwartet funktioniert, ist die Verwendung von Berechnete Eigenschaften 🎜. Berechnete Eigenschaften eignen sich sehr gut zum Kombinieren neuer Daten aus vorhandenen Ressourcen. Einer ihrer großen Vorteile gegenüber Methoden besteht darin, dass ihre Ausgabe zwischengespeichert werden kann. Das bedeutet, dass, wenn sich etwas auf der Seite ändert, das nicht mit der berechneten Eigenschaft zusammenhängt, und die Benutzeroberfläche neu gerendert wird, die zwischengespeicherten Ergebnisse zurückgegeben werden und die berechnete Eigenschaft nicht neu berechnet wird, was uns einen potenziell teuren Vorgang erspart. 🎜🎜Berechnete Eigenschaften ermöglichen es uns, Berechnungen im Handumdrehen anhand der verfügbaren Daten durchzuführen. In diesem Fall haben wir eine Reihe von Artikeln, die sortiert werden müssen. Wir möchten sortieren, wenn der Benutzer einen Wert in das Eingabefeld eingibt. 🎜🎜Unsere Vorlage sieht fast genauso aus wie die vorherige Iteration, außer dass wir eine berechnete Eigenschaft (filteredList) an die v-for-Direktive übergeben: 🎜rrreee🎜Skriptabschnitt weggelassen Es gibt Unterschiede. Wir deklarieren die Sprache im Attribut data (zuvor war dies ein leeres Array), anstatt die Methode in eine berechnete Eigenschaft zu verschieben: 🎜rrreee🎜filteredList Die berechnete Eigenschaft enthält ein Array von Elementen, das die Eingabefeldwerte enthält. Beim ersten Rendern (wenn das Eingabefeld leer ist) wird das gesamte Array gerendert. Wenn der Benutzer einen Wert in das Feld eingibt, gibt filteredList ein Array zurück, das den in das Feld eingegebenen Wert enthält. 🎜🎜Bei der Verwendung berechneter Eigenschaften müssen die zu berechnenden Daten verfügbar sein, andernfalls kommt es zu einem Anwendungsfehler. 🎜🎜Die berechnete Eigenschaft erstellt eine neue filteredList-Eigenschaft, deshalb können wir in der Vorlage darauf verweisen. Jedes Mal, wenn sich eine Abhängigkeit ändert, ändert sich der Wert von filteredList. Die leicht zu ändernde Abhängigkeit ist hier der Wert der Eingabe. 🎜

最后，请注意，计算属性使我们可以创建一个变量，以在由一个或多个数据属性构建的模板中使用。一个常见的示例是fullName从用户的名字和姓氏创建一个，如下所示：

computed: {
  fullName() {
    return `${this.firstName} ${this.lastName}`
  }
}

在模板中，您可以执行{{fullName}}。每当第一个或最后一个名称的值发生变化时，fullName的值就会发生变化。

观察者

当您希望对发生的更改(例如，对一个道具或数据属性)执行一个操作时，观察者非常有用。正如Vue文档所述，当您希望执行异步或昂贵的操作来响应数据更改时，这是最有用的。

在我们的搜索示例中，我们可以返回到方法示例，并为input data属性设置一个监视程序。然后，我们可以对input值的任何变化做出反应。

首先，让我们还原模板以利用languages data属性：

<div id="app">
  <h2>Language Search</h2>

  <div class="form-group">
    <input
      type="text"
      v-model="input"
      placeholder="Enter language"
      class="form-control"
    />
  </div>

  <ul v-for="(item, index) in languages" class="list-group">
    <li class="list-group-item" :key="item">{{ item }}</li>
  </ul>
</div>

然后我们的Vue实例将如下所示：

new Vue({
  el: "#app",
  data() {
    return {
      input: '',
      languages: []
    }
  },
  watch: {
    input: {
      handler() {
        this.languages = [
          'JavaScript',
          'Ruby',
          'Scala',
          'Python',
          'Java',
          'Kotlin',
          'Elixir'
        ].filter(item => item.toLowerCase().includes(this.input.toLowerCase()))
      },
      immediate: true
    }
  }})

在这里，我已经将观察者作为对象（而不是函数）。这样，我可以指定一个immediate属性，该属性将导致观察者在安装组件后立即触发。这具有填充列表的效果。然后，运行的函数在该handler属性中。

结论

正如他们所说，强大的力量伴随着巨大的责任。Vue为您提供了构建出色应用程序所需的超能力。知道何时使用它们是建立用户喜爱的关键。方法、计算属性和观察者是您可以使用的超能力的一部分。展望未来，一定要好好利用它们!

相关推荐：

2020年前端vue面试题大汇总（附答案）

vue教程推荐：2020最新的5个vue.js视频教程精选

更多编程相关知识，请访问：编程入门！！

Das obige ist der detaillierte Inhalt vonDer Unterschied zwischen berechneten Eigenschaften, Methoden und Überwachung in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!