前言

Object.defineProperty是ES5中的方法,它可以直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。vue.js正式利用这种方法实现数据的双向绑定,以达到响应式的目的。

1、语法

Object.defineProperty(object, propertyname, descriptor)  //参数(3个且必须)

2、参数详解

  3.1、object:要在其上添加或修改属性的对象。
  3.2、propertyname:一个包含属性名称的字符串。就是需要定义的属性和方法。
  3.3、descriptor:可以包含以下属性,默认情况下, writable, enumerable,configurable值为false

  value:属性的值

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

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

  configurable:如果为false,就不能再设置他的(value,writable,configurable)。

 还有两个方法 (双向数据绑定正是利用了这两个方法,即访问器 )get() 和 set()

3、看看栗子

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

就是给a对象添加b属性,并返回a对象;

再比如:把描述设置为不可写; 

4、访问器 set和get

set();一旦属性被重新赋值,此方法被自动调用。
get();一旦属性被访问读取,此方法被自动调用。
不能同时设置访问器 (get 和 set) 和 wriable 或 value,否则会错。

var a= {}
Object.defineProperty(a,"b",{
set:function(val){
console.log("赋值时候调用我,我的新值是"+ val)
},
get:function(){
console.log("取值的时候调用我")
return 123
}
})
a.b =520 // 赋值时候调用我,我的新值是520
console.log(a.b) // 取值的时候调用我, 返回我设置123,不是开始设置的520 

5、简单双向数据绑定

给对象a定义新的属性b,并且定义属性b的get和set方法,当a.b的时候会调用b属性的get方法,给b属性赋值的时候,会调用set方法,这就是修改数据的时候,视图会自动更新的关键.(只能兼容IE8以上的浏览器,vue也是如此!)。

理解JavaScript中的双向数据绑定

<label>输入:</label><input type="text" id="demo1"><br/>
<label>输出:</label> <input type="textarea" id="demo2"></input> <script>
var a={};
var output=[];
Object.defineProperty(a,'b',{ //给a对象添加b属性
set:function(val){
output['b']=val;
},
get:function(){
return output['b'];
}
})
var demo1=document.querySelector('#demo1');
var demo2=document.querySelector('#demo2');
demo1.onkeyup=function(){
a.b=demo1.value;//给a对象添加b属性时候,触发了a的set方法,此时#demo1的value值赋值给output['b']。
demo2.value=output['b'];
} </script>

  

6、再看看Object.defineProperty实践例子

直接在原型上添加一个不可遍历的方法extend(),该方法可以把新对象赋值给旧对象;

Object.defineProperty(Object.prototype, 'extend',{
value : function(def, opt) {
for(var key in opt){
def[key] = opt[key];
}
return def;
},
writable: true,
enumerable : false
}); function func(options){
let def = {
payType: 'wechat',
buyType: -1,
isCard: false,
toUid: -1,
couponId: -1
}; let opt = extend(def, options); this.isCardPay = opt.isCard;
this.payType = opt.payType;
.......
} //使用
fuc({
payType: 'ali',
buyType: 2,
isCard: true,
toUid: 123456,
couponId: 667890
})

  

 7、vue怎么实现数据双向绑定?

vue.js 则是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的settergetter,在数据变动时发布消息给订阅者,触发相应的监听回调。

这里写的很详细。

从Object.definedProperty中看vue的双向数据的绑定的更多相关文章

  1. Vue之九数据劫持实现MVVM的数据双向绑定

    vue是通过数据劫持的方式来做数据绑定的,其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持,达到监听数据变动的目的. 如果不熟悉defineProperty,猛 ...

  2. Vue实现双向绑定的原理以及响应式数据

    一.vue中的响应式属性 Vue中的数据实现响应式绑定 1.对象实现响应式: 是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集 ...

  3. vue中v-model 数据双向绑定

    表单输入绑定 v-model 数据双向绑定,只能应用在input /textare /select <div id="app"> <input type=&quo ...

  4. Vue.js双向绑定的实现原理

    Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少 ...

  5. Vue.js双向绑定的实现原理和模板引擎实现原理(##########################################)

    Vue.js双向绑定的实现原理 解析 神奇的 Object.defineProperty 这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.obser ...

  6. vue的双向绑定原理及实现

    前言 使用vue也好有一段时间了,虽然对其双向绑定原理也有了解个大概,但也没好好探究下其原理实现,所以这次特意花了几晚时间查阅资料和阅读相关源码,自己也实现一个简单版vue的双向绑定版本,先上个成果图 ...

  7. vue实现双向数据绑定的原理

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

  8. 转 vue实现双向数据绑定之原理及实现篇

    转自:https://www.cnblogs.com/canfoo/p/6891868.html vue的双向绑定原理及实现 前言 先上个成果图来吸引各位: 代码:                  ...

  9. 浅谈Vue之双向绑定

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

随机推荐

  1. 快速获取表单多条数据,使用ajax传递给后台

    当表单中有多条数据需要向后台传递时,一个一个的获取显然是不可取的办法,可以借助表单的serialize()方法获取. HTML: <form id="form"> &l ...

  2. JavaScript正则表达式学习笔记(二) - 打怪升级

    本文接上篇,基础部分相对薄弱的同学请移步<JavaScript正则表达式学习笔记(一) - 理论基础>.上文介绍了8种JavaScript正则表达式的属性,本文还会追加介绍几种JavaSc ...

  3. JsonCPP库使用

    1.使用环境DevC++ a.建立C++工程,并添加.\JsonCPP\jsoncpp-master\jsoncpp-master\src\lib_json中源文件到工程中. b.添加头文件路径 2. ...

  4. ribbon 详解

    ribbon 详解 1. 顶层架构 2. 简单的示例:使用ResourceTemplate方式 @Test public void testGroup(){ HttpResourceGroup htt ...

  5. Django实现发邮件

    1 首先去自己的邮箱申请,在设置里面找,申请开通smtp服务,我用的是163邮箱 2 在项目下settings.py中添加设置: # 配置邮箱发邮件的相关功能 #这一项是固定的 EMAIL_BACKE ...

  6. DMO节点内部插入的常用方法与区别

    1.DOM内部插入append()与appendTo() 动态创建的元素是不够的,它只是临时存放在内存中,最终我们需要放到页面文档并呈现出来.那么问题来了,怎么放到文档上? 这里就涉及到一个位置关系, ...

  7. JavaScript(js)/上

    JavaScript(js) ECMA-----定义的基础语法 DOM------document  object  model BOM------Browser  object  model Jav ...

  8. 云计算 IaaS,SaaS,PaaS的区别?一个通俗易懂的吃货文章

    来自一篇吃货文章了: ———————————————————— &lt;img src="https://pic2.zhimg.com/a55676f8e1b084a398f8cd5 ...

  9. 如何在node和vue前后端分离的项目中使用极客验证,用node的方式

    1.用express的脚手架和vue-cli的脚手架搭建的项目目录如下图 2.在vue-client的src/component新建一个login.vue文件,作为登录页面,代码如下 <temp ...

  10. CSS 选择器简介

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 选择器权重 如果以4位数表示选择符权重,那么: 元素选择器的权重是1: id 选择器的权重为100: cl ...