Vue3中解构props后响应性丢失的最优解决方案咨询

开发者阿泽

2026-6-28

Vue3中保持editing响应性的解决方案

关于`toRefs`写法的问题

你用toRefs的写法依然会丢失响应性。因为ref(!modelValue || !obscureInitialValue)只是在初始化时计算了一次值，后续modelValue或obscureInitialValue变化时，editing的value不会自动更新——ref的初始值是静态的，不会主动追踪后续依赖变化。

更优的实现方案

既然需要手动修改editing.value，无法用计算属性，推荐两种可行方案：

方案一：使用`watchEffect`自动追踪依赖

watchEffect会自动关联依赖的props，在组件初始化和props变化时自动更新editing，同时不影响手动修改editing的能力：

import { ref, watchEffect } from 'vue'

const editing = ref(false)

watchEffect(() => {
  // 可根据需求调整逻辑：比如手动修改后是否允许props覆盖当前值
  // 示例为每次props变化都同步更新editing
  editing.value = !props.modelValue || !props.obscureInitialValue
})

// 其他场景手动修改editing
const toggleEditing = () => {
  editing.value = !editing.value
}

方案二：使用`watch`精准监听指定props

如果需要明确控制监听的props，可以用watch，指定监听modelValue和obscureInitialValue的变化：

import { ref, watch } from 'vue'

const editing = ref(false)

// 初始化赋值
editing.value = !props.modelValue || !props.obscureInitialValue

// 监听props变化并更新editing
watch(
  [() => props.modelValue, () => props.obscureInitialValue],
  ([newModelVal, newObscureVal]) => {
    editing.value = !newModelVal || !newObscureVal
  },
  { immediate: true } // 开启immediate可替代单独的初始化赋值
)

两种方案对比：