vue双向数据绑定的原理

有关双向数据绑定的原理

最近两次面试的时候,被问到了vue中双向数据绑定的原理,因为初学不精,只是使用而没有深入研究,所以答不出来。之后就在网上查找了别人写的博客,学习一下。

下面是博客园一篇博客,以及MDN上讲解Object.defineProperty()方法的地址。

文章链接:vue的双向绑定原理及实现
Mozilla 开发者服务:Object.defineProperty()

因为内容比较长,就不转载了,只贴个连接在这里,有兴趣的可以直接点击链接访问。

这里简单说一下个人的理解。

vue实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。

在MDN上对该方法的说明是:Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。

它接收三个参数,要操作的对象,要定义或修改的对象属性名,属性描述符。重点就是最后的属性描述符。

属性描述符是一个对象,主要有两种形式:数据描述符和存取描述符。这两种对象只能选择一种使用,不能混合两种描述符的属性同时使用。上面说的get和set就是属于存取描述符对象的属性。

然后我们可以通过在存取描述符中的get和set方法内写入自定义的逻辑来实现对象获取属性和设置属性时的行为。

var keyValue = 1;
var obj = {};
Object.defineProperty(obj,'key', {enumerable: true,configurable: true,get: function(){return keyValue;},set: function(newValue){keyValue = newValue;console.log(`keyValue的值已发生改变,目前的值是:${keyValue}`);}
});obj.key; // 1obj.key = 'obj对象的key属性已经绑定了变量keyValue的值';
// keyValue的值已发生改变,目前的值是:obj对象的key属性已经绑定了变量keyValue的值
// "obj对象的key属性已经绑定了变量keyValue的值"keyValue; // "obj对象的key属性已经绑定了变量keyValue的值"

上面这个例子就是改变了对象获取属性及设置属性的默认行为。

对象obj获取属性key的值时,会触发上面的get方法,得到的是变量keyValue的值,然后当重新设置key的值时,触发set方法,会将变量keyValue的值改变为设置的值,如此就实现了一个简单的双向绑定:改变keyValue,obj.key得到的值也会改变,重新设置obj.key,keyValue一样会随之改变。

当然,vue的双向绑定实际更复杂,但最基本的原理就是基于Object.defineProperty()方法改变数据存取的默认行为来实现的。

转载于:https://www.cnblogs.com/wayowe/p/7779557.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/253518.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

求职网站总结

