VUE3.X——响应数据原理_vue3.x 响应式数据原理是什么?

VUE2.X双向绑定是通过数据劫持结合发布-订阅者模式实现的，核心是通过 Object.defineProperty() 劫持各个属性值的 getter 和 setter，在数据变动时发布消息给订阅者，从而触发相应的监听回调，而VUE3.X则是通过ES6的 Proxy 对象实现的。

1. 什么是 Proxy

   Proxy 意为代理，它是 js 的内置对象，用于拦截和更改对象相关的不同操作行为，不支持 IE 和 Safari <10 的版本。

   let obj = {name: 'zs', age: 18};
   // Proxy 接收两个参数，target 和 handler
   // target: 需要代理的目标对象
   // handler: 行为对象，属性是当执行一个操作时定义代理的行为函数
   let state = new Proxy(obj, {
       get(obj, key) { ... },
       set(obj, key, newVal) { ... }
   })
   1
   2
   3
   4
   5
   6
   7
   8

2. Proxy 与 getter/setter 的区别

   • 语法不同

     相比 getter/setter ，Proxy 的语法会更为冗长。

   • 与原始对象的交互方式不同

     Proxy 会创建一个新对象供用户与之交互，而不是直接修改原对象，在使用 Proxy 的情况下，原始对象与代理对象为引用关系，即对原始对象做的修改都会影响到代理对象，但是不会触发 handler 里的行为函数。

     （更多行为函数可查阅：Proxy行为函数）

     getter/setter 会直接修改原对象。

3. Proxy 实现数据响应

   • get 有两个参数，分别是原始对象 target 和获取的对象属性名 key，例：

     let obj = {name: 'zs', age: 18};
     let state = new Proxy(obj, {
         get(obj, key) {
             console.log(obj, key); // {name: 'zs', age: 18} 'name'
             return obj[key];
         }
     })
     
     console.log(state.name); //'zs'
     1
     2
     3
     4
     5
     6
     7
     8
     9

   • set 有三个参数，分别是原始对象 target 、设置的对象属性名 key 和设置的新值 value ，值得注意的是， set 函数最后需要返回值，用来告知 Proxy 本次操作是否成功 ，例：

     let arr = [1, 3, 5];
     let state = new Proxy(arr, {
         get(arr, index) {
             return arr[index];
         },
         set(arr, index, value) {
             // [1, 3, 5] '3' 7
             // [1, 3, 5] 'length' 4
             console.log(arr, index, value);
             arr[index] = value;
             return true;
         }
     })
     
     state.push(7);
     console.log(state); // Proxy {0: 1, 1: 3, 2: 5, 3: 7}
     console.log(obj); // [1, 3, 5, 7]
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14
     15
     16
     17

   目录：VUE3.X笔记——目录
   上一篇：VUE3.X——递归监听与非递归监听
   下一篇：VUE3.X——获取dom元素