深入理解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数组长度循环数组内所有元素
Dec 27 Javascript
JavaScript中奇葩的假值示例应用
Mar 11 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
Apr 30 Javascript
JavaScript处理解析JSON数据过程详解
Sep 11 Javascript
程序员必知35个jQuery 代码片段
Nov 05 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
Dec 05 Javascript
ES6的新特性概览
Mar 10 Javascript
Javascript打印局部页面实例
Jun 21 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
Jun 28 Javascript
详解Vue.js Mixins 混入使用
Sep 15 Javascript
解决vue的变量在settimeout内部效果失效的问题
Aug 30 Javascript
javascript实现打砖块小游戏(附完整源码)
Sep 18 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 Mssql操作简单封装支持存储过程
2009/12/11 PHP
xml在joomla表单中的应用详解分享
2012/07/19 PHP
用Json实现PHP与JavaScript间数据交换的方法详解
2013/06/20 PHP
浅谈PHP的反射API
2017/02/26 PHP
php通过各种函数判断0和空
2020/07/04 PHP
Windows下wamp php单元测试工具PHPUnit安装及生成日志文件配置方法
2018/05/28 PHP
Laravel框架查询构造器简单示例
2019/05/08 PHP
php 根据URL下载远程图片、压缩包、pdf等文件到本地
2019/07/26 PHP
javascript 写类方式之七
2009/07/05 Javascript
基于jquery实现点击左右按钮图片横向滚动
2013/04/11 Javascript
jQuery弹出(alert)select选择的值
2013/04/21 Javascript
node.js中的path.extname方法使用说明
2014/12/09 Javascript
JavaScript取得WEB安全颜色列表的方法
2015/07/14 Javascript
JS实现图片高亮展示效果实例
2015/11/24 Javascript
学习JavaScript设计模式之装饰者模式
2016/01/19 Javascript
jQuery选择器总结之常用元素查找方法
2016/08/04 Javascript
Angular2整合其他插件的方法
2018/01/20 Javascript
JavaScript中 ES6变量的结构赋值
2018/07/10 Javascript
修改vue+webpack run build的路径方法
2018/09/01 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
2020/11/11 Javascript
Python 爬虫学习笔记之正则表达式
2016/09/21 Python
在django中使用自定义标签实现分页功能
2017/07/04 Python
浅谈python jieba分词模块的基本用法
2017/11/09 Python
python opencv实现运动检测
2018/07/10 Python
对Pyhon实现静态变量全局变量的方法详解
2019/01/11 Python
Python中的异常处理try/except/finally/raise用法分析
2019/02/28 Python
python3 property装饰器实现原理与用法示例
2019/05/15 Python
tensor和numpy的互相转换的实现示例
2019/08/02 Python
Python Django中间件,中间件函数,全局异常处理操作示例
2019/11/08 Python
Python程序控制语句用法实例分析
2020/01/14 Python
Python日志:自定义输出字段 json格式输出方式
2020/04/27 Python
Python 求向量的余弦值操作
2021/03/04 Python
HTML5标签与HTML4标签的区别示例介绍
2013/07/18 HTML / CSS
公安局班子个人对照检查材料思想汇报
2014/10/09 职场文书
初中军训感言
2015/08/01 职场文书
完美解决golang go get私有仓库的问题
2021/05/05 Golang