Parlons des propriétés calculées, des méthodes et des écouteurs dans Vue
Cet article vous aidera à apprendre Vue, à parler de la théorie de base et du fonctionnement pratique de Vue, et à présenter les propriétés calculées, les méthodes et les auditeurs dans Vue. J'espère qu'il sera utile à tout le monde !
Exigences : Dans les données, il y a deux contenus : firstName et lastName, et la page affiche "Nom complet fullName" . firstName 和 lastName 两个内容，页面显示“全名 fullName ”。
通过上一篇文章可以知道，我们直接使用插值表达式就能实现这个需求：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>前端一万小时-计算属性、方法与侦听器</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
{{firstName + ' ' + lastName}} <!-- 2️⃣使用插值表达式展示全名。 -->
</div>
<script>
var vm = new Vue({
el: '#app',
data: { // 1️⃣在 data 中定义一组数据，里面有 firstName 和 lastName 两个内容；
firstName: 'Oli',
lastName: 'Zhao'
}
})
</script>
</body>
</html>
但需求是实现了，可同时模板上就有了一些逻辑。而模板本身是用来显示就好，并不需要添加逻辑在里面！【相关推荐：vuejs视频教程、web前端开发】
理想的方式是在插值表达式中直接添加 fullName 变量来显示全名：
<div id="app">
{{fullName}}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstName: 'Oli',
lastName: 'Zhao',
fullName: 'Oli Zhao' // ❗️data 中添加了 fullName！
}
})
</script>
可以看到，当代码这样写时也是没有问题的。
但实际上代码冗余了：原本 data 内已经有了 firstName 和 lastName ，可以用它们组合出全名，但又重新定义了一次 fullName 。
接下来，将介绍另外三种方法来解决这个需求。
1 计算属性 computed
<div id="app">
{{fullName}}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstName: 'Oli',
lastName: 'Zhao'
},
computed: { // 1️⃣计算属性 computed 属于 Vue 实例的方法，直接定义在实例中；
fullName() { // 2️⃣计算属性的值 fullName 是一个函数；
return this.firstName + ' ' + this.lastName // ❗️一定要写上 return 把计算结果返回！
}
}
})
</script>使用计算属性后，代码完全不会冗余， fullName 是根据 firstName 和 lastName 计算出来的，页面上的效果也是一样。
计算属性还有一个非常重要的知识点：
计算属性会基于它们的响应式依赖进行缓存。
也就是说，当计算属性依赖的数据发生改变时，它会重新计算；若没有变化时，则不计算，会一直使用上一次计算的结果（这样也就提高了一些性能）。
在我们的代码中，当 firstName 或 lastName 改变时，fullName 会重新计算，不变时则用缓存的上次计算结果。
<div id="app">
{{fullName}}
{{age}} <!-- 2️⃣把 age 渲染到模板上； -->
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstName: 'Oli',
lastName: 'Zhao',
age: 18 // 1️⃣data 中添加 age 为 18；
},
computed: {
fullName() {
console.log('计算了一次') // 3️⃣每当执行时 console.log 一次。
return this.firstName + ' ' + this.lastName
}
}
})
</script>保存刷新网页后，可以看到计算属性 计算了一次 。当在控制台输入 vm.age = 20 更改 age 后，页面重新渲染了，“18”变为了“20”，但控制台没有再次输出 计算了一次 ，即计算属性没有进行重新计算。
而当我们更改 lastName 后，会重新计算一次：
2 方法 methods
第二种是我们已经非常熟悉的方法 methods ：
<div id="app">
<!-- ❗️注意：在插值表达式内，计算属性通过属性的名字就可以用，但调用方法时，
一定要加上 () 来进行调用！ -->
{{fullName()}}
{{age}}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstName: 'Oli',
lastName: 'Zhao',
age: 18
},
methods: { // ❗️在 methods 中定义 fullName 方法，逻辑上与计算属性一样；
fullName() {
console.log('计算了一次')
return this.firstName + ' ' + this.lastName
}
}
})
</script>保存后，刷新页面查看效果时，它会进行一次计算。当我们更改 age 时，它会再计算一次，更改 lastName 时也会进行一次计算：
所以方法是没有缓存机制的，只要页面重新渲染， fullName 方法就会被重新执行一次。
3 侦听器 watch
当使用侦听器时，不可避免的会让代码冗余：
<div id="app">
{{fullName}} <!-- 1️⃣-②：插值表达式内不需要 ()； -->
{{age}}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstName: 'Oli',
lastName: 'Zhao',
fullName: 'Oli Zhao', // 1️⃣-①：data 中定义 fullName；
age: 18
},
watch: { // 2️⃣在实例中定义侦听器 watch；
firstName() { /*
2️⃣-①：定义 firstName 方法，对 firstName 进行侦听，
当它改变时，重新对 fullName 赋值；
*/
console.log('计算了一次')
this.fullName = this.firstName + ' ' + this.lastName
},
lastName() { /*
2️⃣-②：定义 lastName 方法，对 lastName 进行侦听，
当它改变时，重新对 fullName 赋值。
*/
console.log('计算了一次')
this.fullName = this.firstName + ' ' + this.lastName
}
}
})
</script>保存后回到页面刷新。当第一次进入页面时，因为我们重新定义过 fullName ，所以 watch 不会进行计算就会显示出来。在修改与 fullName 不想关的数据 age 后，由于我们只用 watch 侦听了 firstName 和 lastName ，所以也不会进行计算。当我们修改 lastName
Comme vous pouvez le savoir grâce à l'article précédent, nous pouvons atteindre cette exigence directement en utilisant des expressions d'interpolation : 
rrreee
Mais la demande est réalisée, mais En même temps, il y a une certaine logique dans le modèle. Le modèle lui-même est uniquement destiné à l’affichage, il n’est pas nécessaire d’y ajouter de la logique ! [Recommandations associées : tutoriel vidéo vuejs, développement web front-end]
La méthode idéale est d'ajouterfullName pour afficher le nom complet : 🎜rrreee🎜🎜🎜Vous pouvez voir qu'il n'y a aucun problème lorsque le code est écrit comme ceci. 🎜🎜Mais en fait le code est redondant : il y a déjà firstName et lastName dans les données, qui peuvent être utilisés pour combiner le nom complet, mais nom complet. 🎜🎜Ensuite, trois autres méthodes seront introduites pour résoudre ce besoin. 🎜🎜1 Attribut calculé calculé🎜
rrreee🎜Après avoir utilisé l'attribut calculé, le code ne sera pas du tout redondant, fullName code> est calculé en fonction de <code>firstName et lastName, et l'effet sur la page est le même. 🎜🎜Calcul Il y a une autre chose très importante à savoir sur les propriétés : 🎜🎜🎜Les propriétés calculées sont mises en cache en fonction de leurs dépendances réactives. 🎜🎜🎜C'est-à-dire que 🎜Lorsque les données dont dépend l'attribut calculé changent, elles seront recalculées s'il n'y a pas de changement, elles ne seront pas calculées, et le résultat du dernier calcul sera toujours ; être utilisé🎜 (cela améliorera également certaines performances). 🎜🎜Dans notre code, lorsque
firstName ou lastName change, fullName sera recalculé s'il reste inchangé, le nom de famille mis en cache sera utilisé. . Calculez le résultat. 🎜rrreee🎜Après avoir enregistré et actualisé la page Web, vous pouvez voir que la propriété calculée est calculée une fois. Lorsque vm.age = 20 est entré dans la console pour modifier age, la page est restituée et "18" devient "20", mais la console n'affiche pas Calculé une fois, c'est-à-dire que la propriété calculée n'est pas recalculée. 🎜🎜🎜 🎜Lorsque nous modifions lastName, il sera recalculé : 🎜🎜
🎜🎜2 Méthodesméthodes🎜
🎜Non. la deuxième est la 🎜méthodes que nous connaissons déjà très bien : methods🎜 : 🎜rrreee🎜Après la sauvegarde, il effectuera un calcul lors de l'actualisation de la page pour voir l'effet. Lorsque nous changeons age, il sera calculé à nouveau, et lorsque nous changeons lastName, il sera également calculé une fois : 
🎜🎜Donc, la méthode 🎜 n'a pas de mécanisme de mise en cache, tant que le la page est restituée, fullName sera à nouveau exécutée🎜. 🎜🎜3 Listener watch🎜
🎜Lors de l'utilisation des auditeurs, il est inévitable de rendre le code redondant : 🎜rrreee 🎜Après avoir enregistré, revenez à la page et actualisez. Lorsque vous entrez sur la page pour la première fois, parce que nous avons redéfini fullName, watch sera affiché sans calcul. Après avoir modifié les données age qui ne sont pas liées à fullName, puisque nous utilisons uniquement watch pour écouter firstName et lastName , donc il ne sera pas calculé non plus. Lorsqu'on modifie lastName, un calcul est effectué : 🎜🎜🎜🎜🎜🎜Résumé : 🎜🎜-
methodsexécutera la méthode une fois à chaque fois que la page est rendue -
watch和computed都具备缓存机制，但watch的语法比computed的语法复杂了很多。
methods 会在每次渲染页面都执行一次方法；所以一般情况下，当一个功能通过 watch 、 methods 和 computed 方法都可以实现时，首推“计算属性 computedwatch et computed ont tous deux des mécanismes de mise en cache ; watch est beaucoup plus compliquée que celle de calculed. Doncen général, lorsqu'une fonction passe les méthodes watch, methods et calculed, elle can Lors de l'implémentation, "l'attribut calculé calculé" est recommandé en premier.
(Partage de vidéos d'apprentissage : Tutoriel d'introduction à Vuejs, Vidéo de programmation de base
)🎜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!
Fonction de Vue.js: améliorer l'expérience utilisateur sur le frontendApr 19, 2025 am 12:13 AMVue.js améliore l'expérience utilisateur via plusieurs fonctions: 1. Le système réactif réalise les commentaires des données en temps réel; 2. Le développement des composants améliore la réutilisabilité du code; 3. Vuerouter fournit une navigation fluide; 4. L'animation dynamique des données et l'animation de transition améliorent l'effet d'interaction; 5. Le mécanisme de traitement des erreurs garantit les commentaires des utilisateurs; 6. L'optimisation des performances et les meilleures pratiques améliorent les performances des applications.
Vue.js: définir son rôle dans le développement WebApr 18, 2025 am 12:07 AMLe rôle de Vue.js dans le développement Web est d'agir comme un cadre JavaScript progressif qui simplifie le processus de développement et améliore l'efficacité. 1) Il permet aux développeurs de se concentrer sur la logique métier grâce à la liaison réactive des données et au développement des composants. 2) Le principe de travail de Vue.js s'appuie sur des systèmes réactifs et un Dom virtuel pour optimiser les performances. 3) Dans les projets réels, il est courant d'utiliser Vuex pour gérer l'état mondial et optimiser la réactivité des données.
Comprendre Vue.js: principalement un cadre frontalApr 17, 2025 am 12:20 AMVue.js est un framework JavaScript progressif publié par You Yuxi en 2014 pour créer une interface utilisateur. Ses principaux avantages incluent: 1. Ligneurs de données réactives, vue de mise à jour automatique des modifications de données; 2. Développement des composants, l'interface utilisateur peut être divisée en composants indépendants et réutilisables.
Frontend de Netflix: Exemples et applications de React (ou Vue)Apr 16, 2025 am 12:08 AMNetflix utilise React comme cadre frontal. 1) Le modèle de développement composant de React et un écosystème fort sont les principales raisons pour lesquelles Netflix l'a choisi. 2) Grâce à la composante, Netflix divise les interfaces complexes en morceaux gérables tels que les lecteurs vidéo, les listes de recommandations et les commentaires des utilisateurs. 3) Le cycle de vie virtuel et composant virtuel de React optimise l'efficacité du rendu et la gestion de l'interaction des utilisateurs.
Le paysage frontal: comment Netflix a abordé ses choixApr 15, 2025 am 12:13 AMLe choix de Netflix dans la technologie frontale se concentre principalement sur trois aspects: l'optimisation des performances, l'évolutivité et l'expérience utilisateur. 1. Optimisation des performances: Netflix a choisi React comme cadre principal et outils développés tels que SpeedCurve et Boomerang pour surveiller et optimiser l'expérience utilisateur. 2. Évolutivité: ils adoptent une micro architecture frontale, divisant les applications en modules indépendants, améliorant l'efficacité de développement et l'évolutivité du système. 3. Expérience utilisateur: Netflix utilise la bibliothèque de composants Material-UI pour optimiser en continu l'interface via les tests A / B et les commentaires des utilisateurs pour assurer la cohérence et l'esthétique.
React vs. Vue: Quel framework utilise Netflix?Apr 14, 2025 am 12:19 AMNetflixUSESACustomFrameworkCalled "gibbon" builtonReact, notreactorVueDirectly.1) teamExperience: ChoOsBasedOnFamiliarity.
Le choix des cadres: qu'est-ce qui motive les décisions de Netflix?Apr 13, 2025 am 12:05 AMNetflix considère principalement les performances, l'évolutivité, l'efficacité de développement, l'écosystème, la dette technique et les coûts de maintenance dans la sélection du cadre. 1. Performances et évolutivité: Java et Springboot sont sélectionnés pour traiter efficacement des données massives et des demandes simultanées élevées. 2. Efficacité de développement et écosystème: utiliser réagir pour améliorer l'efficacité du développement frontal et utiliser son riche écosystème. 3. Debt technique et coûts de maintenance: choisissez Node.js pour créer des microservices pour réduire les coûts de maintenance et la dette technique.
React, Vue et l'avenir du frontend de NetflixApr 12, 2025 am 12:12 AMNetflix utilise principalement React comme cadre frontal, complété par Vue pour des fonctions spécifiques. 1) La composante de React et le DOM virtuel améliorent l'efficacité des performances et du développement des applications Netflix. 2) Vue est utilisée dans les outils internes et les petits projets de Netflix, et sa flexibilité et sa facilité d'utilisation sont essentielles.
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
Listes Sec
SecLists est le compagnon ultime du testeur de sécurité. Il s'agit d'une collection de différents types de listes fréquemment utilisées lors des évaluations de sécurité, le tout en un seul endroit. SecLists contribue à rendre les tests de sécurité plus efficaces et productifs en fournissant facilement toutes les listes dont un testeur de sécurité pourrait avoir besoin. Les types de listes incluent les noms d'utilisateur, les mots de passe, les URL, les charges utiles floues, les modèles de données sensibles, les shells Web, etc. Le testeur peut simplement extraire ce référentiel sur une nouvelle machine de test et il aura accès à tous les types de listes dont il a besoin.
PhpStorm version Mac
Le dernier (2018.2.1) outil de développement intégré PHP professionnel
Télécharger la version Mac de l'éditeur Atom
L'éditeur open source le plus populaire
ZendStudio 13.5.1 Mac
Puissant environnement de développement intégré PHP
