vue3 为什么这边我结构了，但是失去响应性了

Question

console已经打印true了，但是dialog还是不弹出，
我换成常规定义这样就可以

const visible = reactive({
  insuredVis: false
})

失效的

<InsuredDialog :visible="visible.insuredVis"></InsuredDialog>

<script setup>
const data = reactive({
  form: {},
  visible: {
    insuredVis: false
  }
})
const { visible, form } = toRefs(data)

function handleInsured () {
  console.log('参保')
  visible.insuredVis = true
  console.log(visible.insuredVis) // 这里已经答应true了，但是dialog还是不弹出来
}
</script>

Answer 1

const { visible, form } = toRefs(data)

在这里拿到的 visible 是一个 Ref 对象，尽管它的内容是一个对象，但读取里面的值仍然需要用 visible.value。

因此正确的赋值方法应该是这样：

visible.value.insuredVis = true

你在你的赋值语句前也输出一下 visible.insuredVis 没准自己就发现问题了。

Answer 2

用法问题吧，应该是 visible.value.insureVis = true。