深入理解Vue 单向数据流的原理


Posted in Javascript onNovember 09, 2017

单向数据流是什么

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

深入理解Vue 单向数据流的原理

单向数据流的极简示意

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

深入理解Vue 单向数据流的原理

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

单向数据流的使用场景

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

从v-model开始讲起

1、v-model 用在 input 元素上

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

<input v-model="something" />
<input v-bind:value="something" v-on:input="something = $event.target.value" />

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

<input :value="something" @input="something = $event.target.value" />

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

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

2、v-model 用在组件上

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

<currency-input v-model="price"></currency-input>
Vue.component('currency-input', {
 template: '\
 <span>\
  $\
  <input\
  ref="input"\
  v-bind:value="value"\
  v-on:input="updateValue($event.target.value)"\
  >\
 </span>\
 ',
 props: ['value'], // 为什么这里要用 value 属性,value在哪里定义的?
 methods: {
 // 不是直接更新值,而是使用此方法来对输入值进行格式化和位数限制
 updateValue: function (value) {
  var formattedValue = value
  // 删除两侧的空格符
  .trim()
  // 保留 2 位小数
  .slice(
   0,
   value.indexOf('.') === -1
   ? value.length
   : value.indexOf('.') + 3
  )
  // 如果值尚不合规,则手动覆盖为合规的值
  if (formattedValue !== value) {
  this.$refs.input.value = formattedValue
  }
  // 通过 input 事件带出数值
  // <!--为什么这里把 'input' 作为触发事件的事件名?`input` 在哪定义的?-->
  this.$emit('input', Number(formattedValue))
 }
 }
})

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

<currency-input v-model="price"></currency-input>
所以在组件中使用时,它相当于下面的简写:
//上行代码是下行的语法糖
<currency-input :value="price" @input="price = arguments[0]"></currency-input>

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

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

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

<input type="checkbox" v-model="something" />

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

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

<input type="checkbox" :checked="value" @change="change(value, $event)"

当 v-model 用到组件上时:

<checkbox v-model="value"></checkbox>

Vue.component('checkbox', {
 tempalte: '<input type="checkbox" @change="change" :checked="currentValue"/>'
 props: ['value'],
 data: function () {
  return {
   //这里为什么要定义一个局部变量,并用 prop 的值初始化它。
   currentValue: this.value
  };
 },
 methods: {
 change: function ($event) {
  this.currentValue = $event.target.checked;
  this.$emit('input', this.currentValue); 
 }
})

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

4、vue 组件数据流

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

深入理解Vue 单向数据流的原理

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript延时重复执行函数 lLoopRun.js
Jun 29 Javascript
js验证模型自我实现的具体方法
Jun 21 Javascript
Jquery获取和修改img的src值的方法
Feb 17 Javascript
JavaScript代码性能优化总结(推荐)
May 16 Javascript
JavaScript制作弹出层效果
Dec 02 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
Jan 18 Javascript
canvas绘图不清晰的解决方案
Feb 28 Javascript
JS使用正则表达式找出最长连续子串长度
Oct 26 Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
Sep 14 Javascript
vue过滤器用法实例分析
Mar 15 Javascript
vue自定义指令之面板拖拽的实现
Apr 14 Javascript
vue ssr+koa2构建服务端渲染的示例代码
Mar 23 Javascript
node.js基于express使用websocket的方法
Nov 09 #Javascript
angular2系列之路由转场动画的示例代码
Nov 09 #Javascript
使用ef6创建oracle数据库的实体模型遇到的问题及解决方案
Nov 09 #Javascript
基于vue配置axios的方法步骤
Nov 09 #Javascript
微信小程序倒计时功能实现代码
Nov 09 #Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 #jQuery
微信小程序获取手机号授权用户登录功能
Nov 09 #Javascript
You might like
PHP获取MSN好友列表类的实现代码
2013/06/23 PHP
PHP文件锁函数flock()详细介绍
2014/11/18 PHP
PHP获取Exif缩略图的方法
2015/07/13 PHP
php算法实例分享
2015/07/14 PHP
PHP数组函数array_multisort()用法实例分析
2016/04/02 PHP
PHP多进程编程之僵尸进程问题的理解
2017/10/15 PHP
win10 apache配置虚拟主机后localhost无法使用的解决方法
2018/01/27 PHP
bindParam和bindValue的区别以及在Yii2中的使用详解
2018/03/12 PHP
JS小功能(操作Table--动态添加删除表格及数据)实现代码
2013/11/28 Javascript
JavaScript验证电子邮箱的函数
2014/08/22 Javascript
jquery实现在光标位置插入内容的方法
2015/02/05 Javascript
jQuery判断对象是否存在的方法
2015/02/05 Javascript
简述JavaScript对传统文档对象模型的支持
2015/06/16 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
2015/08/13 Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
2016/06/12 Javascript
js实现文字向上轮播功能
2017/01/13 Javascript
谈谈React中的Render Props模式
2018/12/06 Javascript
vue 中 命名视图的用法实例详解
2019/08/14 Javascript
浅谈vue限制文本框输入数字的正确姿势
2019/09/02 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
2020/04/30 Javascript
python实现定制交互式命令行的方法
2014/07/03 Python
python 读取视频,处理后,实时计算帧数fps的方法
2018/07/10 Python
Python用于学习重要算法的模块pygorithm实例浅析
2018/08/16 Python
Python实现的括号匹配判断功能示例
2018/08/25 Python
Pycharm运行加载文本出现错误的解决方法
2019/06/27 Python
Python递归及尾递归优化操作实例分析
2020/02/01 Python
keras模型保存为tensorflow的二进制模型方式
2020/05/25 Python
Ubuntu权限不足无法创建文件夹解决方案
2020/11/14 Python
澳大利亚儿童鞋在线:The Trybe
2019/07/16 全球购物
医科大学生毕业的自我评价分享
2013/11/12 职场文书
《木笛》教学反思
2014/03/01 职场文书
团日活动总结书
2014/05/08 职场文书
结婚幸福感言
2015/08/01 职场文书
会议室使用管理制度
2015/08/06 职场文书
vue封装数字翻牌器
2022/04/20 Vue.js
VUE解决跨域问题Access to XMLHttpRequest at
2022/05/06 Vue.js