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对象
前端工程师、程序员