vue单向数据流的深入理解
官网解释
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外变更父级组件的状态,从而导致你的应用的数据流向难以理解。额外的,每次父级组件发生变更时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了,Vue 会在浏览器的控制台中发出警告。
单向数据流是什么
单向数据流指只能从一个方向来修改状态。下图是单向数据流的极简示意:
与单向数据流对对应的是双向数据流(也叫双向绑定)。在双向数据流中,Model(可以理解为状态的集合) 中可以修改自己或其他Model的状态, 用户的操作(如在输入框中输入内容)也可以修改状态。这使改变一个状态有可能会触发一连串的状态的变化,最后很难预测最终的状态是什么样的。使得代码变得很难调试。如下图所示:
与双向数据流比,在单向数据流中,当你需要修改状态,完全重新开始走一个修改的流程。这限制了状态修改的方式,让状态变得可预测,容易调试。
示例
我们通过一个示例来解释单向数据流与双向绑定,这个示例是对ant-design-vue表单组件的二次封装
a-input原始用法
<template> <a-input v-model='data'/> </template> <script> export default { data() { return { data: '' } } } </script>
在data中声明的属性会通过Object.definePropty方法为其添加get和set方法,使其成为响应式数据。v-model是一个语法糖,在vue 2.2.0版本后新增了model属性
官方解释
允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event,但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。
我们利用这个属性来对上述input组件做二次封装
组件代码
<template> <a-input :value='currentValue' @change='onInputChange'/> </template> <script> export default { data() { return { currentValue: this.value } }, model: { event: 'change', prop: 'value' }, props:{ value: { type: String } }, watch: { value: { handler(newVal) { this.currentValue = newVal } } }, onInputChange(e) { this.$emit('change', e.target.value) } } </script>
在父组件中使用
<template> <my-input v-model='data' /> </template> <script> export default { data() { return { data:'' } } } </script>
上述子组件中的currentValue是实际input组件的值,他的值是根据父组件传入的值得出的,input标签组件的change事件来触发父组件的change事件,从而改变传入子组件props中value的值。这就解释了单项数据流,父組件通过props向子组件传递值,子组件通过emit事件来通知父组件修改值,子组件不在自身对父组件传递过来的props做任何修改,都是通过父组件来更新props,从而达到子组件更新自身状态。
使用场景
当我们在实现一个由数据渲染的复杂表单时,那么我们的设计就可以采用这种模式,通过props以及emit传递,保证子组件的事件触发根节点的数据更新,从而更新子孙组件的状态。
总结
到此这篇关于vue单向数据流的文章就介绍到这了,更多相关vue单向数据流内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Element plus中el-input框回车触发页面刷新问题以及解决办法
在el-form表单组件中el-input组件输入内容后按下Enter键刷新了整个页面,下面这篇文章主要给大家介绍了关于Element plus中el-input框回车触发页面刷新问题以及解决办法,需要的朋友可以参考下2024-03-03vue3+ts+element-plus实际开发之统一调用弹窗封装的详细过程
这篇文章主要介绍了vue3+ts+element-plus实际开发之统一调用弹窗封装的详细过程,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-03-03vue实现录音并转文字功能包括PC端web手机端web(实现过程)
vue实现录音并转文字功能,包括PC端,手机端和企业微信自建应用端,本文通过实例代码介绍vue实现录音并转文字功能包括PC端web手机端web,感兴趣的朋友跟随小编一起看看吧2024-08-08ElementUI下拉组件el-select一次从后端获取选项并设置默认值方式
这篇文章主要介绍了ElementUI下拉组件el-select一次从后端获取选项并设置默认值方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-01-01
最新评论