[問題] Vue3 defineProps的響應問題

[heavenbetula (綠草)]

想請問各位寫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: 因為它只是macro。如果只有template會用到，最好寫成
→ ck574b027: defineProps(['name'])
喔不好意思，原本想說簡化一下寫法來描述問題，所以寫不完整
沒說明清楚我是使用typescript
原始寫法是這樣的：
interface Props {
  name: string;
}
//寫法1
const props = defineProps<Props>();
const { name } = props;

//寫法2
const { name } = defineProps<Props>();

一直以為這兩種寫法是相等的
但對於響應式的結果是不同的
寫法1無法響應
寫法2可以響應

→ ssccg: 是你奇怪吧為什麼prop的欄位不寫在defineProps
→ ssccg: 你另外寫一個 { name } 是想幹麻
※ 編輯: heavenbetula (219.68.234.131 臺灣), 04/16/2024 17:12:34
→ cloki: 而且你寫法1那種本來就大概需要watch/computed才會響應吧
→ ck574b027: 可以看看產出的js有何差別
痾...後來發現是vue版本的處理，在3.4版本後上述寫法2可以響應，但測試3.2版本
上述寫法2是不可以響應的
※ 編輯: heavenbetula (219.68.234.131 臺灣), 04/17/2024 02:06:39
推 crazwade: defineProps<{name: string}>(); 不用解構可以直接用na
→ crazwade: me吧