ฉันใช้ Vue มาระยะหนึ่งแล้วและประสบการณ์ของฉันก็เป็นวิธีหนึ่งที่จะทำการคำนวณซ้ำหากข้อมูลพื้นฐานของมันได้รับการปรับปรุง ฉันพบข้อมูลที่ขัดแย้งกันใน SO:
- ฉันพยายามตอบคำถามนี้และได้รับการบอกหลายครั้งว่าไม่เป็นเช่นนั้น
- คำตอบที่ยอมรับได้ที่นี่ระบุว่า "[วิธีการ] จะได้รับการประเมินเมื่อคุณเรียกอย่างชัดเจนเท่านั้น"
ฉันค้นหาเอกสารและฉันไม่เห็นอะไรชัดเจนอย่างเหลือเชื่อ
หากพวกมันไม่ได้เกิดปฏิกิริยาทำไมตัวอย่างนี้ถึงใช้งานได้?
<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);
},
},
};
ฉันจะจริงๆชอบที่จะมีคำตอบที่ชัดเจนและความพึงพอใจที่ชุมชนนี้สามารถดูได้ที่