位置: 编程技术 - 正文

深入理解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 只是语法糖而已:

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

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

要理解这行代码,首先你要知道 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动态路由传参)

  • 税务局退回个税会计分录
  • 查付款记录需要什么?
  • 信息采集需要填两个家庭成员,但只能有一个监护人
  • 个体工商户可以给自己交五险一金吗
  • 免税 普票
  • 坏账准备计入营业收入如何报年报
  • 电子税务局财务报表在哪里查询
  • 公司三年零申报后注销
  • 法人投入投资款
  • 短期借款的账务处理实训
  • 车辆购置税完税证明二维码用什么扫
  • 个人独资企业变更投资人要交税吗
  • 什么叫应纳税额什么与什么的比率叫做税率
  • 开专票都需要什么资料
  • 外商投资企业所得税法第八条
  • 增值税月报时间
  • 免税商品进项税可以抵扣吗
  • 金税三期房产税源信息更改后
  • 公司为员工承担的个税可以税前扣除吗
  • 给员工购买口罩计入什么费用
  • 发票没有存根联怎么办
  • 企业财务负责人和办税人哪个责任大
  • 支付销售产品的保险费计入什么科目
  • 预计产品质量保证损失是什么意思
  • 搬运费没有发票能入成本吗?
  • 开具房租发票备注多少
  • 商贸流通企业的构成
  • 监理多计量承担什么责任
  • 单位交水费会计分录
  • win10怎么设置win7开始菜单
  • PHP:apache_lookup_uri()的用法_Apache函数
  • ctl.start
  • 奇托尔加赫城堡
  • 企业受赠业务的法律规定
  • 学校官网首页图片
  • 交易性金融资产的入账价值
  • Js模板字符串添加点击事件
  • 商贸企业发生退税的原因
  • 印花税计税基础含增值税
  • 固定资产提足折旧后,不论能否继续使用
  • 农民专业合作社连续几年未从事经营活动吊销营业执照
  • 固定资产转为投资性房地产属于会计政策变更
  • 企业所得税应纳税额的计算公式
  • 生产车间领用材料的会计分录
  • sql 覆盖索引
  • java处理字符串公式运算
  • 基于vue的开源甘特图控件
  • 公司月报和季报
  • 企业负担的社保费会计分录
  • 净利润除以实收资本是什么
  • 土地增值税要计入税金及附加吗
  • 企业出售自用房产开具增值税
  • 土地租金计入什么会计科目
  • 产品保修要钱吗
  • 以现金形式发工资违法吗
  • 收到税务局退回的个税手续费怎么入账
  • 印花税新政策
  • 接受投资者投入的资产
  • 计提工资发工资可做成一笔账吗
  • 企业盘盈盘亏的固定资产先要计入待处理财产损益
  • 航天信息发票全额抵扣
  • ms sql mysql
  • win2003server远程设置
  • solaris 11.4
  • solaris init
  • 电脑程序在运行桌面不显示的解决方法
  • mac怎么设置默认打开方式
  • windows的安装方式有哪些
  • win7旗舰版没有睡眠设置
  • vps如何搭建ss
  • vsftp命令
  • 浪漫樱花完整视频
  • linux shell $1
  • unity画面效果润色
  • numpy基础知识
  • Jquery uploadify上传插件使用详解
  • 安卓中textview
  • jquery使用教程
  • excel自定义控件
  • 做好绩效管理工作税务局
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设