Vue3.5+响应式Props解构全过程
作者：沐爸muba
Vue3.5+响应式Props解构
在 Vue 3.5+ 中，响应式 Props 解构已经稳定并默认启用。这意味着在 <script setup> 中从 defineProps 调用解构的变量现在是响应式的。
这一改进大大简化了声明带有默认值的 props 的方式，并使得在子组件中直接使用解构后的 props 变量时能够保持响应性。
最新语法
Vue 的响应系统基于属性访问跟踪状态的使用情况。
例如，在计算属性或侦听器中访问 props.foo 时，foo 属性将被跟踪为依赖项。
因此，在以下代码的情况下：
const { foo } = defineProps(["foo"]);
watchEffect(() => {
// 在 3.5之前只运行一次
// 在 3.5+ 中在 "foo" prop 变化时重新执行
console.log(foo);
});
在 3.5 之前的版本中， foo是一个实际的常量，永远不会改变。在 3.5 及以上版本，当在同一个 <script setup> 代码块中访问由 defineProps 解构的变量时，Vue 编译器会自动在前面添加 props.。因此，上面的代码等同于以下代码：
const props = defineProps(["foo"]);
watchEffect(() => {
// `foo` 由编译器转换为`props.foo`
console.log(props.foo);
});
此外，你可以使用 JavaScript 原生的默认值语法声明 props 默认值。这在使用基于类型的 props 声明时特别有用。
const { foo = 'hello' } = defineProps<{ foo?: string }>()
watch 监听解构的 props
const { foo } = defineProps(["foo"]);
watch(foo, /_ ... _/);
这并不会按预期工作，因为它等价于 watch(props.foo, ...)——我们给 watch 传递的是一个值而不是响应式数据源。实际上，Vue 的编译器会捕捉这种情况并发出警告。
与使用 watch(() => props.foo, ...) 来侦听普通 prop 类似，我们也可以通过将其包装在 getter 中来侦听解构的 prop：
watch( () => foo /* ... */ );
此外，当我们需要传递解构的 prop 到外部函数中并保持响应性时，这是推荐做法：
useComposable(() => foo);
外部函数可以调用 getter (或使用 toValue 进行规范化) 来追踪提供的 prop 变更。
例如，在计算属性或侦听.器的 getter 中。
示例一 watchEffect
<template>
<div>{{ content }}</div>
</template>
<script setup>
import { defineProps, watchEffect } from "vue";
// 解构 props，注意这里的变量是响应式的
const { content } = defineProps(["content"]);
watchEffect(() => {
// 在 3.5 之前只运行一次
// 在 3.5+ 中在 "content" prop 变化时重新执行
console.log(content);
});
</script>
3.5 前的版本
<template>
<div>{{ content }}</div>
</template>
<script setup>
import { defineProps, watchEffect } from "vue";
const props = defineProps(["content"]);
watchEffect(() => {
console.log(props.content);
});
</script>
示例二 watch
<template>
<div>{{ content }}</div>
</template>
<script setup>
import { defineProps, watch } from 'vue'
const { content } = defineProps(['content'])
watch(
() => content,
(newValue) => {
console.log(newValue)
)
</script>
3.5 前的版本
<template>
<div>{{ content }}</div>
</template>
<script setup>
import { defineProps, watch } from 'vue'
const props = defineProps(['content'])
watch(
() => props.content,
(newValue) => {
console.log(newValue)
)
</script>
示例三 computed
<template>
<div>
{{ content }}
<br />
{{ formatContent }}
</div>
</template>
<script setup>
import { defineProps, computed } from "vue";
const { content } = defineProps(["content"]);
const formatContent = computed(() => content.toUpperCase());
</script>
3.5 前的版本
<template>
<div>
{{ content }}
<br />
{{ formatContent }}
</div>
</template>
<script setup>
import { defineProps, computed } from "vue";
const props = defineProps(["content"]);
const formatStr = computed(() => props.content.toUpperCase());
</script>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。