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. GIF图保存下来不会动?用Folx的浏览器捕获下载功能试试!

    表情包大多是GIF格式的动图,有时候使用浏览器的另存为保存完发现并不能动态播放,怎么办呢?试试Folx提供的浏览器捕获下载功能,就能将各种格式的图片,包括GIF动图的下载链接捕获下来,供进一步下载使用 ...

  2. Jenkins中如何自定义构造结果

    jenkis中的触发邮件机制是根据构建成功与否来发邮件,实际上我们在jenkis上定时执行脚本时是需要根据用例的执行结果来触发邮件预警 本文讲叙如何根据用例的执行结果来触发邮件预警 1.在任务配置的b ...

  3. zabbix agent 编译安装

    zabbix 安装包下载地址 https://www.zabbix.com/download 解压好之后进入zabbix目录 执行编译安装 ./configure --prefix=/usr/loca ...

  4. php 缩略图封装的方法

    /** * PHP生成缩略图 * @param $basepath /原文件地址 * @param $des_w /缩略图的宽 * @param $des_h /缩略图的高 * @param $sty ...

  5. Redis 基础设计结构之三 hash(哈希)

    Redis 有 5 种基础数据结构,分别为:string (字符串).list (列表).set (集合).hash (哈希) 和 zset (有序集合). 今天来说一下hash(哈希),hash的数 ...

  6. Java-Netty前菜-NIO

    NIO NIO主要有三个核心部分组成: buffer缓冲区 Channel管道 Selector选择器 在NIO中并不是以流的方式来处理数据的,而是以buffer缓冲区和Channel管道配合使用来处 ...

  7. Spring beanDefinition载入

    @Override public void refresh() throws BeansException, IllegalStateException { synchronized (this.st ...

  8. 一枚程序猿的MacBook M1详细体验报告

    前言 2020年11月11日双十一上午,苹果发布了M1芯片的新款Mac,其最大的变化就是将处理器从Intel换成了苹果自研的ARM芯片M1. 上一次苹果更换Mac芯片要追溯到2006年,14年前,苹果 ...

  9. 2014.04.28基于CPLD的LCOS场序彩色视频控制器设计

    基于CPLD的LCOS场序彩色视频控制器设计 作者:宋丹娜,代永平,刘艳艳,商广辉 发表刊物:液晶与显示,2009 学习时间:2014.04.28 文章讲述了-- (和上一篇论文有些相似之处) 1. ...

  10. Vmware无法生成本地连接

    打开Vmware使用乌班图 结果发现没有办法连接本地连接,那就是注册表出现了问题 今天推荐一个好软件 然后使用进行清理缓存,重新注册表 然后直接点击虚拟机里面的编辑->虚拟网络编辑器->把 ...