យើងបានដឹងរួចមកហើយថា ប្រតិភាព (reactivity) គឺជាភាពដែលធ្វើអោយ browser បង្ហាញតំលៃថ្មីនៃអថេរទាំងឡាយ នៅពេលដែលតំលៃនៃអថេរទាំងនោះមានការផ្លាស់ប្តូរ។ នៅក្នុងបរិបទនេះ នៅក្នុងកម្មវិធី SvelteKit សញ្ញាស្មើ (=) មានតួនាទីសំខាន់ណាស់ក្នុងការផ្តល់តំលៃអោយទៅអថេរទាំងឡាយនិងធ្វើអោយអថេរទាំងនោះមានលក្ខណៈប្រតិភាព។ បានន័យថា គ្រប់អថេរដែលបានទទួលតំលៃណាមួយដោយសារសញ្ញាស្មើ នៅពេលក្រោយមកទៀត នៅពេលដែលតំលៃទាំងនោះមានការផ្លាស់ប្តូរ browser នឹងជំនួសតំលៃចាស់ដោយតំលៃថ្មីនេះនៅលើ browser ។
<script>
let count = 0;
function increment() {
count += 1;
}
</script>
<button on:click={increment}>
ចុច {count} ដង
</button>
លក្ខណៈប្រតិភាពមានតែចំពោះអថេរទាំងឡាយណាដែលទទួលតំលៃណាមួយតាមរយៈសញ្ញាស្មើដោយផ្ទាល់។ ចំពោះអថេរដែលតំលៃរបស់វាយោងទៅលើតំលៃរបស់អថេរមួយផ្សេងទៀត អថេរខាងដើមនឹងគ្មានលក្ខណៈប្រតិភាពនេះទេ។
<script>
let count = 0
let double = count * 2
function increment() {
count += 1;
}
</script>
<button on:click={increment}>
ចុច {count} ដង
</button>
<p>តំលៃរបស់ double {double}</p>
ដើម្បីធ្វើអោយអថេរមួយ ដែលតំលៃរបស់វាយោងទៅលើតំលៃរបស់អថេរមួយផ្សេងទៀត អាចមានលក្ខណៈប្រតិភាពបាន យើងត្រូវប្រើសញ្ញា $: នៅខាងមុខអថេរនោះ នៅពេលផ្តល់តំលៃអោយវា។
<script>
let count = 0
$: double = count * 2
function increment() {
count += 1;
}
</script>
<button on:click={increment}>
ចុច {count} ដង
</button>
<p>តំលៃរបស់ double {double}</p>
