单项数据流

vue单项数据流

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

<template>
  <div id="app">
    <HelloWorld :total="total" />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  },
  data () {
    return {
      total:{
        a: 1,
        b: 2
      }
    }
  }
}
</script>

<template>
  <div class="hello">
    <div @click="handleClick">
      {{total.a}}
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    total: {
      type: Object,
      default: () => ({})
    }
  },
  methods: {
    handleClick () {
      this.total.a++
    }
  }
}
</script>

注意在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变这个对象或数组本身将会影响到父组件的状态。

会导致视图更新

react单项数据流

所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。

function Total(props) {
  const add = () => {
    props.count.a++
  }
  return <div onClick={add}>{props.count.a}</div>
}

function App() {
  const count = { a: 1, b: 2 }
  return (
    <div className="App">
      <Total count={count} />
    </div>
  );
}

数据虽然发生了改变但是视图不会更新
不会导致视图更新