当前位置：首页 > news >正文

Vue3.5+ 响应式 Props 解构

news 来源：原创 2024/9/19 14:11:33

你好同学，我是沐爸，欢迎点赞、收藏、评论和关注。

在 Vue 3.5+ 中，响应式 Props 解构已经稳定并默认启用。这意味着在 <script setup> 中从 defineProps 调用解构的变量现在是响应式的。这一改进大大简化了声明带有默认值的 props 的方式，并使得在子组件中直接使用解构后的 props 变量时能够保持响应性。

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

3.5+ 版本

<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

3.5+ 版本

<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

3.5+ 版本

<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>