vue3的props的变更

在Vue 3中，`props`用于从父组件向子组件传递数据。父组件更改`props`值时，如果该`prop`被标记为响应式 (`reactive` 或 `ref`)，那么子组件将会监听到这一变化。以下是关于Vue 3 `props`变更的一些要点：

1. **默认行为**: 如果父组件直接修改了`props`的值，子组件不会自动更新。这是因为Vue会尽量避免深度克隆 props，以节省性能。所以你需要明确地告诉子组件去更新。

   parentComponent.computedValue = newValue; // 子组件需要watch computedValue

2. **手动触发更新**: 当你需要让子组件重新渲染时，可以在子组件中使用`$emit`事件将更新通知给父组件。父组件接收到事件后，再设置新的 prop 值。

   childComponent.$emit('update:parentProp', newValue); // 父组件监听 'update:parentProp'

3. **响应式`: 如果你在子组件中通过`ref`或`reactive`来接收`props`，Vue会自动跟踪它们的变化，并在数据改变时触发视图更新。例如：

   export default defineComponent({
     setup(props) {
       const value = ref(props.value);
       watch(() => value.value, () => console.log('Value updated!'));
       return { value };
     },
   });

4. **非响应式`: 对于非响应式的`props`，如果你希望在父组件更改后立即反映到子组件，可以通过`setup`钩子中的`provide/inject`机制，自定义一个响应式对象包裹`props`，然后在子组件中注入使用。

   // 父组件
   provide('myValue', { value });

   // 子组件
   inject('myValue', (value) => {
     // 监听 myValue 的变化
     watch(value, () => console.log('Parent prop changed!'));
   });

总之，当需要子组件感知`props`变化并更新视图时，应主动发出通知或者使用响应式特性。同时要注意区分父子组件间的交互模式，合理利用Vue提供的功能。