vue3 响应性原理

目标

将函数与函数运行过程中用到的响应式数据建立对应关系。

var data1=true, data2,data3;
function fn(){
    if(data1){
      data2;
    } else {
      data3;
    }
}
data2=1;
// fn: datal, data2

任务

  1. 监听响应式数据的读取和修改。

    • defineProperty(vue2)

    • Proxy 和 Reflect (vue3)

  2. 关联响应式数据和调用数据的函数。

    1. 依赖收集:影响函数运行结果的就应该被收集

    2. 派发更新

监听响应式数据的读取和修改

监听

// reactive.js
  • target 是不是对象(不是对象直接返回)。

  • target 是同一个对象(WeakMap):

    const obj={
        a: 1,
        b:2,
    };
    const state1=reactive(obj);
    const state2= reactive(obj);
    console.log(state1 === state2);
  • 提取 handlers

    // handlers.js

读取:依赖收集

  • 收集 getter 内部的属性(使用Reflect)

    const obj={
        a: 1,
        b:2,
        get c(){
            return this.a + this.b;
        }
    }
    const state1=reactive(obj);
    function fn(){
        state1.c;
    }
    fn();
  • 收集嵌套对象

    const obj={
        a: 1,
        b:2,
        c: {
            d: 3
        }
    }
    const state1 = reactive(obj);
    function fn(){
        state1.c.d;
    }
    fn();
  • 收集 in 方法

    const obj={
        a: 1,
        b:2,
    }
    const state1 = reactive(obj);
    function fn(){
        'e' in state1;
    }
    state1.e = 123;
    fn();
  • 添加操作类型信息

    const obj={
        a: 1,
        b:2,
    }
    const state1 = reactive(obj);
    function fn(){
        'a' in state1;
    }
    fn();
    state1.a = 123;
  • handlers 的每个操作提取为单独函数

  • 收集for...in

    const obj={
        a: 1,
        b:2,
    }
    const state1 = reactive(obj);
    function fn(){
        for(const key in state1) {
        }
    }
    fn();
    state1.abc = 123;

修改(写入): 派发更新

  • set 中分辨 add和set 类型。

  • delete 操作派发更新。

  • 考虑 set 和 delete 的边界情况

    const obj={
        a: 1,
        b:2,
    }
    const state1 = reactive(obj);
    // 删除不存在的属性
    delete state1.abc
    // 值没有变化
    state1.a = 1;

数组

依赖收集

  • 下标,length , for 循环

    const arr = [1,2,3];
    const state=reactive(arr);
    function fn(){
        // state[0];
        // state.length
        for(let i=0;i< state.length; i++){
            state[i];
         }
    }
    fn();
  • for...of 循环

    const arr = [1,2,3];
    const state=reactive(arr);
    function fn(){
        for(const item of state){
            
         }
    }
    fn();
  • includes ,lastIndexOf, indexOf方法

    const arr = [1,2,3,,,];
    const state=reactive(arr);
    function fn(){
        state.includes(1);
     //   state.lastIndexOf(1);
      //   state.lastIndexOf(undefined);
      //   state.indexOf(1);
    }
    fn();
  • 数组元素为对象时includes,lastIndexOf, indexOf需要处理:

    const obj = {};
    const arr = [1,obj,3];
    const state=reactive(arr);
    function fn(){
      console.log(state.indexOf(obj));
    }
    fn();

解决方案,二选一:

  • 传入的原始对象转换为代理对象

  • 当无法在代理对象中找到时,去原始数组中重新找一次(vue)

派发更新

  • 设置下标没有问题,但是超出长度没有派发 length 的改变。 ECMAScript® 2024 Language Specification

    const obj={};
    const arr=[1,obj,3];
    const state=reactive(arr);
    
    state[0] = 3
    //state[5] = 5
    
    // Object.defineProperty(state,'abc',{value: 6});
    
    console.log(arr)
  • 修改 length没有问题,但 length 设置为小于数组长度时没有触发 delete 元素。

    const arr=[1,2,3,4,5,6];
    const state=reactive(arr);
    state.length = 3; 
    console.log(arr);
  • push 会多触发一次 length 收集。pop, shift,unshift,splice 同理。

    const arr=[1,2,3,4,5,6];
    const state=reactive(arr);
    state.push(7); 
    console.log(arr);

解决方案,二选一:

  • 把那些会对数组产生改动的方法全部重写

  • 暂停依赖收集(vue)

关联响应式数据和调用数据的函数

// effect.js
  • 数据和函数的对应关系

  • 收集函数: 用 effect 标记函数

    const obj={
        a: 1,
        b:2,
    };
    const state= reactive(obj);
    
    function fn1(){
        function fn2(){
            state.a;
        }
        fn2();
    }
    
    // 运行函数fn1,运行期间用到的所有响应式数据,都会收集为对应关系
    effect(fn1);
  • 每次运行函数需要重新进行依赖收集,并且是收集运行函数的环境

    const obj={
        a: 1,
        b:2,
    };
    const state=reactive(obj);
    function fn1(){
      if(state.a === 1){
          state.b;
        } else {
        state.c;
        }
     }
     
     effect(fn1);
     
    state.a = 2;
  • 建立关系

  • 运行前,所有 Set 中删除 fn

    const obj={
        a: 1,
        b:2,
    };
    const state=reactive(obj);
    function fn(){
      if(state.a === 1){
          state.b;
        } else {
        state.c;
        }
     }
     
     effect(fn);
     
    state.a = 2;
    state.b = 3; // 不应该触发 fn

课堂练习:实现 ref

import { ref } from './ref.js';

const state = ref(1);

effect(() => {
    console.log('effect', state.value);
});

state.value++;

完整代码

完整代码icon-default.png?t=N7T8https://github.com/yjx3097890/reactive

参考文献

  • 21
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值