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 相关文章推荐
jquery学习笔记二 实现可编辑的表格
Apr 09 Javascript
根据出生日期自动取得星座的js代码
Jul 20 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
Aug 12 Javascript
JavaScript把数组作为堆栈使用的方法
Mar 20 Javascript
比较常见的javascript中定义函数的区别
Nov 09 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
Jan 08 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
Apr 06 Javascript
sencha ext js 6 快速入门(必看)
Jun 01 Javascript
BootStrop前端框架入门教程详解
Dec 25 Javascript
vue实现动态按钮功能
May 13 Javascript
浅谈一种让小程序支持JSX语法的新思路
Jun 16 Javascript
JS错误处理与调试操作实例分析
Apr 13 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+apc实现上传进度条且在IE7下不显示的问题解决方法
2013/04/25 PHP
php实现的CSS更新类实例
2014/09/22 PHP
php中stdClass的用法分析
2015/02/27 PHP
php编写批量生成不重复的卡号密码代码
2015/05/14 PHP
Docker 如何布置PHP开发环境
2016/06/21 PHP
深入浅出讲解:php的socket通信原理
2016/12/03 PHP
解决安装WampServer时提示缺少msvcr110.dll文件的问题
2017/07/09 PHP
PHP+Ajax简单get验证操作示例
2019/03/02 PHP
彻底搞懂JS无缝滚动代码
2007/01/03 Javascript
JQuery 常用操作代码
2010/03/14 Javascript
js 动态加载事件的几种方法总结
2013/12/25 Javascript
js实现图片从左往右渐变切换效果的方法
2015/02/06 Javascript
jQuery中设置form表单中action值的实现方法
2016/05/25 Javascript
jQuery解决$符号命名冲突
2016/06/18 Javascript
基于JavaScript实现前端文件的断点续传
2016/10/17 Javascript
使用Vue-Router 2实现路由功能实例详解
2017/11/14 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
2018/08/24 Javascript
详解如何用VUE写一个多用模态框组件模版
2018/09/27 Javascript
Python语言的12个基础知识点小结
2014/07/10 Python
跟老齐学Python之赋值,简单也不简单
2014/09/24 Python
回调函数的意义以及python实现实例
2017/06/20 Python
基于python元祖与字典与集合的粗浅认识
2017/08/23 Python
django中的setting最佳配置小结
2017/11/21 Python
基于python的多进程共享变量正确打开方式
2018/04/28 Python
python监控进程状态,记录重启时间及进程号的实例
2019/07/15 Python
龟牌英国商店:Turtle Wax Brand Store UK
2019/07/02 全球购物
大学生简单自荐信
2013/11/10 职场文书
销售顾问岗位职责
2014/02/25 职场文书
公司授权委托书范文
2014/08/02 职场文书
小学标准化建设汇报材料
2014/08/16 职场文书
医院财务人员岗位职责
2015/04/14 职场文书
首次购房证明
2015/06/19 职场文书
2016入党积极分子考察评语
2015/12/01 职场文书
python 破解加密zip文件的密码
2021/04/22 Python
Java使用Unsafe类的示例详解
2021/09/25 Java/Android
Python中re模块的元字符使用小结
2022/04/07 Python