vue响应式更新机制及不使用框架实现简单的数据双向绑定问题


Posted in Javascript onJune 27, 2019

最近看到有些人说vue是双向数据绑定的,有些人说vue是单向数据流的,我认为这两种说法都是错误的,vue是一款具有响应式更新机制的框架,既可以实现单向数据流也可以实现数据的双向绑定。

2 单向数据流与数据双向绑定

单向数据流是指model中的数据发生改变时引起view的改变。

vue响应式更新机制及不使用框架实现简单的数据双向绑定问题

双向数据绑定是指model中的数据发生改变时view的改变,view的改变也会引起model的改变。

vue响应式更新机制及不使用框架实现简单的数据双向绑定问题

//这个是单向数据流,改变这个input的value值并不能是data中的text属性发生改变。
<input type="text" :value="text">
data:{
  return {
    text:'文本输入框'
  }
}
//这个是双向数据绑定,无论是修改model还是修改view都能引起另一方的改变。
<input type="text" v-model="text">
data:{
  return {
    text:'文本输入框'
  }
}

3 vue中的数据双向绑定实现原理

vue给我们提供了实现数据双向绑定的两种语法糖,分别v-model和.sync修饰符,v-model用于为表单元素提供数据双向绑定,.sync修饰符用于为任意属性提供数据双向绑定,接下来我们来尝试不使用vue提供的语法糖,自己实现数据双向绑定。

要想view发生改变的时候引起model的改变首先要监听到view的改变,view发生改变时再去改变model,有了思路之后下面是代码实现。

//首先通过input事件监听视图的改变
<input type="text" :value="inputTitle" @input="onInput">
data:{
  return {
    text:'文本输入框'
  }
},
methods:{
  //视图发生改变的时候,将视图的值赋予模型的值,实现数据双向绑定
  onInput(event) {
    this.text=event.target.value;
  }
}

4 vue中的单向数据流实现原理

vue的单向数据流涉及到Object.defineProperty()这个API。

Object.defineProperty用法:

//Object.defineProperty用于数据劫持,可以监听一个变量的读取与写入,并在发生读取与写入的时候执行回调函数
Object.defineProperty(obj,prop,desc);
//obj是要定义的对象,prop是要定义的属性名,desc是属性的描述符

举例:

//定义一个对象并监听他的text属性的存值操作与取值操作
let data={};
Object.defineProperty(data,'text',{
  get() {
    console.log('取值操作');
  },
  set(newVal) {
    console.log('存值操作');
  }
});
console.log('data');
===>输出:
===>{}
===>取值操作
data.text='文本输入框';
===>输出
===>存值操作

有了Object.defineProperty()这个API就可以监听model中数据的改变并在数据改变的时候修改视图达到单向数据流的效果。

5 实现一个简易的数据双向绑定

下面实现一个简易的数据双向绑定,目标是在修改view可以使model中的变量发生改变,修改model可以使视图发生改变。

//html
<div id="app">
  <input type="text" id="input">
</div>
//js
let input = document.querySelector('#input');
//定义model
let data={
  text:''
};
//监听model中text的变化,首先实现数据单向流
Object.defineProperty(data,text,{
  get() {
  
  },
  //text发生改变的时候,修改input元素的value值 
  set(newVal) {
    input.value=newVal;
  }
});
//监听input元素的改变并修改model的值,实现数据双向绑定
input.addEventLisener('input',event=> {
  data.text=event.target.value;
});

至此就实现了简易的数据双向绑定,可以在控制台中修改data.text的值来查看视图是否发生改变,修改input元素的值在控制台中打印data.text查看model是否发生改变。

总结

以上所述是小编给大家介绍的vue响应式更新机制及不使用框架实现简单的数据双向绑定问题 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
多个js与css文件的合并方法详细说明
Dec 26 Javascript
仿百度输入框智能提示的js代码
Aug 22 Javascript
javascript 实现键盘上下左右功能的小例子
Sep 15 Javascript
在JavaScript中使用timer示例
May 08 Javascript
javascript if条件判断方法小结
May 17 Javascript
JS判断变量是否为空判断是否null
Jul 25 Javascript
javascript的tab切换原理与效果实现方法
Jan 10 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
Mar 26 Javascript
JavaScript实现梯形乘法表的方法
Apr 25 Javascript
Javascript之Date对象详解
Jun 07 Javascript
localStorage的黑科技-js和css缓存机制
Feb 06 Javascript
vue elementUI批量上传文件
Apr 26 Vue.js
微信小程序实现form表单本地储存数据
Jun 27 #Javascript
ES6 class的应用实例分析
Jun 27 #Javascript
ES6 Promise对象的应用实例分析
Jun 27 #Javascript
使用Vue 实现滑动验证码功能
Jun 27 #Javascript
js变量值传到php过程详解 将php解析成数据
Jun 26 #Javascript
javascript触发模拟鼠标点击事件
Jun 26 #Javascript
JavaScript动态添加数据到表单并提交的几种方式
Jun 26 #Javascript
You might like
一个显示效果非常不错的PHP错误、异常处理类
2014/03/21 PHP
PHP接口继承及接口多继承原理与实现方法详解
2017/10/18 PHP
JS 文件大小判断的实现代码
2010/04/07 Javascript
jQuery EasyUI API 中文文档 - Draggable 可拖拽
2011/09/29 Javascript
基于jQuery实现滚动刷新效果
2017/01/09 Javascript
angularjs+bootstrap菜单的使用示例代码
2017/03/07 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
2017/08/17 Javascript
实现jquery放大镜的两种方法
2018/02/22 jQuery
使用Vuex实现一个笔记应用的方法
2018/03/13 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
vue ssr服务端渲染(小白解惑)
2019/11/10 Javascript
vue中英文切换实例代码
2020/01/21 Javascript
javascript 原型与原型链的理解及应用实例分析
2020/02/10 Javascript
Vue Element校验validate的实例
2020/09/21 Javascript
Python去掉字符串中空格的方法
2014/03/11 Python
在python中的socket模块使用代理实例
2014/05/29 Python
python2.7到3.x迁移指南
2018/02/01 Python
python实现决策树分类
2018/08/30 Python
更新修改后的Python模块方法
2019/03/03 Python
PyQt5 加载图片和文本文件的实例
2019/06/14 Python
python tkinter实现屏保程序
2019/07/30 Python
关于Keras模型可视化教程及关键问题的解决
2020/01/24 Python
python虚拟环境模块venv使用及示例
2020/03/04 Python
解决jupyter notebook import error但是命令提示符import正常的问题
2020/04/15 Python
英国家居用品和家居装饰品购物网站:Cox & Cox
2019/08/25 全球购物
计算机应用毕业生自荐信
2013/10/23 职场文书
2014年教师节寄语
2014/04/03 职场文书
计算机应用专业自荐信
2014/07/05 职场文书
2015年实习班主任工作总结
2015/04/23 职场文书
2015年卫生监督工作总结
2015/05/21 职场文书
妈妈别哭观后感
2015/06/08 职场文书
阳光体育运动标语口号
2015/12/26 职场文书
小学教师暑期培训心得体会
2016/01/09 职场文书
tensorflow中的梯度求解及梯度裁剪操作
2021/05/26 Python
python基础入门之字典和集合
2021/06/13 Python
把77A收信机改造成收音机
2022/04/05 无线电