聊一聊Vue的单向数据流

关注“青年码农”公众号

回复“特效源码”可获取各种资料

Vue官方对单向数据流的描述是这样的（去掉了几句）：父子 prop 之间形成了一个单向下行绑定，父级 prop 的更新会向下流动到子组件中，额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。

意思是说，父级给子组件是啥，子组件可以用，也可以不用，但是不能修改。这就保证了数据可控性，但是事实真的如此吗？官方文档下面还有一句话。

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

对JavaScript数据类型了解的小伙伴，应该很好理解这句话的意思，如果不了解的，可以读了解。这里就不过多说。

1 基本数据类型传递

我们先来传递基本数据类型，然后在子组件中修改，看控制台如何提示
首先定义一个父组件，只引用一个子组件，只传递一个基本数据类型的index

<template>
&nbsp;&nbsp; <div>
&nbsp;&nbsp;&nbsp;&nbsp; <Footer&nbsp;:index="index"> </Footer>
&nbsp;&nbsp; </div>
</template>
<script>
import&nbsp;Footer&nbsp;from&nbsp;"@/components/Footer";
export&nbsp;