vue2.0通过defineProperty进行数据双向绑定

例如:(他接受三个参数,都是必填!)

 var a= {}
Object.defineProperty(a,"b",{
value:123
})
console.log(a.b);//123

传入参数

第一个参数:目标对象

第二个参数:需要定义的属性或方法的名字。

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

前两个参数不多说了,一看代码就懂,主要看第三个参数descriptor,看看有哪些取值

descriptor的取值:

//橙色为数据属性

value:属性的值(不用多说了)

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

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

enumerable:是否能在for...in循环中遍历出来或在Object.keys中列举出来。

//蓝色为访问器属性

get:一会细说

set:一会细说

descriptor默认值

我们再看看第一个例子

   var a= {}
Object.defineProperty(a,"b",{
value:123
})
console.log(a.b);//123

我们只设置了 value,别的并没有设置,但是 第一次的时候可以简单的理解为(暂时这样理解)它会默认帮我们把writable,configurable,enumerable。都设上值,而且值还都是false。。也就是说,上面代码和下面是等价的的( 仅限于第一次设置的时候)

var a= {}
Object.defineProperty(a,"b",{
value:123,
writable:false,
enumerable:false,
configurable:false
})
console.log(a.b);//123

以上非常重要哦。。并且以上理解对set 和 get 不起作用哦

configurable

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

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

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

writable

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

var a = {}; 

Object.defineProperty(o, "b", {
value : 123,
writable : false }); console.log(a.b); // 打印 37
a.b = 25; // 没有错误抛出(在严格模式下会抛出,即使之前已经有相同的值)
console.log(o.a); // 打印 37, 赋值不起作用。

enumerable

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

var a= {}
Object.defineProperty(a,"b",{
value:3445,
enumerable:true
})
console.log(Object.keys(a));// 打印["b"]

改为false

var a= {}
Object.defineProperty(a,"b",{
value:3445,
enumerable:false //注意咯这里改了
})
console.log(Object.keys(a));// 打印[]

for...in 类似,,不赘述了

set 和 get

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

Object.defineProperty(a,"b",{
set:function(newValue){
console.log("你要赋值给我,我的新值是"+newValue)
},
get:function(){
console.log("你取我的值")
return 2 //注意这里,我硬编码返回2
}
})
a.b =1 //打印 你要赋值给我,我的新值是1
console.log(a.b) //打印 你取我的值
//打印 2 注意这里,和我的硬编码相同的
https://zhuanlan.zhihu.com/p/29066270原文

vue原理之-神奇的Object.defineProperty的更多相关文章

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

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

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

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

  3. 解析神奇的 Object.defineProperty

    这个方法了不起啊..vue.js是通过它实现双向绑定的..而且Object.observe也被草案发起人撤回了..所以defineProperty更有必要了解一下了. 几行代码看他怎么用 var a= ...

  4. 解析 神奇的 Object.defineProperty

    这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.observe也被草案发起人撤回了..所以defineProperty更有必要了解一下了几行代码看他 ...

  5. 神奇的Object.defineProperty

    vue.js和avalon.js 都是通过它实现双向绑定的. 对象是由多个名/值对组成的无序的集合.对象中每个属性对应任意类型的值.定义对象可以使用构造函数或字面量的形式: var obj={}; o ...

  6. 神奇的 Object.defineProperty 解释说明

    原文 : https://segmentfault.com/a/1190000004346467?utm_source=tuicool&utm_medium=referral 这个方法了不起啊 ...

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

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

  8. Vue.js 源码学习笔记 -- 分析前准备2 -- Object.defineProperty

    解析神奇的 Object.defineProperty   几行代码看他怎么用   var a= {} Object.defineProperty( a, "b", { value ...

  9. vue原理探索--响应式系统

    Vue.js 是一款 MVVM 框架,数据模型仅仅是普通的 JavaScript 对象,但是对这些对象进行操作时,却能影响对应视图,它的核心实现就是「响应式系统」. 首先看一下 Object.defi ...

随机推荐

  1. nginx学习sub_filter模块

    用户替换html中的字符 location / { root /opt/app/code/; random_index on; index index.html index.htm; sub_filt ...

  2. synchronized关键字的内存语义

    以下内容摘自:Java并发编程之美 加锁和释放锁的语义:当获取锁以后会清空锁块内本地内存中将会被用到的共享变量,在使用这些共享变量的时从主内存进行加载,在释放锁时将本地内存中修改的 共享变量刷新到主内 ...

  3. jmeter接口测试多数据组合登陆场景

    一.安装好Java运行环境 百度下载JDK并且配置JAVA环境的教程一搜一大把,这里我就不详说了 二.运行JMETER 打开安装目录的bin文件中的jmeter.bat文件 三.添加程序 1.添加线程 ...

  4. 【震惊】手把手教你用python做绘图工具(一)

    在这篇博客里将为你介绍如何通过numpy和cv2进行结和去创建画布,包括空白画布.白色画布和彩色画布.创建画布是制作绘图工具的前提,有了画布我们就可以在画布上尽情的挥洒自己的艺术细胞. 还在为如何去绘 ...

  5. Pyetst的四种setup和testdown

    1 1.setup_module和 teardown_module #在整个测试用例所在的文件中所有的方法运行前和运行后运行,只会运行一次 2.setup_class和 teardown_class ...

  6. 锐安信sslTrus与GeoTrust SSL证书的对比

    当您想要为您的网站购买一款SSL证书时,是不是既想要价格便宜,又想要安全性能服务好的证书,最后又在品牌上犹豫不决?如何选择SSL证书?哪款SSL证书是最适合您的?本文将详细对比分析锐成信息平台上畅销品 ...

  7. ResHacker 用命令行方式修改 windows PE文件版本号

    由于工作需要在詹金斯(genkins)集成环境打包,打包避免不了需要修改版本号,写入版本号最简单的方式通过修改windows rc文件 这就意味着,每次构建新版本前需要修改一次源文件 这个在用詹金斯集 ...

  8. CenOS下监控工具尝试

    Cacti cacti重图形,有数据历史,需要用到数据库支持,支持web配置,默认不支持告警,可以加插件. Server端配置 安装epel yum install -y epel-release 安 ...

  9. CentOS下关于集群同步/LB/HA 的尝试

    Zookepper 集群同步 下载解压 wget http://apache.fayea.com/zookeeper/stable/zookeeper-3.4.8.tar.gz tar xvf zoo ...

  10. 学习工具--Git

    前言 主要内容来源于廖雪峰网站,内容通俗易懂,有些地方用了Gif来演示,实用性超强.至于git的强大,就不强调很多了,熟练掌握它最好的还是在实际工程中,先做一个简单的总结吧. git简介 Git是目前 ...