深入理解Vue 单向数据流的原理(如何理解vue)

编辑：rootadmin

推荐整理分享深入理解Vue 单向数据流的原理(如何理解vue)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue深入浅出,vuex理解,vuex理解,vue深入浅出,vue深入浅出,深入实战vue开发,vue怎么理解,深入理解vue.js实战,内容如对您有帮助，希望把文章链接给更多的朋友！

单向数据流是什么

单向数据流指只能从一个方向来修改状态。下图是单向数据流的极简示意：

单向数据流的极简示意

与单向数据流对对应的是双向数据流（也叫双向绑定）。在双向数据流中，Model（可以理解为状态的集合）中可以修改自己或其他Model的状态，用户的操作（如在输入框中输入内容）也可以修改状态。这使改变一个状态有可能会触发一连串的状态的变化，最后很难预测最终的状态是什么样的。使得代码变得很难调试。如下图所示：

与双向数据流比，在单向数据流中，当你需要修改状态，完全重新开始走一个修改的流程。这限制了状态修改的方式，让状态变得可预测，容易调试。

单向数据流的使用场景

多个组件会共享状态时，共享状态和组件间（兄弟组件）通信变的不容易。我们把共享状态抽取出来，用单向数据流的方式会变得容易。

从v-model开始讲起

1、v-model 用在 input 元素上

v-model在使用的时候很像双向绑定的（实际上也是。。。），但是 Vue 是单项数据流，v-model 只是语法糖而已：

第一行的代码其实只是第二行的语法糖。然后第二行代码还能简写成这样：

要理解这行代码，首先你要知道 input 元素本身有个 oninput 事件，这是 HTML5 新增加的，类似 onchange ，每当输入框内容发生变化，就会触发 oninput ，通过 $event 把最新的 value 传递给 something。

我们仔细观察语法糖和原始语法那两行代码，可以得出一个结论：在给 input 元素添加 v-model 属性时，默认会把 value 作为元素的属性，然后把 'input' 事件作为实时传递 value 的触发事件

2、v-model 用在组件上

v-model 不仅仅能在 input 上用，在组件上也能使用，拿官网上的demo看。

如果你知道这两个问题的答案，那么恭喜你真正掌握了 v-model，如果你没明白，那么可以看下这段代码：

所以，给组件添加 v-model 属性时，默认会把 value 作为组件的属性，然后把 'input' 值作为给组件绑定事件时的事件名。这在写组件时特别有用。

3、v-model 的缺点和解决办法

在创建类似复选框或者单选框的常见组件时，v-model就不好用了。

v-model 给我们提供好了 value 属性和 oninput 事件，但是，我们需要的不是 value 属性，而是 checked 属性，并且当你点击这个单选框的时候不会触发 oninput 事件，它只会触发 onchange 事件。

因为 v-model 只是用到了 input 元素上，所以这种情况好解决：

当 v-model 用到组件上时：

在 Vue 2.2 版本，你可以在定义组件时通过 model 选项的方式来定制 prop/event 。

4、vue 组件数据流

从上面 v-model 的分析我们可以这么理解，双向数据绑定就是在单向绑定的基础上给可输入元素（input、textare等）添加了 change(input) 事件，来动态修改 model 和 view ，即通过触发（$emit）父组件的事件来修改mv来达到 mvvm 的效果。而 vue 组件间传递数据是单向的，即数据总是由父组件传递到子组件，子组件在其内部可以有自己维护的数据，但它无权修改父组件传递给它的数据，当开发者尝试这样做的时候，vue 将会报错。这样做是为了组件间更好的解耦，在开发中可能有多个子组件依赖于父组件的某个数据，假如子组件可以修改父组件数据的话，一个子组件变化会引发所有依赖这个数据的子组件发生变化，所以 vue 不推荐子组件修改父组件的数据，直接修改 props 会抛出警告。流程图如下：

所以，当你想要在子组件去修改 props 时，把这个子组件当成父组件那样用，所以就有了

1、定义一个局部变量，并用 prop 的值初始化它。2、定义一个计算属性，处理 prop 的值并返回。

标签: 如何理解vue

本文链接地址:https://www.jiuchutong.com/biancheng/377361.html 转载请保留说明！

上一篇：angular2系列之路由转场动画的示例代码(angularjs2)

下一篇：vue2 router 动态传参,多个参数的实例(vue动态路由传参)