首页 > 代码库 > 从Object.definedProperty中看双向数据的绑定

从Object.definedProperty中看双向数据的绑定

2024-09-24 07:55:32   214人阅读

前言

Object.defineProperty是ES5中的方法，vue.js正式利用这种方法实现数据的双向绑定,以达到响应式的目的。

1、语法

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

2、栗子

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

3、参数详解

　　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()

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.5、双向数据绑定

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

一个栗子看看vue是如何实现双向数据绑定的？

<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=http://www.mamicode.com/output[‘b‘];>

　　

技术分享

 

 

 

从Object.definedProperty中看双向数据的绑定


联系
我们