怎样理解 Vue 的单向数据流？

理解 Vue 的单向数据流，是掌握 Vue 响应式机制和组件通信的基础之一。它可以简要理解为：

什么是单向数据流？

数据只能从父组件流向子组件，不能反过来。

图示理解：

父组件（Parent）
    ↓ props
子组件（Child）

• 父组件通过 props 把数据传给子组件。

• 子组件不能直接修改从父组件接收到的 props。

• 如果子组件想“影响”父组件数据，应该通过事件通知父组件，由父组件来更新数据。

例子：

<!-- 父组件 -->
<template>
  <Child :count="parentCount" @update="parentCount = $event" />
</template>

<script>
import Child from './Child.vue';

export default {
  components: { Child },
  data() {
    return {
      parentCount: 1
    };
  }
};
</script>

<!-- 子组件 Child.vue -->
<template>
  <button @click="updateCount">子组件按钮：{{ count }}</button>
</template>

<script>
export default {
  props: ['count'],
  methods: {
    updateCount() {
      this.$emit('update', this.count + 1); // 通知父组件去更新
    }
  }
};
</script>

为什么要单向？

好处	说明
数据流向清晰	避免组件间状态混乱
易于调试	只要看父组件就能知道数据来源
防止副作用	子组件无法“偷偷”修改父的数据
组件复用性强	子组件变得更独立、更可控

子组件直接修改 props 会怎样？

props: ['count'],
mounted() {
  this.count = 100; // ❌ Vue 会警告你 props 是只读的
}

你会看到控制台报错：

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders.

如果确实要修改怎么办？

你可以复制一份到本地 data 中：

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

这样你可以随意修改 localCount，不影响 props 原值。

子组件如何修改父组件数据？

1. 通过事件 $emit 通知父组件更新

this.$emit('update', newValue)

2. 使用 .sync 修饰符（语法糖，本质是 $emit('update:xxx')）

<Child :count.sync="parentCount" />

总结：

• 单向数据流：数据只能从父组件 → 子组件，不能反过来。

• 子组件要改数据 → 发事件通知父组件，由父组件来改。

• 避免 props 直接修改，用 $emit 或本地变量代替。