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 相关文章推荐
学习YUI.Ext 第二天
Mar 10 Javascript
Jquery弹出窗口插件 LeanModal的使用方法
Mar 10 Javascript
JavaScript控制按钮可用或不可用的方法
Apr 03 Javascript
关于Vue.js一些问题和思考学习笔记(2)
Dec 02 Javascript
js querySelector() 使用方法
Dec 21 Javascript
基于JavaScript实现屏幕滚动效果
Jan 18 Javascript
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
May 31 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
Jun 17 Javascript
vue 解决路由只变化参数页面组件不更新问题
Nov 05 Javascript
详解JS函数防抖
Jun 05 Javascript
浅谈vue的第一个commit分析
Jun 08 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过滤危险html代码的函数
2008/07/22 PHP
php下连接ftp实现文件的上传、下载、删除文件实例代码
2010/06/03 PHP
ThinkPHP实现支付宝接口功能实例
2014/12/02 PHP
JSON用法之将PHP数组转JS数组,JS如何接收PHP数组
2015/10/08 PHP
PHP预定义超全局数组变量小结
2018/08/20 PHP
tp5递归 无限级分类详解
2019/10/18 PHP
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
appendChild() 或 insertBefore()使用与区别介绍
2013/10/11 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
2014/12/15 Javascript
javascript批量修改文件编码格式的方法
2015/01/27 Javascript
jQuery实现个性翻牌效果导航菜单的方法
2015/03/09 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
2016/04/26 Javascript
JavaScript常用判断写法大全(推荐)
2016/05/30 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
2017/01/19 Javascript
Javascript中弹窗confirm与prompt的区别
2018/10/26 Javascript
JS数组Object.keys()方法的使用示例
2019/06/05 Javascript
Vue发布项目实例讲解
2019/07/17 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
2019/09/07 Javascript
ligerUI的ligerDialog关闭刷新的方法
2019/09/27 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
2020/02/01 jQuery
JavaScript实现省份城市的三级联动
2020/02/11 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
2020/03/06 Javascript
Python创建xml的方法
2015/03/10 Python
Python聚类算法之凝聚层次聚类实例分析
2015/11/20 Python
利用Python读取文件的四种不同方法比对
2017/05/18 Python
TensorFlow实现简单卷积神经网络
2018/05/24 Python
PyCharm代码提示忽略大小写设置方法
2018/10/28 Python
对Python函数设计规范详解
2019/07/19 Python
利用python制作拼图小游戏的全过程
2020/12/04 Python
Html5之svg可缩放矢量图形_动力节点Java学院整理
2017/07/17 HTML / CSS
HTML5本地存储之IndexedDB
2017/06/16 HTML / CSS
如何写毕业求职自荐信
2013/11/06 职场文书
总会计师岗位职责
2014/02/19 职场文书
优秀英文求职信范文
2015/03/19 职场文书
外贸英文求职信范文
2015/03/19 职场文书
运动会入场词
2015/07/18 职场文书