vue是单向数据流还是双向数据流,vue单向数据流和双向数据流的区别
随着前端项目越来越复杂，出现了一堆降低开发复杂度的概念。单向数据流就是其中之一。下面文章主要介绍vue单向数据流的相关信息，通过示例代码非常详细的介绍。有需要的朋友可以参考一下。
目录
官网解释什么是单向数据流。示例a-输入原始用途组件代码用途方案汇总
官网解释
的所有属性在其父属性和子属性之间形成单向向下绑定：父属性的更新将向下流动到子组件，但反之则不然。这将防止子组件意外更改父组件的状态，从而使应用程序的数据流难以理解。此外，每次父组件更改时，子组件中的所有属性都将刷新为最新值。这意味着您不应该在子组件中更改属性。如果您这样做，Vue将在浏览器的控制台中发出警告。
单向数据流是什么
单向数据流意味着只能从一个方向修改状态。下图是单向数据流的极简图解：
单向数据流对对应双向数据流(也叫双向绑定)。在双向数据流中，一个模型(可以理解为状态的集合)可以修改自身或者其他模型的状态，用户的操作(比如在输入框中输入内容)也可以修改状态。这就使得改变一个状态会引发一系列的状态变化，最后很难预测最后的状态会是什么。使代码难以调试。如下图所示：
与双向数据流相比，在单向数据流中，当你需要修改状态时，完全启动一个修改过的流程。这限制了状态修改的方式，使得状态可预测且易于调试。
示例
我们通过一个例子来说明单向数据流和双向绑定，这个例子是ant-design-vue表单组件的二次封装。
a-input原始用法
模板
a-输入v-model=data/
/模板
脚本
导出默认值{
data() {
返回{
数据：“”
}
}
}
/脚本
数据中声明的属性将通过Object.definePropty方法用get和set方法添加，使其成为响应式数据。V-model是一个语法糖，model属性是在VUE版本2.2.0之后新增的
官方解释
允许自定义组件在使用v-model时自定义属性和事件。默认情况下，组件上的v-model将使用value作为属性，使用input作为事件，但是一些输入类型(如单选按钮和复选框按钮)可能希望将valueprop用于不同的目的。使用模型选项来避免这些情况引起的冲突。
我们使用这个属性来第二次封装上面的输入组件。
组件代码
模板
a-input:value= current value @ change= on input change /
/模板
脚本
导出默认值{
data() {
返回{
当前值：this.value
}
},
型号：{
事件：“更改”，
属性：“值”
},
道具：{
值：{
类型：字符串
}
},
观察：{
值：{
处理程序(新值){
this.currentValue=newVal
}
}
},
onInputChange(e) {
这个。$emit(change ，e.target.value)
}
}
/脚本
在父装配中使用
模板
my-input v-model=data /
/模板
脚本
导出默认值{
data() {
返回{
数据：“”
}
}
}
/脚本
上述子组件中的currentValue是实际输入组件的值，它的值是根据父组件传入的值得到的。输入标签组件的change事件触发父组件的change事件，从而改变传入的子组件props的值。这解释了单一数据流。父组件通过props将值传递给子组件，子组件通过emit事件通知父组件修改值。子组件不对父组件传递的属性做任何修改，而是通过父组件更新属性，使子组件更新自己的状态。
使用场景
当我们在实现一个由数据呈现的复杂表单时，那么我们的设计可以采用这种模式，可以保证子组件的事件通过props触发根节点的数据更新，并发出传输，从而更新后代组件的状态。
总结
关于vue单向数据流的这篇文章到此为止。更多关于vue单向数据流的信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。