Vue2.x和Vue3.x的双向绑定原理详解


Posted in Javascript onNovember 05, 2020

双向的绑定的原理

通过Object.defineproperty()重新定义对象属性的set方法、get方法来实现的,从这个属性中取值时会触发get方法,改变这个属性时会触发set方法,所以我们只要将一些需要更新view的方法放在这里面就可以实现data更新view了,而view更新data其实可以通过事件监听实现

当视图上的数据发生改变时, data 中的数据也发生改变当 data 中的数据发生改变时,视图中的数据也发生改变 Object.defineProperty()

Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。

语法Object.defineProperty(obj, prop, descriptor)

参数:

  • obj
    要定义属性的对象。
  • prop
    要定义或修改的属性的名称或 Symbol 。
  • descriptor
    要定义或修改的属性描述符。

返回值

被传递给函数的对象。

对象里目前存在的属性描述符有两种主要形式:数据描述符存取描述符。数据描述符是一个具有值的属性,该值可以是可写的,也可以是不可写的。存取描述符是由 getter 函数setter 函数所描述的属性。一个描述符只能是这两者其中之一;不能同时是两者

作用

* 可以给对象的一个属性设置两个方法:

* get:从这个属性中取值时会触发get方法

* set:给这个属性赋值时会触发set方法

let obj = {}
 // 给obj的name属性设置两个方法get&set
 Object.defineProperty(obj,'name',{
 set:function (value){//value就是给name赋值的结果
  console.log('触发了set');
  this._name=value//保存这个值 这里不能直接用name,因为会触发set
 },
 get:function(){
  console.log('触发了get');
  // 将保存的值返回回来
  return this._name
 }
 })

Vue2.x和Vue3.x的双向绑定原理详解

在给name属性赋值的时候触发set方法,在set方法中将值存起来

取值时触发get方法,在get方法中将值返回回来

vue2.x双向绑定原理

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 <!-- 这里相当于V -->
 <div id="v"></div>
 <input type="text" id="ipt">
</body>
<script>
 // MVVM:
 // 当V改变,M自动改变
 // 当M改变,V自动改变
 // 这里相当于M

 let data = {}
 // 给data中的name属性设置两个方法get ,set
 Object.defineProperty(data,'name',{
 set:function(value){
  // 当M改变时,V自动改变
  document.querySelector('#v').innerHTML = value
 },
 get:function(){
  return this._name
 }
 })
 // 给input添加一个内容改变的之后会触发的事件
 document.querySelector('#ipt').oninput = function(e){
 data.name = e.target.value
 }
</script>
</html>

一旦输入框中的内容发生改变,就会触发oninput事件马上改变data中的内容,一旦data中的name发生改变就会触发set方法将最新的值赋值给v,这样就实现了数据的双向绑定

Vue2.x和Vue3.x的双向绑定原理详解 

vue3.x双向绑定原理

Vue3.x是通过proxy(代理)实现的数据的双向绑定

proxy

跟Object.defineProperty一样也可以给对象的属性添加两个方法get&set

区别:

  • Object.defineProperty一次性只能给对象的一个属性添加get&set方法
  • Proxy:一次性给对象所有属性都设置get&set方法

用法:

  • 创建一个新的proxy对象
let p = new Proxy(obj,{get:function(){},set:function(){}})
<script>
 let obj = {}
 let p = new Proxy(obj,{
 get:function(obj,prop){
  //obj :被代理的对象 prop:要操作的属性
  console.log('触发了get');
  return obj[prop]
 },
 set:function(obj,prop,value){
  // obj:被代理的对象
  // prop要赋值的属性
  // value要赋值的结果
  console.log('触发了set');
  // 将赋值的结果保存起来
  obj[prop] = value
 }
 })
</script>

Vue2.x和Vue3.x的双向绑定原理详解
vue3.x实现数据的双向绑定

总结

到此这篇关于Vue2.x和Vue3.x的双向绑定原理的文章就介绍到这了,更多相关Vue2.x和Vue3.x双向绑定原理内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
document.documentElement &amp;&amp; document.documentElement.scrollTop
Dec 01 Javascript
javascript offsetX与layerX区别
Mar 12 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
Nov 12 Javascript
javascript如何使用bind指定接收者
May 04 Javascript
通过location.replace禁止浏览器后退防止重复提交
Sep 04 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
May 19 Javascript
JS区分Object与Aarry的六种方法总结
Feb 27 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
Nov 24 Javascript
webpack打包node.js后端项目的方法
Mar 10 Javascript
vue实现百度下拉列表交互操作示例
Mar 12 Javascript
详解bootstrap-fileinput文件上传控件的亲身实践
Mar 21 Javascript
vue 验证两次输入的密码是否一致的方法示例
Sep 29 Javascript
nuxt引入组件和公共样式的操作
Nov 05 #Javascript
jQuery列表动态增加和删除的实现方法
Nov 05 #jQuery
nuxt 实现在其它js文件中使用store的方式
Nov 05 #Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
Nov 05 #Javascript
vue实现点击出现操作弹出框的示例
Nov 05 #Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
Nov 05 #Javascript
Vant 在vue-cli 4.x中按需加载操作
Nov 05 #Javascript
You might like
php array的学习笔记
2012/05/16 PHP
php selectradio和checkbox默认选择的实现方法详解
2013/06/29 PHP
php版微信公众平台开发之验证步骤实例详解
2016/09/23 PHP
thinkphp框架page类与bootstrap分页(美化)
2017/06/25 PHP
ThinkPHP3.2.3框架实现执行原生SQL语句的方法示例
2019/04/03 PHP
设定php简写功能的方法
2019/11/28 PHP
Script的加载方法小结
2011/01/12 Javascript
jquery+json实现数据列表分页示例代码
2013/11/15 Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
2014/01/26 Javascript
Windows系统下使用Sublime搭建nodejs环境
2015/04/13 NodeJs
js获取数组的最后一个元素
2015/04/14 Javascript
微信小程序的生命周期的详解
2017/10/19 Javascript
Vue精简版风格指南(推荐)
2018/01/30 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
2018/08/30 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
2019/06/24 Javascript
Java Varargs 可变参数用法详解
2020/01/28 Javascript
JavaScript实现移动端弹窗后禁止滚动
2020/05/25 Javascript
Python使用gensim计算文档相似性
2016/04/10 Python
itchat接口使用示例
2017/10/23 Python
Python下简易的单例模式详解
2019/04/08 Python
python实现关闭第三方窗口的方法
2019/06/28 Python
Python中bisect的用法及示例详解
2020/07/20 Python
python爬虫要用到的库总结
2020/07/28 Python
五分钟带你搞懂python 迭代器与生成器
2020/08/30 Python
python中openpyxl和xlsxwriter对Excel的操作方法
2021/03/01 Python
be2台湾单身男女交友:全球网路婚姻介绍的领导品牌
2019/10/11 全球购物
应届大专毕业生个人自荐信
2013/09/22 职场文书
《彩色世界》教学反思
2014/04/12 职场文书
2014年教师业务学习材料
2014/05/12 职场文书
感恩教师节演讲稿
2014/09/03 职场文书
数学教师求职信范文
2015/03/20 职场文书
法律意见书范本
2015/06/04 职场文书
政审证明材料
2015/06/19 职场文书
庆祝教师节新闻稿
2015/07/17 职场文书
班主任远程培训研修日志
2015/11/13 职场文书
mysql数据插入覆盖和时间戳的问题及解决
2022/03/25 MySQL