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. 描述符只有get和set，无法监听新增属性和删除属性操作。

3. 无法原生监听数组。

参考文献

• 一文彻底搞懂Vue2响应式原理 - 掘金

• 响应式对象 | Vue.js 技术揭秘