单项数据流

前端精髓 专栏收录该内容
42 篇文章 1 订阅

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>
  );
}

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

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页

打赏

前端精髓

小礼物走一走,来CSDN关注我

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值