尊嘟假嘟？在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`对象中没有任何信息，所以不会进行替换，从而丢失响应性。

免责声明