作者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/cn.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