Vue3.x响应式数据原理

MalegeA

Vue3.x改用Proxy替代Object.defineProperty。因为Proxy可以直接监听对象和数组的变化，并且有多达13种拦截方法。并且作为新标准将受到浏览器厂商重点持续的性能优化。

Proxy只会代理对象的第一层，那么Vue3又是怎样处理这个问题的呢？

判断当前Reflect.get的返回值是否为Object，如果是则再通过reactive方法做代理， 这样就实现了深度观测。

监测数组的时候可能触发多次get/set，那么如何防止触发多次呢？

我们可以判断key是否为当前被代理对象target自身属性，也可以判断旧值与新值是否相等，只有满足以上两个条件之一时，才有可能执行trigger

1. // 模拟 Vue 中的 data 选项
   
2. let data = {
   
3.   msg: 'hello',
   
4.   count: 0
   
5. }
   
6. // 模拟 Vue 实例
   
7. let vm = new Proxy(data, {
   
8.   // 当访问 vm 的成员会执行
   
9.   get (target, key) {
   
10.     console.log('get, key: ', key, target[key])
    
11.     return target[key]
    
12.   },
    
13.   // 当设置 vm 的成员会执行
    
14.   set (target, key, newValue) {
    
15.     console.log('set, key: ', key, newValue)
    
16.     if (target[key] === newValue) {
    
17.       return
    
18.     }
    
19.     target[key] = newValue
    
20.     document.querySelector('#app').textContent = target[key]
    
21.   }
    
22. })
    
23. 
    
24. // 测试
    
25. vm.msg = 'Hello World'
    
26. console.log(vm.msg)

复制代码

Proxy 相比于 defineProperty 的优势

• 数组变化也能监听到
• 不需要深度遍历监听
  

Proxy 是 ES6 中新增的功能，可以用来自定义对象中的操作

1. let p = new Proxy(target, handler);
   
2. // `target` 代表需要添加代理的对象
   
3. // `handler` 用来自定义对象中的操作
   
4. // 可以很方便的使用 Proxy 来实现一个数据绑定和监听
   
5. 
   
6. let onWatch = (obj, setBind, getLogger) => {
   
7.   let handler = {
   
8.     get(target, property, receiver) {
   
9.       getLogger(target, property)
   
10.       return Reflect.get(target, property, receiver);
    
11.     },
    
12.     set(target, property, value, receiver) {
    
13.       setBind(value);
    
14.       return Reflect.set(target, property, value);
    
15.     }
    
16.   };
    
17.   return new Proxy(obj, handler);
    
18. };
    
19. 
    
20. let obj = { a: 1 }
    
21. let value
    
22. let p = onWatch(obj, (v) => {
    
23.   value = v
    
24. }, (target, property) => {
    
25.   console.log(`Get '${property}' = ${target[property]}`);
    
26. })
    
27. p.a = 2 // bind `value` to `2`
    
28. p.a // -> Get 'a' = 2

复制代码