一起学Vuejs（十六）----- 双向数据绑定与单向数据流

不积跬步，无以至千里；不积小流，无以成江海。

 

Vuejs语言基础

 

双向数据绑定：

Vue中主要由三个部分组成：View、ViewModel和Model。其中View和Model不能直接进行通信，要通过中间件ViewModel来进行。

例如：当Model部分数据发生改变时，由于vue中Data Binding将底层数据和Dom层进行了绑定，ViewModel通知View层更新视图；

当在视图 View数据发生变化也会同步到Model中。View和Model之间的同步完全是自动的，不需要人手动的操作DOM。

注意：

单向绑定：插值形式 {{data}}，v-bind；

双向绑定：表单的v-model，用户对View层的更改会直接同步到Model层（实际上v-model只是v-bind:value 和 v-on:input的语法糖）。

 

单向数据流：

父组件传值给子组件，子组件不能修改这个值；

父组件修改这个值后，子组件也会受影响，这个影响是单向的，只能从父组件流向子组件，不能反向。

注意：

prop 使得父子之间形成了一个单向下行绑定：

父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致应用的数据流向难以理解。

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

 

 

博客借鉴：https://www.cnblogs.com/xuefang-yang/p/13048510.html