Why does this lose responsiveness? Is there a great god who can explain it

[gitboyzcf]

https://play.vuejs.org/#eNp9Uk1v1DAQ/SuDhdStdklAcKqyK6CqBBwAARIXHxqys1m3jm3Z43SlKP+dsd12t1LVW+Z9TN6zPYlPzlVjRHEhmtB55QgCUnQbadTgrCeYwONudddSt195bDtSI8IMO28HOGPnmTTSdNYEgs5GQ7BOhsXb8yM+hP4evf6CWlv4a73evno9ZUM1tjrifJ0NT1ZdatXdsnNxDusNTNJAwYsDlsuCmGA1Vtr2ixOWt81pXVOXWlyIB8LB6ZaQJ4Bm/24zTTndPDc1TxlVxkWC8c1gt6jXUjAvBdSF/BeJrIGPXYrG5DGnFJs8LJdNXVTsaOqTP4qVoMBxd6qvboI1fOa5U9oyOKXR/3CkuI4UF6Vt4lo+sLtvGSMfcfWAd3vsbp/Bb8IhYVL89BjQjyjFI0et75EKffX7Ox74+5HkvlGz+gXyF/JRx5SxyD5Hs+XYJ7qc9mt+Ocr0f8LVgdCEh1IpaFLOWS8FP5/LF6of476vPmQfX6qY/wOamOm5

[skordyr]

<script setup>
import { ref,computed } from 'vue'

const count = ref(0)

const msg = computed(() =>`Hello World!${count.value}`)


const countClick = () => {
  count.value ++
  console.log(count.value)
}

</script>

<template>
  <h1>{{ msg }}</h1>
  <input v-model="msg" />
  <button @click="countClick">count++</button>
</template>

按你的意图需要使用 computed 来实现，参考文档：https://vuejs.org/guide/essentials/computed.html