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代码
Dec 21 Javascript
jQuery中prop()方法用法实例
Jan 05 Javascript
jQuery中hasClass()方法用法实例
Jan 06 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
Jan 03 Javascript
webpack实现热更新(实施同步刷新)
Jul 28 Javascript
利用10行js代码实现上下滚动公告效果
Dec 08 Javascript
深入浅析vue组件间事件传递
Dec 29 Javascript
详解Vue webapp项目通过HBulider打包原生APP
Jun 29 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
Apr 26 Javascript
js判断在哪个浏览器打开项目的方法
Jan 21 Javascript
js实现可爱的气泡特效
Sep 05 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_push()数组函数:将一个或多个单元压入数组的末尾(入栈)
2011/07/12 PHP
PHP设计模式之调解者模式的深入解析
2013/06/13 PHP
php输入流php://input使用浅析
2014/09/02 PHP
php表单提交与$_POST实例分析
2015/01/26 PHP
php实现兼容2038年后Unix时间戳转换函数
2015/03/18 PHP
php实现有序数组旋转后寻找最小值方法
2018/09/27 PHP
关于文本限制字数的js代码
2007/04/02 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
2012/05/23 Javascript
删除select中所有option选项jquery代码
2013/08/12 Javascript
jquery取子节点及当前节点属性值的方法
2014/09/09 Javascript
JavaScript实现的一个倒计时的类
2015/03/12 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
2015/03/13 Javascript
JavaScript生成随机字符串的方法
2015/03/19 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
2015/08/19 Javascript
javascript cookie的简单应用
2016/02/24 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
2016/05/30 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
2016/11/04 Javascript
sea.js常用的api简易文档
2016/11/15 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
2017/08/04 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
2017/08/23 jQuery
Vue监听一个数组id是否与另一个数组id相同的方法
2018/09/26 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
2018/11/30 Javascript
Python 爬虫爬取指定博客的所有文章
2016/02/17 Python
python记录程序运行时间的三种方法
2017/07/14 Python
python的staticmethod与classmethod实现实例代码
2018/02/11 Python
canvas实现漂亮的下雨效果的示例
2018/04/18 HTML / CSS
Ray-Ban雷朋太阳眼镜英国官网:Ray-Ban UK
2019/11/23 全球购物
古驰英国官网:GUCCI英国
2020/03/07 全球购物
PHP使用Redis队列执行定时任务实例讲解
2021/03/24 PHP
高二地理教学反思
2014/01/24 职场文书
诚实守信道德模范事迹材料
2014/08/15 职场文书
2014年采购部工作总结
2014/11/20 职场文书
学生检讨书范文
2015/01/27 职场文书
学校办公室主任岗位职责
2015/04/01 职场文书
2019事业单位个人工作总结范文
2019/08/26 职场文书
php远程请求CURL案例(爬虫、保存登录状态)
2021/04/01 PHP