Propriétés, méthodes et écouteurs calculés
Lorsque nous choisissons de calculer, nous avons un total de 3 façons d'y parvenir. Mais nous sommes les premiers à considérer l'attribut calculé car, pour la méthode des méthodes, aucun mécanisme de mise en cache ne réduira les performances. Computed et watch ont un mécanisme de mise en cache, mais l'utilisation de computed est plus abrégée.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src='./vue.js'></script>
</head>
<body>
<div id="app">
{
{fullName()}}
{
{fullName}}
{
{age}}
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
firstName: "Dell",
lastName: "Lee",
fullName: "Dell Lee",
age: 28
},
watch: {
firstName: function() {
this.fullName = this.firstName + " " + this.lastName;
},
lastName: function() {
this.fullName = this.firstName + " " + this.lastName;
}
},
methods: {
fullName: function() {
return this.firstName + " " +this.lastName
}
},
// 计算属性
computed: {
fullName: function() {
return this.firstName + " " + this.lastName
}
}
})
</script>
</body>
</html>