数据劫持代理

阿超学编程

已于 2024-04-16 16:36:14 修改

阅读量16

点赞数

分类专栏： js vue 文章标签：前端 javascript vue.js

于 2023-01-30 10:17:28 首次发布

本文链接：https://blog.csdn.net/qq_45532769/article/details/128797735

版权

js 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

vue

15 篇文章 0 订阅

订阅专栏

提示：仅供参考

文章目录

一、模拟Vue中data选项

一、模拟Vue中data选项

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>数据劫持代理</title>
</head>
<body>


<script type="text/javascript" src="./index.js"></script>
</body>
</html>

// Vue数据劫持代理

// 模拟Vue中data选项

let data = {
  username: 'curry',
  age: 33
}


// 模拟组件的实例
let _this = {

}

// 利用Object.defineProperty()
for(let item in data){
  // console.log(item, data[item]);
  Object.defineProperty(_this, item, {
    // get：用来获取扩展属性值的， 当获取该属性值的时候调用get方法
    get(){
      console.log('get()');
      return data[item]
    },
    // set： 监视扩展属性的， 只要已修改就调用
    set(newValue){
      console.log('set()', newValue);
      // _this.username = newValue; 千万不要在set方中修改修改当前扩展属性的值，会出现死循环
      data[item] = newValue;
    }
  })
}

console.log(_this);
// 通过Object.defineProperty的get方法添加的扩展属性不能直接对象.属性修改
_this.username = 'wade';
console.log(_this.username);