vue3.5 测试props解构能不能响应式

代码测试

<template>
  <div class='box'>
    demo:{{ d }}
    <div>
      <child :abc='abc' />
    </div>
  </div>
</template>
<script lang='ts' setup>
import { ref, reactive, computed, onMounted, nextTick, PropType } from 'vue';
import child from "./components/child.vue"

const abc = reactive({
  a: {
    b: {
      c: "1111"
    }
  },
  d: "2222"
})
// 测试解构reactive对象的子属性能不能响应式
let { d } = abc;

console.log(d, "dddddddddddddddddddddddddddddddd")

setTimeout(() => {
  //直接d赋值，经测试不能响应式
  d = "3333"
  //测试子组件的props解构能不能响应式
  abc.d = "props 解构测试"
}, 2000)



</script>
<style lang='scss' scoped></style>

结论

• 3.5 props第一层解构能够响应式，打印出来是proxy对象
• props第二层的解构不能响应式，只是一个常数而已，不是proxy对象