vue2 响应性原理

使用defineProperty实现的响应式

// html
  <p id="name"></p>
class Observer {
    observe(obj) {
        // TODO 创建响应性
    }
    
}

const observer = new Observer()

const user = {
  name: '张三',
   showUser:() => {
      document.querySelector('#name').textContent = user.name;
    }
};

observer.observe(user); // 观察

user.showUser();
// 从此以后改变 user.name ,页面也会改变

user.name='lisi';

答案

https://codepen.io/qchtspzb-the-solid/pen/RwdWPYd?editors=1111

defineProperty的响应式的缺点

  1. 深度监听,需要一次性递归到底,计算量比较大。

  2. 描述符只有getset,无法监听新增属性和删除属性操作。

  3. 无法原生监听数组。

参考文献

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值