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

vue双向数据绑定的原理相关推荐

“别具一格”的vue双向数据绑定原理
背景和一点点看法见网上许多文章讲vue双向数据绑定一开口就大谈 Object.defineProperty 和 proxy.其实不然.这是vue中响应式的"基石". vue 中有 ...
vue双向数据绑定原理分析--Mr.Ember
vue双向数据绑定原理分析摘要 vue常用,但原理常常不理解,下面我们来具体分析下vue的双向数据绑定原理. (1)创建一个vue对象,实现一个数据监听器observer,对所有数据对象属性进行监听 ...
vue的双向数据绑定的原理
VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的. 代码演示:defineProp ...
vue双向数据绑定原理 1
1. 原理 1.1 vue双向数据绑定原理,又称vue响应式原理,是vue的核心,双向数据绑定是通过数据劫持结合发布订阅模式的方式来实现的,也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化 ...
Vue 双向数据绑定原理
原理 1.vue双向数据绑定原理,又称vue响应式原理,是vue的核心,双向数据绑定是通过数据劫持结合发布者订阅者模式的方式来实现的,通过Object.defineProperty()来劫持各个属性的 ...
理解VUE双向数据绑定原理和实现
一.原理: 1.vue 双向数据绑定是通过数据劫持结合发布订阅模式的方式来实现的, 也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变: 2.核心:关于VUE双向数 ...
分析Vue双向数据绑定原理以及简单实现MVVM
前言随着Vue的火热发展,越来越多的程序员并不满足于对框架的使用,更多地追求其内在的原理,就像不能沉沦于美丽的外表,更应该追求灵魂的高度. 正文好了,废话不多说,接下来我们将通过俩方面开展我们对外 ...
vue 双向数据绑定的实现学习（一）
前言:本系列学习笔记从以下几个点展开什么是双向数据绑定双向数据绑定的好处怎么实现双向数据绑定实现双向数据数据绑定需要哪些知识点数据劫持发布订阅模式先看看我们要实现的目标是什么,如下动图: ...
JS双向数据绑定的原理介绍
1.双向数据绑定的原理:属性拦截 2.属性拦截实现方式 : 使用Object.defineProperty()将对象的属性变成访问器属性. 3.如果对访问器属性不是很了解的小伙伴可以看一下这一篇文章哈 ...

vue双向数据绑定的原理

有关双向数据绑定的原理

vue双向数据绑定的原理相关推荐

最新文章

热门文章