Vue3.0学习 - 第十二节，vue3.x响应式数据的本质，Proxy，手写shallowReactive

逃离我推掉我的手 2023-01-18 06:51 31阅读 0赞

### 1.vue3响应式数据的本质 ###

*  在Vue2.x中是通过defineProperty来实现响应式数据的
 *  在Vue3.x中是通过Proxy来实现响应式数据的

创建 proxy代码：对象形式

let obj = { name: "张三", age: 18 };
    let state = new Proxy(obj, {
      get(obj, key) {
        console.log("get()", obj, key);
        return obj[key];
      },
      set(obj, key, value) {
        console.log("set()", obj, key, value); //6644 {name: "张三", age: 18} name 我是你爸爸
        obj[key] = value;
        return true;
      },
    });
    
    console.log(state.name);
    state.name = "我是你爸爸";
    console.log("state", state);

页面输出：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70][]

我们可以看出输出 state.name 会调用get()方法，

设置state.name = "123"  会调用set() 方法

Proxy除了可以监听对象外同样可以监听数组

let obj = [1,3,5]
    let state = new Proxy(obj, {
      get(obj, key) {
        console.log("7788", obj, key);
        return obj[key];
      },
      set(obj, key, value) {
        console.log("6644", obj, key, value); //6644 {name: "张三", age: 18} name 我是你爸爸
        obj[key] = value;
        // return true;
      },
    });
    
    console.log("0001111",state[1]);
    state.push(7)

页面输出：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 1][]

我们会发现运行输出会报错，原因是因为没有告诉set方法此次操作是否成功，所以不会进行下一次操作

我们在set中 添加 return true

然后代码输出：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 2][]

## Proxy注意：set方法必须通过返回值告诉Proxy此次操作是否成功 ##

--------------------

## 手写 shallowReactive ##

function shallowReactive(obj) {
      return new Proxy(obj, {
        get(obj, key) {
          return obj[key];
        },
        set(obj, key, value) {
          obj[key] = value;
          console.log("更新ui界面");
          return true;
        },
      });
    }
    
    let obj = {
      a: "a",
      gf: {
        b: "b",
        f: {
          c: "c",
          s: {
            d: "d",
          },
        },
      },
    };
    let shaloww = shallowReactive(obj)
    // shaloww.a = "111111"
    shaloww.gf.b = "222222"
    shaloww.gf.f.c = "3333333"

![20210502003318648.png][]

我们可以看到页面什么也没有输出，我们把 注释取消掉 shaloww.a = "111111"

![20210502003415718.png][]

我们可以看到页面输出一次，也就是说这一次触发是 shaloww.a = "111111"  触发，是最外层数据改变触发页面更新。

--------------------

## 手写 shallowRef ##

function shallowReactive(obj) {
      return new Proxy(obj, {
        get(obj, key) {
          return obj[key];
        },
        set(obj, key, value) {
          obj[key] = value;
          console.log("更新ui界面");
          return true;
        },
      });
    }
    
    function shallowRef(val){
        return shallowReactive({value:val})
    }
    
    let sr = {
      a: "a",
      gf: {
        b: "b",
        f: {
          c: "c",
          s: {
            d: "d",
          },
        },
      },
    };
    let shRef = shallowRef(sr)
    
    shRef.value.a = 121231

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 3][]

我们可以看到页面什么也没有输出，说明修改 hRef.value.a = 121231 不是最外层数据，在js中使用ref必须通过value获取

通过value设置：

function shallowReactive(obj) {
      return new Proxy(obj, {
        get(obj, key) {
          return obj[key];
        },
        set(obj, key, value) {
          obj[key] = value;
          console.log("更新ui界面");
          return true;
        },
      });
    }
    
    function shallowRef(val){
        return shallowReactive({value:val})
    }
    
    let sr = {
      a: "a",
      gf: {
        b: "b",
        f: {
          c: "c",
          s: {
            d: "d",
          },
        },
      },
    };
    let shRef = shallowRef(sr)
    
    shRef.value ={
      a: "111",
      gf: {
        b: "2222",
        f: {
          c: "3333",
          s: {
            d: "4444",
          },
        },
      },
    };

