Vue中的单向数据流

单向数据流指只能从一个方向来修改状态。

在这里插入图片描述

state:驱动应用的数据源。view:以声明方式将 state 映射到视图 。 actions:响应在 view 上的用户输入导致的状态变化。

单向数据流过程:

简单的单向数据流(unidirectional data flow)是指用户访问View,View发出用户交互的Action,在Action里对state进行相应更新。state更新后会触发View更新页面的过程。这样数据总是清晰的单向进行流动,便于维护并且可以预测。

特点:

(1) 所有状态的改变可记录、可跟踪,源头易追溯;
(2) 所有数据只有一份,组件数据只有唯一的入口和出口,使得程序更直观更容易理解,有利于应用的可维护性;
(3) 一旦数据变化,就去更新页面(data-页面),但是没有(页面-data);
(4) 如果用户在页面上做了变动,那么就手动收集起来(双向是自动),合并到原有的数据中。

组件之间的单项数据流:

父组件中的数据可以通过props流动到子组件中,并且当父组件中的数据发生改变的时候,子组件会自动接收到这个修改后的数据并且更新页面中的内容。

所以,数据一般是由父组件提供的,当父组件中的数据发生了改变,子组件就会自动接收到这个数据的变化,从而更新子组件。

但是反过来则不行,这样会防止从子组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解。

每次父级组件发生更新时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了,Vue 会在浏览器的控制台中发出警告。

注意:

1、数据从父组件流向(传递)给子组件,只能单向绑定。

2、在子组件内部不应该修改父组件传递过来的数据。
在这里插入图片描述

发布了82 篇原创文章 · 获赞 331 · 访问量 55万+

猜你喜欢

转载自blog.csdn.net/liuyifeng0000/article/details/104954884