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 相关文章推荐
js弹窗返回值详解(window.open方式)
Jan 11 Javascript
jquery 字符串切割函数substring的用法说明
Feb 11 Javascript
jquery制作多功能轮播图插件
Apr 02 Javascript
$.extend 的一个小问题
Jun 18 Javascript
Bootstrap菜单按钮及导航实例解析
Sep 09 Javascript
原生js简单实现放大镜特效
May 16 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
Nov 15 Javascript
javascript代码优化的8点总结
Jan 29 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
May 23 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
Sep 05 Javascript
详解Vue的watch中的immediate与watch是什么意思
Dec 30 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
Aug 04 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对gzip文件或者字符串解压实例参考
2008/07/25 PHP
php实现不通过扩展名准确判断文件类型的方法【finfo_file方法与二进制流】
2017/04/18 PHP
php+layui数据表格实现数据分页渲染代码
2019/10/26 PHP
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
2006/09/22 Javascript
jquery提示 &quot;object expected&quot;的解决方法
2009/12/13 Javascript
基于JQuery的asp.net树实现代码
2010/11/30 Javascript
JavaScript中:表达式和语句的区别[译]
2012/09/17 Javascript
JS中setTimeout()的用法详解
2013/04/14 Javascript
自己封装的常用javascript函数分享
2015/01/07 Javascript
JavaScript中的闭包介绍
2015/03/15 Javascript
js实现的Easy Tabs选项卡用法实例
2015/09/06 Javascript
微信小程序 判断手机号的实现代码
2017/04/19 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
2018/02/27 Javascript
webpack打包js的方法
2018/03/12 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
2018/09/21 Javascript
CryptoJS中AES实现前后端通用加解密技术
2018/12/18 Javascript
JavaScript 事件代理需要注意的地方
2020/09/08 Javascript
Vue实现图书管理小案例
2020/12/03 Vue.js
基于element-ui封装表单金额输入框的方法示例
2021/01/06 Javascript
[01:32]TI珍贵瞬间系列(一)
2020/08/26 DOTA
搞笑的程序猿:看看你是哪种Python程序员
2015/06/12 Python
Python Web框架Tornado运行和部署
2020/10/19 Python
Python正则表达式经典入门教程
2017/05/22 Python
使用python编写简单的小程序编译成exe跑在win10上
2018/01/15 Python
python3基于TCP实现CS架构文件传输
2018/07/28 Python
python+opencv实现阈值分割
2018/12/26 Python
python爬取本站电子书信息并入库的实现代码
2020/01/20 Python
selenium学习教程之定位以及切换frame(iframe)
2021/01/04 Python
屈臣氏官方旗舰店:亚洲享负盛名的保健及美妆零售商
2019/03/15 全球购物
集世界奢侈品和设计师品牌的意大利精品买手店:Tessabit
2019/08/17 全球购物
2014年自我评价
2014/01/04 职场文书
《会走路的树》教后反思
2014/04/19 职场文书
1亿有多大教学反思
2014/05/01 职场文书
篮球比赛口号
2014/06/10 职场文书
2014年党员自我评议(5篇)
2014/09/12 职场文书
创业计划书之密室逃脱
2019/11/08 职场文书