Propriétés calculées de Vue et analyse du code de cas d'écoute

Cette fois, je vais vous présenter le calcul de vue attribut et l'analyse du code de cas d'écouteur. Quelles sont les précautions pour implémenter l'attribut de calcul de vue et l'écouteur. Ce qui suit est un cas pratique, un. Levez-vous et jetez un œil.

Exemple de base

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

Résultat :

Message original : "Bonjour"
Calculé message inversé : "olleH"

Ici, nous déclarons un attribut calculé reverseMessage. La fonction que nous fournissons 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 ouvrir la console du navigateur et modifier vous-même la vm dans l'exemple. La valeur de vm.reversedMessage dépend toujours de la valeur de vm.message.

Vous pouvez lier des 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 seront également mises à jour. Et le meilleur, c'est que nous avons 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

calcul Mise en cache des propriétés vs méthodes

Vous avez peut-être remarqué que nous pouvons obtenir le même effet en appelant une méthode à l'intérieur d'une expression  :

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

Nous pouvons définir la même fonction qu'une méthode au lieu d'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, un nouveau rendu est déclenché à chaque fois, la méthode appelante 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 vs 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 :

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

Bien mieux, n'est-ce pas ?

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

Setters pour les propriétés calculées

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

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

, le setter sera appelé et vm.firstName et vm.lastName seront mis à jour en conséquence.

vm.fullName = 'John Doe'

É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 changements 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 :

<p id="watch-example">
 <p>
  Ask a yes/no question:
  <input v-model="question">
 </p>
 <p>{{ answer }}</p>
</p>
<!-- 因为 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: '#watch-example',
 data: {
  question: '',
  answer: 'I cannot give you an answer until you ask a question!'
 },
 watch: {
  // 如果 `question` 发生改变，这个函数就会运行
  question: function (newQuestion, oldQuestion) {
   this.answer = 'Waiting for you to stop typing...'
   this.getAnswer()
  }
 },
 methods: {
  // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
  // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
  // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
  // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
  // 请参考：https://lodash.com/docs#debounce
  getAnswer: _.debounce(
   function () {
    if (this.question.indexOf('?') === -1) {
     this.answer = 'Questions usually contain a question mark. ;-)'
     return
    }
    this.answer = 'Thinking...'
    var vm = this
    axios.get('https://yesno.wtf/api')
     .then(function (response) {
      vm.answer = _.capitalize(response.data.answer)
     })
     .catch(function (error) {
      vm.answer = 'Error! Could not reach the API. ' + error
     })
   },
   // 这是我们为判定用户停止输入等待的毫秒数
   500
  )
 }
})
</script>

Posez une question oui/non :

Je ne peux pas vous donner de réponse tant que vous posez une question !

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 l'opération et de définir un

intermédiaire avant nous obtenons le résultat final 🎜>Statut

. Ce sont des choses que les propriétés calculées ne peuvent pas faire.

En plus de l'option watch, vous pouvez également utiliser l'API impérative vm.$watch.

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 recommandée :

Explication détaillée des étapes pour utiliser vuex et les composants ensemble

Vue utilise vux-ui personnalisé vérification du formulaire Notes Quels sont les problèmes

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!