J'utilise Vue depuis un certain temps, et mon expérience a toujours été une méthode qui recalculera si ses données réactives sous-jacentes sont mises à jour. J'ai rencontré des informations contradictoires sur SO:
- J'essayais de répondre à cette question et on m'a dit à plusieurs reprises que ce n'était pas le cas.
- La réponse acceptée ici indique que "[une méthode] ne sera évaluée que si vous l'appelez explicitement."
J'ai cherché dans les documents et je n'ai rien vu d'incroyablement clair.
S'ils ne sont pas réactifs, pourquoi cet exemple fonctionne-t-il?
<ul>
<li v-for="animal in animals" :key="animal.id">
<span v-if="isAwesome(animal)">{{ animal.name }}</span>
</li>
</ul>
export default {
data() {
return {
awesomeAnimalIds: [],
animals: [
{ id: 1, name: 'dog' },
{ id: 5, name: 'cat' },
{ id: 9, name: 'fish' },
],
};
},
created() {
setTimeout(() => {
this.awesomeAnimalIds.push(5);
}, 1000);
setTimeout(() => {
this.awesomeAnimalIds.push(9);
}, 2000);
},
methods: {
isAwesome(animal) {
return this.awesomeAnimalIds.includes(animal.id);
},
},
};
J'aimerais vraiment avoir une réponse définitive et satisfaisante à laquelle cette communauté puisse se référer.