חידת Vue: ריאקטיביות
16/01/2025
נתון קוד Vue הבא:
<script setup lang="ts">
import {ref, computed} from 'vue';
const data = { count: 0 };
const value = ref(data);
function btn1() {
data.count = 5;
}
function btn2() {
value.value.count++;
}
</script>
<template>
<div>
<p>
Value is: <span>{{ value.count }}</span></p>
<button @click="btn1">Button 1</button>
<button @click="btn2">Button 2</button>
<hr />
</div>
</template>
מה יופיע על המסך אחרי לחיצה על שני הכפתורים לפי הסדר? מה יקרה אם נלחץ רק על הראשון? למה זה קורה?
מה יקרה אם נשנה את התבנית ל:
<template>
<div>
<p>
Value is: <span>{{ data.count }}</span></p>
<button @click="btn1">Button 1</button>
<button @click="btn2">Button 2</button>
<hr />
</div>
</template>
מה יהיו ערכי המשתנים אחרי לחיצה על הכפתורים? מה יופיע על המסך?