模拟Vue数据监测

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>模拟Vue数据监测</title>
  </head>
  <body></body>
  <script>
    let data = {
      deptName: '研发二部',
      numbers: 17,
      deptAge: 16,
    };
    let vm = new Observer(data);
    /**
     * Observer是一个构造函数,生成一个监听实例对象
     * @param obj
     * @constructor
     */
    function Observer(obj) {
      //拿到对象的所有属性key([])
      let keys = Object.keys(obj);
      //  遍历key,分别使用Object.defineProperty给当前监视对象添加属性,使得当前监视对象成为data的数据代理
      keys.forEach(k => {
        Object.defineProperty(this, k, {
          get() {
            return obj[k];
          },
          set(val) {
            obj[k] = val;
            //vue更改数据之后,再去更新视图(根据数据生成虚拟dom,使用diff算法,生成新的dom....)
            console.log(`${k}属性被改变了!!!`);
          },
        });
      });
    }

    /**
     * 注意:这里做的只是最简单的模拟,只是对数据的浅层模拟,Vue则是对data中的数据的所有层级都进行了监听
     */
  </script>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值