最近忙着要找份工作。毕业半年多就辞职,也是尴尬。 这里记录一些求职网站和找工作的一些经验。主要参考了三个知乎问题:怎么在互联网上找工作?,招聘网站,哪个靠谱?和哪个求职网站(app&#xff0…

FTP命令解析

FTP命令详解FTP命令是Internet用户使用最频繁的命令之一,不论是在DOS还是UNIX操作系统下使用FTP,都会遇到大量的FTP内部命令。熟悉并灵活应用FTP的内部命令,可以大大方便使用者,并收到事半功倍之效。   FTP的命令行格式为&…

深入Java内存模型

你可以在网上找到一大堆资料让你了解JMM是什么东西,但大多在你看完后仍然会有很多疑问。happen-before是怎么工作的呢?用volatile会导致缓存的丢弃吗?为什么我们从一开始就需要内存模型? 通过这篇文章,读者可以学习到足…

Matlab 使用GPU加速 转载

在matlab中使用GPU加速,来加速矩阵运算。 首先如前面所说,并不是所有GPU都能在maltab中进行加速的,貌似只有NVDIA的显卡可以吧。 硬件:GeForce GTX 980 软件:Matlab 2015a (Matlab 2012以后的版本才带有GP…

数字后端——可制造性设计

随着集成电路制造工艺技术的迅速发展,集成电路集成度迅速攀升,制造流程及工艺步骤日趋复杂,工艺尺寸也在不断缩小。集成电路可制造性设计(Design For Manufacturability,DFM) 以直接提升集成电路芯片的良品率及降低芯片…

Cloudstack安装(二)

Cloudstack安装 官方文档参考: http://docs.cloudstack.apache.org/projects/cloudstack-installation/en/4.9/qig.html#environment Cloudstack主要分Management和Agent两部分。 系统版本:CentOS 6.8 Management: cpu1,ram 2048M…

Pycharm 输出中文或打印中文乱码现象的解决办法

转载地址:https://www.cnblogs.com/Bro-Young/p/5920884.html 1. 确保文件开头加上以下代码: 1 # -*- coding:utf-8 -*- 还可以加上 1 import sys 2 reload(sys) 3 sys.setdefaultencoding(utf-8) 确保以下。 如果还是没有解决中文乱码,那么进…

计算机系统结构——概述

计算机的实现包括两个方面:组成和硬件。组成一词包含了计算机设计的高阶内容,例如存储器系统,存储器互连,设计内部处理器 CPU (中央处理器——算术、逻辑、分支和数据传送功能都在内部实现)。有时也用微体系…

BestCoder Round #91 1001 Lotus and Characters

题目链接:http://acm.hdu.edu.cn/showproblem.php?pid6011 题意: Lotus有nn种字母,给出每种字母的价值以及每种字母的个数限制,她想构造一个任意长度的串。 定义串的价值为:第1位字母的价值*1第2位字母的价值*2第3位字…

Calendar的那些神坑

参考我的博客:http://www.isedwardtang.com/2017/08/31/java-calendar-bug/转载于:https://www.cnblogs.com/EdwardTang/p/7476781.html

mkyaffs2image的用法

在Ubuntu中第一次使用mkyaffs2image命令时,会提示 mkyaffs2image:找不到命令 还需要安装mkyaffs2image http://code.google.com/p/fatplus/downloads/detail?nameyaffs2-source.tar&can2&q 下载yaffs2-source.tar 解压后,进入util…

全景图像拼接——基本流程

图像拼接技术是数字图像处理技术一个重要的研究方向,它即是将两幅或多幅相互有部分重叠的场景照片拼接成具有超宽视角、与原始图像接近且失真小、没有明显缝合线的高分辨率图像。可以很好地解决广角镜、鱼眼镜头等全景图获取设备的不足。如下图: 图像拼接产生的图像不…

SmartRaiden 和 Lighting Network 进行去中心化跨链原子资产交换

SmartRaiden 和 Lighting Network 进行去中心化跨链原子资产交换 前言 如果能够进行以太坊和比特币跨链原子资产交换,是不是一件很酷的事情? 目前链下的扩容方式有很多,最广为人知的就是比特币的闪电网络和以太坊的雷电网络,今天我…

WPF 带CheckBox、图标的TreeView

WPF 带CheckBox、图标的TreeView 在WPF实际项目开发的时候,经常会用到带CheckBox的TreeView,虽然微软在WPF的TreeView中没有提供该功能,但是微软在WPF中提供强大的ItemTemplate模板功能和自定义样式,那我们可以自己写一个这样的控…

win32框架,GDI图形编程写一个HelloWorld游戏_c语言

1.如图,实现功能: Hello World!字符串跟随鼠标移动鼠标左击Hello World!颜色为红色鼠标右击Hello World!颜色为蓝色鼠标滚轮滚动改变Hello World!颜色的RGB中的G值 2.实现工具: vs20133.实现步骤: 新建一个win32项目 如图,看到HelloWorldGame.cpp中 _tWinMain()的函…

全景图像拼接——图像融合

图像融合技术就是将配准过后的图像融合成一幅宽视角、大场景的图像。但由于图像采集过程中各种因素的影响,例如光照、角度、距离等,从而导致图像间的光照不均匀、颜色上不连续。 经过配准以后,参考图像和输入图像已经在同一个坐标系下,如果只是取某一幅图像的信息或者简单地…

极详细的ECC讲解 -OOB与ECC

http://blog.csdn.net/dongzhichen/article/details/8249228 详细的ECC讲解 -OOB与ECC 在网络编程中 OOB(out of band)带外数据 在MTD设备中 OOB 如下所示: http://www.cnblogs.com/bcxx_qin/archive/2009/06/11/1501271.html 极详细的ECC…

前端进阶(8) - 前端开发需要了解的工具集合:webpack, eslint, prettier, ...

前端开发需要了解的工具集合:webpack, eslint, prettier, ... 前端开发需要了解的一些工具,这些工具能够帮助你在项目开发中事半功倍。 1. nrm: npm registry 管理器 registry: npm 远程仓库的地址。 由于众所周知的原因,npm 官方仓库在国内特…

CMOS图像传感器——TOF 图像传感器

一、3D成像技术概述 图像传感器一直以来都是人类研究的热点。但随着当代科学技术发展, 人类对于传统的 2D 图像传感器的要求越来高,不仅期望着更高分辨率,更快速度,更大的动态范围,人类加希望能够获得物体深信息,但是 2D 成 像技术现在已经不能满足人类的需求,所以应运…

AndroidStudio创建jinLibs文件夹

在文件中的buildTypes节点下添加 sourceSets.main { jniLibs.srcDir libs } 如图 转载于:https://www.cnblogs.com/kim-liu/p/7479360.html