vue.js利用的是es5的 defineproperty 特性实现的双向数据绑定,了解一下基本原理。

举例

var person= {};
Object.defineProperty(person, "name", {
value: '张三'
})
console.log(person.name); // 张三

传参

  • 第一个参数:要设置的目标对象(必填)

  • 第二个参数:需要定义的属性或方法的名称(必填)

  • 第三个参数:目标属性所拥有的特性。(descriptor)(必填)

三个参数都是必填项,重点介绍第三个参数 descriptor

descriptor

  • value:属性的值

  • writable:如果为false,属性的值就不能被重写, 只能为只读了

  • configurable:总开关,一旦为false,就不能再设置他的(value,writable,configurable)

  • enumerable:是否可枚举(是否能在for...in循环中遍历出来或在Object.keys中列举出来)

  • get:一会细说

  • set:一会细说

descriptor 默认值

回头看第一个例子

var person= {};
Object.defineProperty(person, "name", {
value: '张三'
})
console.log(person.name); // 张三

我们只设置了 value,别的并没有设置

但是第一次的时候 可以简单的理解为(暂时这样理解)它会默认帮我们把writable,configurable,enumerable都设上值,而且值还都是false。

也就是说,上面代码和下面是等价的的(仅限于第一次设置的时候)。

var person = {};
Object.defineProperty(person ,"name",{
value: '张三',
writable :false,
enumerable: false,
configurable: false
});
console.log(person.name); // 张三

configurable

总开关,第一次设置 false 之后,,第二次什么设置也不行了,比如说

var person = {};
Object.defineProperty(person,"name",{
configurable: false
});
Object.defineProperty(person,"name",{
configurable: true
});
//error: Uncaught TypeError: Cannot redefine property: name

就会报错了。。

注意上面讲的默认值。。。如果第一次不设置它会怎样。。会帮你设置为false。。所以。。第二次。再设置他会怎样?。。对喽,,会报错

writable

如果设置为fasle,就变成只读了。。

var person = {};
Object.defineProperty(person, "name", {
  value : '张三',
  writable : false
  }
);
console.log(person.name); // 打印 张三
person.name = '李四'; // 没有错误抛出(在严格模式下会抛出,即使之前已经有相同的值)
console.log(person.name); // 打印 张三, 赋值不起作用。

enumerable

属性特性 enumerable 定义了对象的属性是否可以在 for...in 循环和 Object.keys() 中被枚举。

var person = {};
Object.defineProperty(person, "name", {
  value : '张三',
  enumerable: true
  }
);
console.log(Object.keys(person)); // 打印 ["name"]
如果将enumerable改为false, for...in 类似
var person = {};
Object.defineProperty(person, "name", {
  value : '张三',
  enumerable: false
  }
);
console.log(Object.keys(person)); // 打印 []

set 和 get

在 descriptor 中不能同时设置访问器(get 和 set)和 wriable 或 value,否则会错,就是说想用 get 和 set,就不能用 writable 或 value 中的任何一个。

var person= {};
var temp = [];
Object.defineProperty(person, 'name', {
set: function(newVal) {
temp['name'] = newVal;
console.log('为person设置新的姓名:' + newVal);
},
get: function() {
var _name = temp['name'] || '默认姓名';
console.log('获取person的姓名:' + _name);
return _name;
}
});
person.name = '张三'; // 打印 获取person的姓名:张三
console.log(person.name) // 打印 获取person的姓名:张三(如果不设置name,这里会打印'默认姓名')

简单来说,这个 “name” 赋值或者取值的时候会分别触发 set 和 get 对应的函数。

作者:杨川宝

原文链接:解析神奇的 Object.defineProperty

进一步学习:vue 源码分析之如何实现 observer 和 watcher

