Apprenez à utiliser les propriétés calculées dans Vue dans un article

Savez-vous quand calculer des propriétés avec Vue ? Comment utiliser les propriétés calculées ? L'article suivant vous amènera à comprendre les propriétés calculées de Vue et à présenter l'utilisation de base des propriétés calculées de Vue. J'espère qu'il vous sera utile.

Propriétés calculées

Parfois, nous mettons trop de logique dans le modèle, ce qui rend le modèle trop lourd et difficile à maintenir. Par exemple :

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

Dans une telle situation, nous devons la regarder pendant un moment pour nous rendre compte que voici la chaîne inversée dans laquelle nous voulons afficher le message variable. De plus, une fois que nous voulons utiliser la chaîne inversée plusieurs fois. le modèle, nous allons plus gênant. Par conséquent, lorsque nous traitons d’une logique complexe, nous devons utiliser des propriétés calculées. [Recommandations associées : "Tutoriel vue.js"]

Utilisation de base

Les propriétés calculées sont des propriétés dans l'objet de configuration Vue. Elles sont utilisées comme suit :

<div id="app">
   <!-- 计算属性的值可以像data数据一样，直接被使用 --> 
  {{ someComputed }}
</div>
const vm = new Vue({
  el: &#39;#app&#39;,
  computed: {
     // 返回的值，就是计算属性的值
    someComputed () {
      return &#39;some values&#39;
    }
  }
})

Par exemple, nous voulons obtenir une chaîne To. retournez la chaîne, nous pouvons utiliser des propriétés calculées pour le faire :

<div id="app">
  <p>原始字符串: "{{ msg }}"</p>
  <p>翻转字符处啊: "{{ reversedMsg }}"</p>
