La différence entre les propriétés calculées, les méthodes et la surveillance dans Vue

Pour ceux qui commencent tout juste à apprendre Vue, les différences entre les méthodes, les propriétés calculées et les observateurs peuvent être un peu déroutantes. Bien que vous puissiez souvent utiliser chacun d’eux pour accomplir plus ou moins la même chose, il est important de savoir en quoi ils sont meilleurs que les autres.

Dans cette astuce rapide, nous examinerons ces trois aspects importants des applications Vue et leurs cas d'utilisation. Nous allons créer le même composant de recherche en utilisant chacune de ces trois méthodes.

Méthode

Méthode est plus ou moins ce à quoi vous vous attendez - une fonction qui est une propriété d'un objet. Vous pouvez utiliser des méthodes pour réagir aux événements qui se produisent dans le DOM, ou vous pouvez les appeler depuis un autre endroit du composant (par exemple, dans une propriété calculée ou un observateur). Les méthodes sont utilisées pour regrouper les fonctionnalités couramment utilisées, par exemple pour gérer les soumissions de formulaires ou pour créer des fonctionnalités réutilisables, telles que l'envoi de requêtes Ajax.

Vous pouvez créer une méthode dans une instance Vue à l'intérieur de l'objet méthodes :

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

Lorsque vous souhaitez l'utiliser dans un modèle, vous pouvez procéder comme suit :

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

Nous utilisons la directive v-on pour attacher un gestionnaire d'événements à notre élément DOM, qui peut également être abrégé avec le symbole @.

La méthode handleSubmit sera appelée à chaque fois que vous cliquerez sur le bouton. Par exemple, lorsque vous souhaitez passer les paramètres requis dans le corps de la méthode, vous pouvez faire ce qui suit :

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

Ici, on passe un Event Object, par exemple, ce qui nous empêche de Empêche l'action par défaut du navigateur lors de la soumission d'un formulaire.

Cependant, puisque nous attachons des événements à l'aide de directives, nous pouvons réaliser la même chose avec plus d'élégance en utilisant le modificateur  : @click.stop="handleSubmit".

Regardons maintenant un exemple d'utilisation d'une méthode pour filtrer une liste de données dans un tableau.

Dans la démo, nous souhaitons afficher une liste de données et un champ de recherche. Chaque fois que l'utilisateur saisit une valeur dans la zone de recherche, les données rendues changent. Le modèle ressemblera à ceci :

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

Comme vous pouvez le voir, nous référençons une méthode handleSearch qui sera appelée à chaque fois que l'utilisateur tape dans le champ de recherche. Nous devons créer des méthodes et des données : la méthode

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 met à jour les éléments répertoriés avec la valeur du champ de saisie. Une chose à noter est que dans l'objet méthodes, vous n'avez pas besoin de référencer la méthode à l'aide de this.handleSearch (vous devez le faire en réaction).

Propriété calculée

Bien que la recherche dans l'exemple ci-dessus fonctionne comme prévu, une solution plus élégante consiste à utiliser Propriété calculée. Les propriétés calculées sont très pratiques pour combiner de nouvelles données provenant de ressources existantes, et l'un de leurs grands avantages par rapport aux méthodes est que leur sortie peut être mise en cache. Cela signifie que si quelque chose sur la page qui n'est pas lié à la propriété calculée change et que l'interface utilisateur est restituée, les résultats mis en cache seront renvoyés et la propriété calculée ne sera pas recalculée, ce qui nous évitera une opération potentiellement coûteuse.

Les propriétés calculées nous permettent d'effectuer des calculs à la volée en utilisant les données disponibles. Dans ce cas, nous avons une série d’éléments qui doivent être triés. Nous voulons trier lorsque l'utilisateur saisit une valeur dans le champ de saisie.

Notre modèle ressemble presque à l'itération précédente, sauf que nous passons une propriété calculée (v-for) à la directive 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>

La partie script est légèrement différente. Nous déclarons la langue dans un attribut data (auparavant c'était un tableau vide), au lieu de déplacer la méthode dans une propriété calculée :

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 La propriété calculée contiendra un tableau de valeurs de champ d'entrée de articles. Lors du premier rendu (lorsque le champ de saisie est vide), le tableau entier est rendu. Lorsque l'utilisateur saisit une valeur dans le champ, filteredList renverra un tableau contenant la valeur saisie dans le champ.

Lors de l'utilisation de propriétés calculées, les données à calculer doivent être disponibles, sinon une erreur d'application en résultera.

La propriété calculée crée une nouvelle propriété filteredList, c'est pourquoi nous pouvons la référencer dans le modèle. Chaque fois qu'une dépendance change, la valeur de filteredList change. La dépendance facile à modifier ici est la valeur de l'entrée.

最后，请注意，计算属性使我们可以创建一个变量，以在由一个或多个数据属性构建的模板中使用。一个常见的示例是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视频教程精选

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!