


Explication détaillée du calcul de Vue.js et de l'utilisation des propriétés de l'écouteur
Cette fois, je vous apporte une explication détaillée du calcul de Vue.js et de l'utilisation des propriétés de l'écouteur. Quelles sont les précautions pour le calcul de Vue.js et l'utilisation des propriétés de l'écouteur. Voici des cas pratiques. un coup d'oeil.
1. Présentation
Propriétés calculées
L'expression dans le modèle est très pratique, mais ils ont été initialement conçus pour des calculs simples. Mettre trop de logique dans un modèle peut le rendre trop lourd et difficile à maintenir. Par exemple :
<p id="example"> {{ message.split('').reverse().join('') }} </p>
Ici, le modèle n'est plus une simple logique déclarative. Il faut regarder un moment pour se rendre compte qu'ici on veut afficher lachaîne inversée du message variable. Cela devient plus difficile à gérer lorsque vous souhaitez référencer la chaîne inversée ici plusieurs fois dans le modèle.
Ainsi, pour toute logique complexe, vous devez utiliser des propriétés calculées.
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 :
Ici, nous déclarons une propriété calculée 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 lier les propriétés calculées dans le modèle 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 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.
2. Cache d'attributs calculés vs méthode
Vous avez peut-être remarqué que nous pouvons 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('').reverse().join('') } }
On peut définir la même fonction comme 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 la propriété calculée ci-dessous ne sera plus mise à jour, car 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é , la méthode appelante exécutera toujours à nouveau la fonction.
Pourquoi avons-nous besoin de mise en cache ?
Supposons que nous ayons un attribut de calcul A qui a une surcharge de performances relativement importante. Il doit parcourir un énorme tableau et 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.
3. 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 données sur les instances Vue Modifié : propriétés d'écoute . Lorsque vous avez des données qui 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.
Pensez à cet exemple
<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 } } })
Le code ci-dessus est impératif et répétitif. Comparez-le à la version de la propriété calculée :
var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } } })
N'est-ce pas beaucoup mieux.
4. 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
// ... 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] } } } // ...
现在再运行 vm.fullName = 'John Doe' 时,setter 会被调用,vm.firstName 和 vm.lastName 也会相应地被更新。
五、侦听器
虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。
例如:
<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>
结果:当没有输入?号,那么显示如下:
当有?时候会输出“yes”或者“no”
具体案例效果地址:侦听器
在这个示例中,使用 watch 选项允许我们执行异步操作 (访问一个 API),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这些都是计算属性无法做到的。
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
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!

Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

AI Hentai Generator
Générez AI Hentai gratuitement.

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Comment utiliser WebSocket et JavaScript pour mettre en œuvre un système de reconnaissance vocale en ligne Introduction : Avec le développement continu de la technologie, la technologie de reconnaissance vocale est devenue une partie importante du domaine de l'intelligence artificielle. Le système de reconnaissance vocale en ligne basé sur WebSocket et JavaScript présente les caractéristiques d'une faible latence, d'un temps réel et d'une multiplateforme, et est devenu une solution largement utilisée. Cet article explique comment utiliser WebSocket et JavaScript pour implémenter un système de reconnaissance vocale en ligne.

WebSocket et JavaScript : technologies clés pour réaliser des systèmes de surveillance en temps réel Introduction : Avec le développement rapide de la technologie Internet, les systèmes de surveillance en temps réel ont été largement utilisés dans divers domaines. L'une des technologies clés pour réaliser une surveillance en temps réel est la combinaison de WebSocket et de JavaScript. Cet article présentera l'application de WebSocket et JavaScript dans les systèmes de surveillance en temps réel, donnera des exemples de code et expliquera leurs principes de mise en œuvre en détail. 1. Technologie WebSocket

Comment utiliser WebSocket et JavaScript pour mettre en œuvre un système de réservation en ligne. À l'ère numérique d'aujourd'hui, de plus en plus d'entreprises et de services doivent fournir des fonctions de réservation en ligne. Il est crucial de mettre en place un système de réservation en ligne efficace et en temps réel. Cet article explique comment utiliser WebSocket et JavaScript pour implémenter un système de réservation en ligne et fournit des exemples de code spécifiques. 1. Qu'est-ce que WebSocket ? WebSocket est une méthode full-duplex sur une seule connexion TCP.

Introduction à l'utilisation de JavaScript et de WebSocket pour mettre en œuvre un système de commande en ligne en temps réel : avec la popularité d'Internet et les progrès de la technologie, de plus en plus de restaurants ont commencé à proposer des services de commande en ligne. Afin de mettre en œuvre un système de commande en ligne en temps réel, nous pouvons utiliser les technologies JavaScript et WebSocket. WebSocket est un protocole de communication full-duplex basé sur le protocole TCP, qui peut réaliser une communication bidirectionnelle en temps réel entre le client et le serveur. Dans le système de commande en ligne en temps réel, lorsque l'utilisateur sélectionne des plats et passe une commande

Tutoriel JavaScript : Comment obtenir le code d'état HTTP, des exemples de code spécifiques sont requis Préface : Dans le développement Web, l'interaction des données avec le serveur est souvent impliquée. Lors de la communication avec le serveur, nous devons souvent obtenir le code d'état HTTP renvoyé pour déterminer si l'opération a réussi et effectuer le traitement correspondant en fonction de différents codes d'état. Cet article vous apprendra comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournira quelques exemples de codes pratiques. Utilisation de XMLHttpRequest

JavaScript et WebSocket : Construire un système efficace de prévisions météorologiques en temps réel Introduction : Aujourd'hui, la précision des prévisions météorologiques revêt une grande importance pour la vie quotidienne et la prise de décision. À mesure que la technologie évolue, nous pouvons fournir des prévisions météorologiques plus précises et plus fiables en obtenant des données météorologiques en temps réel. Dans cet article, nous apprendrons comment utiliser la technologie JavaScript et WebSocket pour créer un système efficace de prévisions météorologiques en temps réel. Cet article démontrera le processus de mise en œuvre à travers des exemples de code spécifiques. Nous

Introduction à la méthode d'obtention du code d'état HTTP en JavaScript : Dans le développement front-end, nous devons souvent gérer l'interaction avec l'interface back-end, et le code d'état HTTP en est une partie très importante. Comprendre et obtenir les codes d'état HTTP nous aide à mieux gérer les données renvoyées par l'interface. Cet article explique comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournit des exemples de code spécifiques. 1. Qu'est-ce que le code d'état HTTP ? Le code d'état HTTP signifie que lorsque le navigateur lance une requête au serveur, le service

Utilisation : En JavaScript, la méthode insertBefore() est utilisée pour insérer un nouveau nœud dans l'arborescence DOM. Cette méthode nécessite deux paramètres : le nouveau nœud à insérer et le nœud de référence (c'est-à-dire le nœud où le nouveau nœud sera inséré).