双向数据绑定实现之Object.defineProperty的更多相关文章

  1. vue双向数据绑定的原理-object.defineProperty() 用法

    有关双向数据绑定的原理 关于数据双向绑定的理解:利用了 Object.defineProperty() 这个方法重新给对象定义了新属性,在操作新属性分别为为获取属性值(调用get方法)和设置属性值(调 ...

  2. vuejs的双向数据绑定实现原理——object.defineproperty()

    视图和数据变化绑定 而vue.js主要利用了accessor descriptors的set和get来更新视图,这里看到的这个例子挺好,是一个简单的绑定.对于一个html页面 <div> ...

  3. MVVM双向绑定实现之Object.defineProperty

    随着web应用的发展,直接操作dom的应用已渐行渐远,取而代之的是时下越来越流行的MVVM框架,dom操作几乎绝迹,这里面自然是框架底层封装的结果.MVVM框架的双向数据绑定使开发效率大大提高:然后在 ...

  4. 【Vue】-- 数据双向绑定的原理 --Object.defineProperty()

    Object.defineProperty()方法被许多现代前端框架(如Vue.js,React.js)用于数据双向绑定的实现,当我们在框架Model层设置data时,框架将会通过Object.def ...

  5. 双向绑定Proxy VS Object.defineProperty

    Vue3.0的双向绑定将使用Proxy代替Object.defineProperty,据尤大说,速度提升了1倍. 本文我们来探讨一下Proxy对比Object.defineProperty究竟有哪些优 ...

  6. vue 数据绑定实现的核心 Object.defineProperty()

    vue深入响应式原理 现在是时候深入一下了!Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是普通的 JavaScript 对象.而当你修改它们时,视图会进行更新.这使得状态管理非常简 ...

  7. JavaScript实现简单的双向数据绑定

    什么是双向数据绑定 双向数据绑定简单来说就是UI视图(View)与数据(Model)相互绑定在一起,当数据改变之后相应的UI视图也同步改变.反之,当UI视图改变之后相应的数据也同步改变. 双向数据绑定 ...

  8. 16、前端知识点--Object.defineProperty 的用法+双向数据绑定原理解析

    一.Object.defineProperty 的用法 Object.defineProperty 可以用于给对象添加更新属性. <script> // Object.defineProp ...

  9. vue实现双向数据绑定之Object.defineProperty()篇

    前言 vue.js中使用ES5的Object.defineProperty()实现数据的双向绑定 Object.defineProperty()原理 Object.defineProperty()可以 ...

随机推荐

  1. 【树莓派 Raspberry-Pi 】系统安装及一些必要的配置

    上周六刚收到我的小电脑,被无线设置卡住了,文章并非原创,参考了几个朋友的折腾经历,自己整理下备忘,也希望能帮到和我一样在树莓派方面小白的人,也希望可以和更多有这方面兴趣的朋友共同交流 0. 操作系统下 ...

  2. C语言 内存分配 地址 指针 数组 参数 实例解析

    . Android源码看的鸭梨大啊, 补一下C语言基础 ... . 作者 : 万境绝尘 转载请注明出处 : http://blog.csdn.net/shulianghan/article/detai ...

  3. Huffuman树

    问题描述 Huffman树在编码中有着广泛的应用.在这里,我们只关心Huffman树的构造过程. 给出一列数{pi}={p0, p1, …, pn-1},用这列数构造Huffman树的过程如下: 1. ...

  4. C++并行编程2

    启动线程 查看线程构造函数,接受一个返回值为void的函数.如下: void do_some_work(); std::thread my_thread(do_some_work); 也可以接受一个重 ...

  5. 这些JavaScript编程黑科技,装逼指南,高逼格代码,让你惊叹不已

    Javascript是一门很吊的语言,我可能学了假的JavaScript,哈哈,大家还有什么推荐的,补充送那啥邀请码. 本文秉承着:你看不懂是你SB,我写的代码就要牛逼. 1.单行写一个评级组件 &q ...

  6. 浅述Try {} Catch{} 作用

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Test ...

  7. lucene 学习之编码篇

    本文环境:lucene5.2     JDK1.7   IKAnalyzer 引入lucene相关包 <!-- lucene核心包 --> <dependency> <g ...

  8. Hibernate使用详解(一)

    一.前言 这些天都在为公司框架重构做准备,浏览了一下代码,挑了几个不熟或者没接触过的知识点进行攻坚,hibernate是其中之一.其实接触hibernate是在大学期间,应该是在2012年,已经201 ...

  9. [剑指Offer] 46.孩子们的游戏

    题目描述 每年六一儿童节,牛客都会准备一些小礼物去看望孤儿院的小朋友,今年亦是如此.HF作为牛客的资深元老,自然也准备了一些小游戏.其中,有个游戏是这样的:首先,让小朋友们围成一个大圈.然后,他随机指 ...

  10. 【Python】python学习之总结

    迭代器: def gen(): a = yield a a = a * yield a for i in gen(): print(i) 创建一个函数,循环体,yield循环到此就返回一个值.调用函数 ...