Propriétés calculées et cas d'utilisation des écouteurs pour VUE

Cette fois, je vais vous présenter les cas d'utilisation des propriétés calculées et des auditeurs de VUE. Quelles sont les précautions lors de l'utilisation des propriétés calculées et des auditeurs de VUE. Voici les cas réels, jetons un coup d'œil.

Écrit au début

L'utilisation de vue dans l'article précédent parlait de vuecycle de vie, des instances de vue et de la syntaxe du modèle. Cette fois, nous parlerons des propriétés calculées et des écouteurs de vue

propriétés calculées

Les expressions dans le modèle dans vue sont très pratiques, mais l'intention initiale de leur conception est Utilisé pour des opérations simples. Mettre trop de logique dans un modèle peut le rendre trop lourd et difficile à maintenir. Par exemple :

<div id="example">
  {{ message.split(&#39;&#39;).reverse().join(&#39;&#39;) }}
</div>

Ici, le modèle n'est plus une simple logique déclarative. Vous devez l'examiner pendant un certain temps pour comprendre ce que fait cette chaîne de code, et cela devient encore plus difficile à gérer lorsque vous souhaitez la référencer plusieurs fois dans un modèle.
Donc, pour toute logique complexe, vous devez utiliser des propriétés calculées.

Par exemple,

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
  el: &#39;#example&#39;,
  data: {
    message: &#39;Hello&#39;
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例      return this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)
    }
  }
})
Original message: "Hello"
Computed reversed message: "olleH"

déclare ici une propriété calculée reverseMessage. La fonction fournie par vue sera utilisée comme fonction getter de la propriété vm.reversedMessage :

console.log(vm.reversedMessage) // => 'olleH'vm.message = 'Goodbye'console. log(vm. reversedMessage) // => 'eybdooG'

Vous pouvez lier les propriétés calculées dans des modèles tout comme les propriétés normales. Vue sait que vm.reversedMessage dépend de vm.message, donc lorsque vm.message change, toutes les liaisons qui dépendent de vm.reversedMessage sont également mises à jour. Et le meilleur, c'est que Vue a créé cette dépendance de manière déclarative : la fonction getter de la propriété calculée n'a aucun effet secondaire, ce qui la rend plus facile à tester et à comprendre.

Mise en cache des propriétés calculées et méthodes

Vous avez peut-être remarqué que vue peut obtenir le même effet en appelant des méthodes dans des expressions :

<p>Reversed message: "{{ reversedMessage() }}"</p>
// 在组件中
methods: {
  reversedMessage: function () {    return this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)
  }
}

vue peut mettre en cache la même fonction A est défini comme une méthode plutôt que comme une propriété calculée. Le résultat final est en effet exactement le même dans les deux sens. Toutefois, la différence réside dans le fait que les propriétés calculées sont mises en cache en fonction de leurs dépendances. Une propriété calculée n'est réévaluée que lorsque ses dépendances associées changent. Cela signifie que tant que le message n'a pas changé, plusieurs accès à la propriété calculée reverseMessage renverront immédiatement le résultat calculé précédent sans avoir à réexécuter la fonction.
Cela signifie également que les propriétés calculées suivantes ne seront plus mises à jour, puisque Date.now() n'est pas une dépendance réactive :

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

En revanche, chaque fois qu'un nouveau rendu est déclenché, l'appel La méthode exécutera toujours à nouveau la fonction.

Pourquoi avons-nous besoin de mise en cache ? Supposons que nous ayons une propriété A coûteuse en termes de calcul, qui nécessite de parcourir un vaste tableau et d'effectuer de nombreux calculs. Nous pourrions alors avoir d’autres propriétés calculées qui dépendent de A . Sans mise en cache, nous exécuterions inévitablement le getter de A plusieurs fois ! Si vous ne souhaitez pas de mise en cache, utilisez plutôt des méthodes.

Propriétés calculées et propriétés d'écoute

Vue fournit un moyen plus général d'observer et de répondre aux modifications de données sur les instances Vue : les propriétés d'écoute. Lorsque certaines données doivent changer lorsque d'autres données changent, il est facile d'abuser des montres, surtout si vous avez déjà utilisé AngularJS. Cependant, il est souvent préférable d’utiliser des propriétés calculées plutôt que des rappels de surveillance impératifs. Prenons cet exemple :

Le code ci-dessus est impératif et répétitif. Comparez cela à la version de la propriété calculée :

<div id="demo">{{ fullName }}</div>
var vm = new Vue({
  el: &#39;#demo&#39;,
  data: {
    firstName: &#39;Foo&#39;,
    lastName: &#39;Bar&#39;,
    fullName: &#39;Foo Bar&#39;
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + &#39; &#39; + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + &#39; &#39; + val
    }
  }
})

Setter de propriétés calculées

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

Les propriétés calculées n'ont que des getters par défaut, mais vous pouvez également fournir un setter si nécessaire :

Maintenant, lors de l'exécution de vm.fullName = 'John Doe', le setter sera appelé et vm.firstName et vm.lastName seront mis à jour en conséquence.

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

Écouteurs

Bien que les propriétés calculées soient plus appropriées dans la plupart des cas, un écouteur personnalisé est parfois nécessaire. C'est pourquoi Vue propose un moyen plus général de répondre aux modifications de données via l'option de surveillance. Cette approche est particulièrement utile lorsque vous devez effectuer des opérations asynchrones ou coûteuses lorsque les données changent.

Par exemple :

Résultat :

<div id="watch-example">
  <p>
    Ask a yes/no question:
    <input v-model="question">
  </p>
  <p>{{ answer }}</p>
</div>
<!-- 因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没有重复 -->
<!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
<script>
var watchExampleVM = new Vue({
  el: &#39;#watch-example&#39;,
  data: {
    question: &#39;&#39;,
    answer: &#39;I cannot give you an answer until you ask a question!&#39;
  },
  watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    question: function (newQuestion, oldQuestion) {
      this.answer = &#39;Waiting for you to stop typing...&#39;
      this.getAnswer()
    }
  },
  methods: {
    // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
    // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
    // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
    // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
    // 请参考：https://lodash.com/docs#debounce
    getAnswer: _.debounce(
      function () {        if (this.question.indexOf(&#39;?&#39;) === -1) {
          this.answer = &#39;Questions usually contain a question mark. ;-)&#39;
          return
        }
        this.answer = &#39;Thinking...&#39;
        var vm = this
        axios.get(&#39;https://yesno.wtf/api&#39;)
          .then(function (response) {
            vm.answer = _.capitalize(response.data.answer)
          })
          .catch(function (error) {
            vm.answer = &#39;Error! Could not reach the API. &#39; + error
          })
      },
      // 这是我们为判定用户停止输入等待的毫秒数      500
    )
  }
})
</script>

Dans cet exemple, l'utilisation de l'option watch nous permet d'effectuer une opération asynchrone (accéder à une API), de limiter la fréquence à laquelle nous effectuons le opération, et configurer les états intermédiaires avant d'arriver au résultat final. Ce sont des choses que les propriétés calculées ne peuvent pas faire.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Cycle de vie de vue, instance de vue, syntaxe du modèle

Partage WeChat frontal de la configuration jssdk : signature invalide incorrecte Solution signature

Expérience d'un entretien front-end

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!