[問題] Vue3 defineProps的響應問題

看板Web_Design作者heavenbetula (綠草)時間8月前 (2024/04/16 15:16)推噓2(2推 0噓 6→)

留言8則, 4人參與討論串1/1

想請問各位寫Vue3的大大 <script setup> const props = defineProps(); const { name } = props; /* 由於上行這樣寫會讓失去響應性，name如果更新，畫面不會更新因此需改成： const { name } = toRefs(props); */ </script> <template> <h1>Hello {{name}}</h1> </template> 其中我有疑問的是如果原本會失去響應的寫法： const props = defineProps(); const { name } = props; 改成 const { name } = defineProps(); 就可以不用透過toRefs，也能正常動作但不明白的是 const props = defineProps(); const { name } = props; 與 const { name } = defineProps(); 不是一樣的寫法嗎? 為什麼結果會不一樣呢? -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 219.68.234.131 (臺灣) ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1713251813.A.E0E.html

推

ck574b027

04/16 16:32, 8月前 , 1^F

04/16 16:32, 1^F

→

ck574b027

04/16 16:32, 8月前 , 2^F

04/16 16:32, 2^F

喔不好意思，原本想說簡化一下寫法來描述問題，所以寫不完整沒說明清楚我是使用typescript 原始寫法是這樣的： interface Props { name: string; } //寫法1 const props = defineProps<Props>(); const { name } = props; //寫法2 const { name } = defineProps<Props>(); 一直以為這兩種寫法是相等的但對於響應式的結果是不同的寫法1無法響應寫法2可以響應

→

ssccg

04/16 16:45, 8月前 , 3^F

04/16 16:45, 3^F

→

ssccg

04/16 16:48, 8月前 , 4^F

04/16 16:48, 4^F

※ 編輯: heavenbetula (219.68.234.131 臺灣), 04/16/2024 17:12:34

→

cloki

04/16 20:03, 8月前 , 5^F