linuxsir首页 LinuxSir.Org | Linux、BSD、Solaris、Unix | 开源传万世,因有我参与欢迎您!
网站首页 | 设为首页 | 加入收藏
您所在的位置:主页 > Linux基础建设 >

vue的双向绑定原理浅析与简单实现

时间:2019-11-25  来源:未知  作者:admin666

很久之前看过vue的一些原理,对其中的双向绑定原理也有一定程度上的了解,只是最近才在项目上使用vue,这才决定好好了解下vue的实现原理,因此这里对vue的双向绑定原理进行浅析,并做一个简单的实现。

vue双向绑定的原理浅析

vue数据的双向绑定是通过数据劫持,并结合发布-订阅模式的方式来实现的。

我们先通过一个最简单的vue例子来查看vue初始化数据上的对象到底是什么东西。

var vm = new Vue({
    data: { // 双向绑定的数据对象
        obj: {
            a: 1
        }
    },
    created: function () { // 初始化事件
        console.log(this.obj);
    }
});

通过控制台打印,我们可以看到属性a有两个相对应的get方法和set方法,这两个方法的生成,是Object.defineProperty()方法来决定的。这样我们就可以知道,vue是通过Object.defineProperty()方法来实现数据劫持,然后在其中的get方法和set方法做相应的操作来实现数据的双向绑定的。

Object.defineProperty()方法的get和set属性

Object.defineProperty()方法可以用来控制一个对象的一些特有操作,比如读写权、是否可以枚举等,这里只简单分析它对应的两个描述属性get和set,这两个属性对应的属性值是函数。要了解这个方法的更多属性,可以参考MDN文档:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty。

如果你开发过Java应用,很容易就能想到get方法和set方法是用来获取和设置对象的属性值的,同时还能通过在get方法和set方法中添加一些特定的代码来操作属性值,而在这里,情况其实并没有什么不同。顾名思义,get方法就是在读取对象的属性值的时候触发的事件函数,set方法啊就是在设置对象的属性值的时候触发的事件函数。

简单实现

要实现mvvm的双向绑定是需要另外的一些操作的,比如发布-订阅模式的应用和dom操作等,这里只简单实现其中的数据劫持,对其他的原理不做深入探讨。

var Person = {}; // 定义一个Person对象
var name = ''; // 定义一个name属性
// 给Person对象的name属性绑定get和set事件函数
Object.defineProperty(Person, 'name', {
  set: function (value) {
    name = value;
    console.log('我爱的人是' + value);
  },
  get: function () {
    return '我爱' + name;
  }
})
 
Person.name = 'yanggb';  // 我爱的人是yanggb
console.log(Person.name);  // 我爱yanggb

这样,我们就在设置和读取Person对象的name属性的时候做了一些额外的增强操作,vue就是基于这种方法来进行对数据的劫持的。

linux
友情链接
  • Mozilla发布Firefox 67.0.4,修复沙箱逃逸漏洞
  • 蚂蚁金服正式成为CNCF云原生计算基金会黄金会员
  • Firefox 68将采用Microsoft BITS安装更新
  • OpenSSH增加对存储在RAM中的私钥的保护
  • 谷歌想实现自己的curl,为什么?
  • Raspberry Pi 4发布:更快的CPU、更大的内存
  • Firefox的UA将移除CPU架构信息
  • Ubuntu放弃支持32位应用程序实属乌龙,Steam会否重回Ubuntu怀抱
  • Qt 5.13稳定版发布:引入glTF 2.0、改进Wayland以及支持Lottie动
  • 红帽企业Linux 7现已内置Redis 5最新版
  • Slack进入微软内部禁用服务清单,GitHub也在其列?
  • 安全的全新编程语言V发布首个可用版本
  • Windows Terminal已上架,快尝鲜
  • 阿里巴巴微服务开源生态报告No.1
  • 面世两年,Google地球将支持所有基于Chromium的浏览器
  • 推进企业容器化持续创新,Rancher ECIC千人盛典完美收官
  • CentOS 8.0最新构建状态公布,或于数周后发布
  • Debian移植RISC
  • 微软拆分操作系统的计划初现雏形
  • Oracle发布基于VS Code的开发者工具,轻松使用Oracle数据库
  • Ubuntu 19.10停止支持32位的x86架构
  • 微软为Windows Terminal推出全新logo
  • 联想ThinkPad P系列笔记本预装Ubuntu系统
  • 微软发布适用于Win7/8的Microsoft Edge预览版
  • 启智平台发布联邦学习开源数据协作项目OpenI纵横
  • 经过六个多月的延迟,微软终于推出Hyper
  • ZFS On Linux 0.8.1 发布,Python可移植性工作
  • DragonFly BSD 5.6.0 发布,HAMMER2状态良好
  • Linux Kernel 5.2
  • CentOS 8.0 看起来还需要几周的时间
  • 百度网盘Linux版正式发布
  • PCIe 6.0宣布:带宽翻倍 狂飙至256GB/s
  • PHP 7.4 Alpha 发布,FFI扩展,预加载Opcache以获得更好的性能
  • Canonical将在未来的Ubuntu版本中放弃对32位架构的支持
  • Scala 2.13 发布,改进的编译器性能
  • 微软的GitHub收购了Pull Panda,并且使所有订阅完全免费
  • Windows Subsystem for Linux 2 (WSL 2)现在适用于Windows 10用
  • Debian 10 “Buster”的RISC
  • MariaDB宣布发布MariaDB Enterprise Server 10.4
  • DXVK 1.2.2 发布,带来微小的CPU开销优化
  • DragonFlyBSD 5.6 RC1 发布,VM优化,默认为HAMMER2
  • PrimeNG 8.0.0 发布,支持Angular 8,FocusTrap等
  • GIMP 2.10.12 发布,一些有用的改进
  • 清华大学Anaconda 镜像服务即将恢复
  • Debian GNU/Linux 10 “Buster” 操作系统将于2019年7月6日发布
  • 时时彩论坛
  • 五星体育斯诺克
  • 北单比分直播
  • 河北11选5走势图
  • 福建体彩36选7开奖结果
  • 九龙图库下载