ES5 defineProperty 和 ES6 proxy 实现数据劫持

mvvm以数据驱动，其实使用了数据劫持的方式对数据双向更新

先来了解defineProperty对数据劫持

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
<script>

let myobj = {};
 Object.defineProperty(myobj,"name",{
     configurable:true,//configurable 给的说明是 如果为 false , 那么对象属性不可以修改, 不可以删除. true则相反
     /*enumerable可枚举；
     设置为true后可以用这4种方式去操作属性
     1.
     for(let i in myobj){
         console.log(i);
     }
     2.
     Object.keys();
     3.
     JSON.stringify
     4.
     Object.assign
     */
     enumerable:true, 
    get(){//当获取属性的时候会进入get方法，可以对获取的值进行修改操作后返回 （必须返回值）或者获取的就是 undefined
        //value 内置属性 获取对象属性值
        return value;
    },
    set(newValue){//set方法监听设置的值 newValue参数获取要改变的值
    //value 内置属性 可以对对象属性的做更改
    //value="dd";
      value = newValue;
    }
})
myobj.name="呜呜";
console.log(myobj.name);

</script>
</html>

proxy对数据劫持

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
<script>

let myobj = {};
//Proxy必须实例化 返回新的对象
//用起来比较方便 不用每个属性设置劫持
let obj  = new Proxy(myobj,{
    get(target,key){//target 表示当前实例的对象 key 表示获取属性名
     
        console.log("get..")
        return  target[key];
    },
    set(target,key,value){//target 表示当前实例的对象 key 表示获取属性名 value获取当前属性的值
        target[key] = value;
    }
})
obj.name = "李四";
console.log(obj);
</script>
</html>

来源：https://www.cnblogs.com/supermanGuo/p/11430378.html

标签

es5