Vue 3 Props 的响应性

在 Vue 3 中，props 是单向数据流的，具有以下特性：

Props 的响应性

1. props 本身是响应式的 - 当父组件传递的 prop 值发生变化时，子组件会接收到更新。

2. 子组件不能直接修改 props - Vue 会发出警告：”Avoid mutating a prop directly…”

子组件修改值的影响

• 简单数据类型（String, Number, Boolean等）：子组件修改不会影响父组件

  // 父组件
  <Child :count="parentCount" />
  
  // 子组件
  props: ['count'],
  methods: {
    increment() {
      this.count++ // 会警告，且不会影响父组件的 parentCount
    }
  }

• 对象/数组：虽然技术上可以修改（因为JavaScript对象是引用传递），但这违背了单向数据流原则

  // 父组件
  <Child :user="parentUser" />
  
  // 子组件
  props: ['user'],
  methods: {
    updateName() {
      this.user.name = 'new name' // 会修改父组件数据，但不推荐这样做
    }
  }

正确做法

1. 使用事件通知父组件修改：

   // 子组件
   this.$emit('update-count', newValue)
   
   // 父组件
   <Child :count="parentCount" @update-count="parentCount = $event" />

2. 使用 v-model（语法糖）：

   // 父组件
   <Child v-model="parentCount" />
   
   // 子组件
   props: ['modelValue'],
   emits: ['update:modelValue'],
   methods: {
     update() {
       this.$emit('update:modelValue', newValue)
     }
   }

3. 使用计算属性（如果需要基于prop派生状态）：

   props: ['initialCount'],
   data() {
     return {
       localCount: this.initialCount
     }
   }

记住：始终遵循单向数据流原则，使数据流更可预测，便于维护。

本作品采用《CC 协议》，转载必须注明作者和本文链接