尊嘟假嘟？在Vue3.5中解构props不会丢失响应式

主要观点总结

本文讨论了Vue3.5版本中响应式Props解构的正式转正，并详细解释了其背后的工作原理。文章指出，在Vue3.5.5版本中，响应式Props解构已经稳定，并解释了为什么这样做不会丢失响应性。文章通过示例展示了如何正确使用解构以及为何在某些情况下解构会丢失响应性，并提供了解决方案。

关键观点总结

关键观点1: Vue3.5.5中响应式Props解构的转正

在Vue3.5.5中，响应式Props解构被正式支持，这意味着你可以直接在子组件中解构props，而不会失去响应性。

关键观点2: 为何不会丢失响应性

因为Vue在编译阶段会处理宏函数`defineProps`，如果发现解构了`defineProps`的返回值，就会将解构的属性和解构到本地的变量一起存到`ctx.propsDestructuredBindings`对象中。然后在遍历script模块中的所有代码时，如果发现使用了这些变量，就会将其替换为`__props.xxx`，从而保持响应性。

关键观点3: 何时会丢失响应性

当在`defineProps`之后，再对返回的props进行解构，并将结果赋值给另一个变量，再使用这个变量时，由于`ctx.propsDestructuredBindings`对象中没有任何信息，所以不会进行替换，从而丢失响应性。

文章预览

前言 在Vue3.5版本中 响应式 Props 解构 终于正式转正了，这个功能之前一直是 试验性 的。这篇文章来带你搞清楚，一个String类型的props经过解构后明明应该是一个常量了，为什么还没丢失响应式呢？本文中使用的Vue版本为欧阳写文章时的最新版 Vue3.5.5 看个demo 我们先来看个解构props的例子。 父组件代码如下：    < ChildDemo   name = "ouyang"  /> < /template>
import ChildDemo from "./child.vue";
父组件代码很简单，给子组件传了一个名为 name 的prop， name 的值为字符串“ouyang”。 子组件的代码如下：   {{ localName }} < /template>
const { name: localName } = defineProps(["name"]);
console.log(localName);
script>