vue单向数据流的深入讲解

vue单向数据流

在vue中需要遵循单向数据流原则

  • 在父传子的前提下,父组件的数据发生会通知子组件自动更新
  • 子组件内部,不能直接修改父组件传递过来的props => props是只读的

代码示例

父组件代码:






子组件代码:






当我们在父组件中点击按钮时,会将父组件中的数据进行修改,这样子组件通过props接收的数据也会随之改变,这就印证了vue遵循单向数据流的第一条原则,在父传子的前提下,父组件的数据发生变化会通知子组件自动更新

vue单向数据流的深入讲解_第1张图片

vue单向数据流的深入讲解_第2张图片

当我们在子组件中点击按钮时,我们将父组件传递过来的数据进行修改,此时在子组件中数据得到修改,但是会报错,并且,父组件中的数据不会发生改变

vue单向数据流的深入讲解_第3张图片

vue单向数据流的深入讲解_第4张图片

然后我们用vue调试工具再来看一下,子组件中的数据发生变化,父组件的数据有没有跟着一起变化

vue单向数据流的深入讲解_第5张图片

从上面可见知道,父组件的数据发生变化会通知子组件自动更新,但是修改子组件通过props从父组件接收的数据时,它不会通知父组件自动更新,

特殊情况

上面讲述的是将基本数据类型改变会报错,那么将引用数据类型改变会不会报错呢,答案是否定的,如果父组件传给子组件的是一个引用数据类型,这里用数组为例,子组件修改数组内的元素,是不会报错的,数组是引用类型,互相更新,但不能改变引用地址,下面看一下效果

vue单向数据流的深入讲解_第6张图片

先将子组件内的点击事件处理函数要改变的数据从基本数据类型改为引用数据类型,然后点击按钮来看一下父组件和子组件中的数据有没有同步更新

vue单向数据流的深入讲解_第7张图片

vue单向数据流的深入讲解_第8张图片

这样就验证了数据需要遵循单向数据流原则的第二点(特殊情况除外),通过子组件直接修改父组件传递过来的props,这样是非常不建议的,他会影响后续不同状态下数据。

注意点:

在vue中需要遵循单向数据流原则

  1. 在父传子的前提下,父组件的数据发生会通知子组件自动更新
  2. 子组件内部,不能直接修改父组件传递过来的props => props是只读的

最后说明下 : 父组件传给子组件的是一个对象,子组件修改对象的属性,是不会报错的,对象是引用类型, 互相更新;但不能改变引用地址.

总结

vue单向数据流的深入讲解_第9张图片

到此这篇关于vue单向数据流的文章就介绍到这了,更多相关vue单向数据流内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

你可能感兴趣的:(vue单向数据流的深入讲解)