</div>
const vm = new Vue({
  el: &#39;#app&#39;,
  data: {
    msg: &#39;Hello&#39;
  },
  computed: {
    reversedMsg: function () {
      return this.msg.split(&#39;&#39;).reverse().join(&#39;&#39;);
    }
  }
})

Nous pouvons voir que la valeur de reversedMsg dépend de la valeur de msg, donc lorsque nous modifions la valeur de msg, la valeur de reversedMsg changera également en conséquence.

Propriétés calculées et méthodes

En fait, les fonctions que nous avons mentionnées ci-dessus peuvent également être obtenues à l'aide de méthodes, telles que :

<div id="app">
  <p>原始字符串: "{{ msg }}"</p>
  <p>翻转字符串: "{{ reversedMsg() }}"</p>
</div>
const vm = new Vue({
  el: &#39;#app&#39;,
  data: {
    msg: &#39;Hello&#39;
  },
  methods: {
    reversedMsg: function () {
      return this.msg.split(&#39;&#39;).reverse().join(&#39;&#39;);
    }
  }
})

Bien que l'appel de méthodes dans des expressions puisse également obtenir le même effet, il existe des différences entre l'utilisation de propriétés calculées. et en utilisant des méthodes Différence essentielle. Lors de l'utilisation de méthodes, chaque fois que la page est restituée, la méthode correspondante sera réexécutée, par exemple :

<div id="app">
  <p>{{ name }}</p>
  <p>{{ reversedMsg() }}</p>
</div>
const vm = new Vue({
  el: &#39;#app&#39;,
  data: {
    msg: &#39;Hello&#39;,
    name: &#39;shanshan&#39;
  },
  methods: {
    reversedMsg: function () {
      console.log(&#39;方法执行啦&#39;);
      return this.msg.split(&#39;&#39;).reverse().join(&#39;&#39;);
    }
  }
})
vm.name = &#39;duyi&#39;;

Dans l'exemple ci-dessus, nous pouvons voir qu'une fois la valeur de name modifiée, la page sera réexécutée. -rendu, et à ce moment, la console imprimera La chaîne "La méthode est exécutée" signifie que la fonction reverseMsg est exécutée, mais nous n'avons pas besoin que la méthode soit exécutée, car les données modifiées n'ont rien à voir avec cela fonction. Si la logique au sein de cette fonction est très complexe, alors en termes de performances, c'est aussi une sorte de consommation.

Mais si vous utilisez des attributs calculés, il n'y aura pas de phénomène tel que :

const vm = new Vue({
  el: '#app',
  data: {
    msg: 'Hello',
    name: 'shanshan'
  },
  computed: {
    reversedMsg: function () {
      console.log('计算执行啦');
      return this.msg.split('').reverse().join('');
    }
  }
})
vm.name = 'duyi';

Vous pouvez voir à ce moment que lorsque le nom des données est réattribué, les attributs calculés ne sont pas exécutés. Par conséquent, la différence la plus essentielle entre les propriétés calculées et les méthodes est la suivante : Les propriétés calculées sont mises en cache en fonction de dépendances réactives La valeur d'une propriété calculée est toujours stockée dans le cache tant que les données dont elle dépend ne changent pas. sera calculé à chaque accès. Les propriétés renverront immédiatement le résultat mis en cache au lieu d'exécuter à nouveau la fonction. La méthode consiste à déclencher un nouveau rendu à chaque fois, et l'appel de la méthode exécutera toujours à nouveau la fonction.

Alors, pourquoi avez-vous besoin d'une mise en cache ?

Supposons que nous ayons un attribut calculé A, qui nécessite de parcourir un vaste tableau et d'effectuer d'énormes calculs. Ensuite, nous devons utiliser cet attribut calculé A. S'il n'y a pas de cache, nous exécuterons à nouveau la fonction de A, de sorte que la surcharge de performances devient très importante.

Calcul approfondi des propriétés

En plus d'être écrites sous forme de fonction, les propriétés calculées peuvent également être écrites sous forme d'objet. Il y a deux propriétés dans l'objet, getter et setter. Elles sont écrites sous forme de fonctions. suit :

const vm = new Vue({
  el: '#app',
  computed: {
    fullName: {
      getter () {
         // 一些代码
      },
      setter () {
         // 一些代码
      }
    }
  }
})

getter Read En prenant

devant, on écrit directement l'attribut calculé sous forme de fonction, qui est la fonction getter. En d’autres termes, les propriétés calculées n’ont que des getters par défaut. Celui du getter est automatiquement lié à l'instance Vue.

Quand sera-t-il exécuté ?

Lorsque nous obtenons un attribut calculé, la fonction get sera exécutée. Le paramètre

const vm = new Vue({
  el: '#app',
  data: {
    msg: 'Hello'
  },
  computed: {
    reversedMsg: {
      getter () {
        return this.msg.split('').reverse().join('');
      }
    }
  }
})

setter

est facultatif et la fonction set sera exécutée lors de la réaffectation d'une valeur à la propriété calculée. Paramètre : la valeur à réinitialiser. Celui du setter est automatiquement lié à l'instance Vue.

const vm = new Vue({
  el: '#app',
  data: {
    msg: 'Hello',
    firstStr: ''
  },
  computed: {
    reversedMsg: {
      getter () {
        return this.msg.split('').reverse().join('');
      },
      setter (newVal) {
        this.firstStr = newVal[0];
      }
    }
  }
})

Veuillez noter que même si une valeur est attribuée à une propriété calculée, la propriété calculée ne changera pas. Encore une fois, la propriété calculée ne sera recalculée que lorsque la propriété réactive dépendante change.

Practice_Name filter

personArr: [
  { 
    name: '', 
    src: '.jpg', 
    des: '颈椎不好', 
    sex: 'm', 
    id: '056482' 
  },
  { 
    name: '', 
    src: '.jpg', 
    des: '我是谁', 
    sex: 'f', 
    id: '157894' 
  },
  { 
    name: '', 
    src: '.jpg', des: '我长得很好看', 
    sex: 'f', 
    id: '2849245' 
  },
  { 
    name: '', 
    src: '.jpeg', 
    des: '你没有见过陌生的脸', 
    sex: 'm', 
    id: '348515' 
  },
  { 
    name: '', 
    src: '.jpeg', 
    des: '瓜皮刘', 
    sex: 'm', 
    id: '478454'
  }
]

Practice_Select all products

courseList: [
  {
    poster: '.jpg',
    title: '',
    price: 1299,
    cart: 1,
    id: 0
  },
  {
    poster: '.jpg',
    title: '',
    price: 1148,
    cart: 1,
    id: 1595402664708
  },
  {
    poster: '.jpg',
    title: '',
    price: 1,
    cart: 1,
    id: 1596305473062
  },
  {
    poster: '.jpg',
    title: '',
    price: 1,
    cart: 1,
    id: 1595413512182
  },
  {
    poster: '.jpg',
    title: '',
    price: 12798,
    cart: 1,
    id: 1596302161181
  },
  {
    poster: '.jpg',
    title: '',
    price: 1,
    cart: 1,
    id: 1596300025301,
  },
]

Pour plus de connaissances liées à la programmation, veuillez visiter : Introduction à la programmation ! !

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!