![20210502004705148.png][]

我们可以看到页面更新了

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70]: /images/20221021/28ec62f784b14580806041d932c71e13.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 1]: /images/20221021/b4d60355f5194f9684b58ee277d41e10.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 2]: /images/20221021/43d8caf1c54744c3b1398edce45867f4.png
[20210502003318648.png]: /images/20221021/b19fba2c59464ba59e498679728db642.png
[20210502003415718.png]: /images/20221021/a4d66163502b4d8b96c6b87131b32355.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 3]: /images/20221021/82afef5e2d624ec3a1698cc36b78637a.png
[20210502004705148.png]: /images/20221021/4488c666c62845d9a5776c5daee977a8.png

发表评论取消回复

表情：

评论列表（有 0 条评论，31人围观）

还没有评论，来说两句吧...

相关阅读

相关深度剖析Vue2、Vue3响应式原理 | 逐步推敲手写响应式原理全过程

应该在我们调用了get捕获器时, 因为如果一个函数中使用了某个对象的key，那么它应该被收集依赖, 而又当一个函数中使用了某个对象的key, 那么就会执行该对象的get方...

雨点打透心脏的1/2处/ 2024年04月27日 15:56/ 0 赞/ 68 阅读

相关手写vue3响应系统

目录 1.目标： 2.原理 3.实现代码 4.小结： -------------------- 1.目标：假设我现在有一个对象obj let ob

电玩女神/ 2023年09月28日 12:27/ 0 赞/ 132 阅读

相关手写一个Vue.js响应式框架

准备工作数据驱动响应式的核心原理发布订阅和观察者模式 github源码：[https://github.com/HZhen/Vue-fram

电玩女神/ 2023年03月01日 10:05/ 0 赞/ 24 阅读

相关 Vue3.0学习 - 第十二节，vue3.x响应式数据的本质，Proxy，手写shallowReactive

1.vue3响应式数据的本质在Vue2.x中是通过defineProperty来实现响应式数据的在Vue3.x中是通过Proxy来实现响应式数据的创建

逃离我推掉我的手/ 2023年01月18日 06:51/ 0 赞/ 32 阅读

相关 Vue3响应式原理实现（简单手写）

文章目录参照源码简单实现-手写参照源码 //设置缓存 let toProxy = new WeakMap()

迷南。/ 2022年12月28日 14:11/ 0 赞/ 150 阅读

相关手写 Vue Router、手写响应式实现、虚拟 DOM 和 Diff 算法 - 模拟 Vue.js 响应式原理

目标 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmN

拼搏现实的明天。/ 2022年12月27日 07:57/ 0 赞/ 189 阅读

相关手写基础版Vue响应式原理

1. 定义测试对象我们新建了一个obj对象，然后`new Observe` <!DOCTYPE html> <html lang="en">

曾经终败给现在/ 2022年12月20日 03:11/ 0 赞/ 144 阅读

相关【系列 1】手写vue响应式原理

手写vue响应式原理首先我们看看原生 vue 做了什么 <script src="https://cdn.bootcdn.net/ajax/libs/vu

向右看齐/ 2022年09月14日 11:20/ 0 赞/ 181 阅读

相关手写Vue数据响应式原理

手写Vue数据响应式原理 // 判断是否是对象 function isObserve(obj){ // 因为null 也是object

亦凉/ 2022年08月30日 11:21/ 0 赞/ 235 阅读

相关 vue3.0 reactive和shallowReact响应式源码实现

shallowReact: 因为只实现第一层,所以直接new Proxy代理即可 reactive: 因为要实现深层次数据劫持,

男娘i/ 2021年07月24日 19:52/ 0 赞/ 368 阅读