作者heavenbetula (綠草)
看板Web_Design
標題[問題] Vue3 defineProps的響應問題
時間Tue Apr 16 15:16:51 2024
想請問各位寫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://webptt.com/m.aspx?n=bbs/Web_Design/M.1713251813.A.E0E.html
1F：推 ck574b027: 因為它只是macro。如果只有template會用到，最好寫成 04/16 16:32
2F：→ ck574b027: defineProps(['name']) 04/16 16:32
喔不好意思，原本想說簡化一下寫法來描述問題，所以寫不完整
沒說明清楚我是使用typescript
原始寫法是這樣的：
interface Props {
name: string;
}
//寫法1
const props = defineProps<Props>();
const { name } = props;
//寫法2
const { name } = defineProps<Props>();
一直以為這兩種寫法是相等的
但對於響應式的結果是不同的
寫法1無法響應
寫法2可以響應
3F：→ ssccg: 是你奇怪吧為什麼prop的欄位不寫在defineProps 04/16 16:45
4F：→ ssccg: 你另外寫一個 { name } 是想幹麻 04/16 16:48
※ 編輯: heavenbetula (219.68.234.131 臺灣), 04/16/2024 17:12:34
5F：→ cloki: 而且你寫法1那種本來就大概需要watch/computed才會響應吧 04/16 20:03
6F：→ ck574b027: 可以看看產出的js有何差別 04/16 21:38
痾...後來發現是vue版本的處理，在3.4版本後上述寫法2可以響應，但測試3.2版本
上述寫法2是不可以響應的
※ 編輯: heavenbetula (219.68.234.131 臺灣), 04/17/2024 02:06:39
7F：推 crazwade: defineProps<{name: string}>(); 不用解構可以直接用na 05/05 11:46
8F：→ crazwade: me吧 05/05 11:46