Object.defineProperty

清疚 2022-05-21 13:21 128阅读 0赞

### Vue中响应式的原理： ###

把一个普通的JavaScript对象传给Vue实例的data选项  
Vue将遍历此对象所有的属性，并使用Object.defineProperty把这些属性全部转为getter/setter,Vue内部会对数据进行劫持，操作，进而追踪依赖，在属性被访问和修改时通知变化

### Object.defineProperty： ###

作用：直接在一个对象上定义新属性，或者修改一个对象的现有属性

语法：Object.defineProperty(obj,prop,descriptor)

参数：

*  obj要在其定义的属性的对象
 *  prop要定义或修改的属性的名称
 *  descriptor将被定义或修改的属性描述符（是个对象）

数据描述：

*  configurable 是否可以删除目标属性，默认为false（删除对象的属性：delete data.title）
 *  enumerable:此属性是否可以被枚举，默认为false
 *  value：该属性对应的值，默认为undefined
 *  writable：属性的值是否可以被重写。默认为false

Object.defineProperty(data,"miaov",{
      value:'ketang',//描述value值
      writable:false,//不允许重新改写,如果设置为true，是可以被改写的
      enumerable:false,//是否可被枚举
      configurable,true//是否可删除，如果设置为false，是不可以被删除的
    })

访问器描述：

*  getter是一种获得属性值的方法
 *  setter是一种设置属性值的方法
 *  可以写configurable、enumerable,不能写value、writable

使用数据的时候先对数据进行劫持（代理）：  
使用Object.defineProperty劫持数据，把属性转成访问器的方式

*  getter:获取属性触发的
 *  setter：设置属性触发的

看下面的小例子，使用的访问器的写法

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
    
        </style>
    </head>
    <body>
    <div id="wrap">
       <button>改变数据</button>
        <div></div>
    </div>
    <script src="price.js"></script>
    <script>
    var oWrap = document.querySelector('#wrap');
    var oBtn = oWrap.querySelector('button');
    var oDiv = oWrap.querySelector('div');
    var data = {
        title:"新闻"
    }
    ovserver(data);
    //数据劫持，转成getter和setter
    function ovserver(obj){
        Object.keys(obj).forEach((item)=>{
            defineReactive(obj,item,obj[item]);
        })
    }
    
    
    function defineReactive(obj,key,value){
        Object.defineProperty(obj,key,{
            get(){
                return value;
            },
            set(newValue){
                value = newValue;
                oDiv.innerHTML = newValue;
            }
        })
    }
    
    oDiv.innerHTML = data.title;
    oBtn.onclick = function(){
      data.title = "新的值"
    }
    
    </script>
    </body>
    </html>

Object.defineProperty

发表评论取消回复

还没有评论，来说两句吧...

相关阅读