Vue 3 响应式 prop 解引用陷阱：如何避免响应式中断？

2024-03-05 17:01:33

Vue 3 中响应式 prop 的陷阱：解引用 prop 时响应式会中断

引言

在 Vue 3 中，响应式 prop 的使用至关重要。然而，在某些情况下，当我们解引用 prop 时，prop 的响应式可能会中断。了解这些陷阱并掌握应对策略非常重要，以避免意想不到的行为。

问题：解引用 prop 时响应式中断

当我们在组件内直接解引用 prop 时，prop 的响应式就会中断。这意味着组件无法响应 prop 值的变化。这在尝试使用 prop 来控制组件状态时会尤其成问题。

示例：

const editing = ref(false);
editing.value = !props.modelValue || !props.obscureInitialValue;

在这个示例中，editing ref 最初设置为 false。然后，我们根据 prop modelValue 和 obscureInitialValue 的否定值设置 editing。如果这些 prop 发生变化，editing ref 不会更新，因为我们直接解引用了 prop，这中断了响应式。

解决方案：维护响应式

解决此问题的关键在于使用以下方法来维护 prop 的响应式：

1. 使用计算属性

计算属性提供了一种创建对 prop 的响应式包装的方法。

const editing = computed(() => !props.modelValue || !props.obscureInitialValue);

2. 使用 watch() 方法

watch() 方法允许我们监听 prop 的变化，并在 prop 更新时更新 editing ref。

watch(() => [props.modelValue, props.obscureInitialValue], () => {
  editing.value = !props.modelValue || !props.obscureInitialValue;
});

3. 使用 toRef() 方法

toRef() 方法允许我们从 prop 创建响应式 ref。

const modelValue = toRef(props, 'modelValue');
const obscureInitialValue = toRef(props, 'obscureInitialValue');

const editing = ref(!modelValue.value || !obscureInitialValue.value);

最佳实践

1. 优先使用计算属性或 watch() 方法

直接解引用 prop 会导致意外行为，因此建议优先使用计算属性或 watch() 方法。

2. 避免在组件内修改 prop

修改 prop 可能导致意想不到的结果，因为它会中断 Vue 对 prop 的跟踪。