vue3的响应式原理简单实现

最新推荐文章于 2024-06-10 22:31:58 发布

拾荒旧痕

最新推荐文章于 2024-06-10 22:31:58 发布

阅读量566

点赞数 9

分类专栏： VUE 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_45331969/article/details/135953108

版权

VUE 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

vue3的响应式原理设计流程图

在这里插入图片描述
相关文件

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
  
  </div>
  <script type="module">
    import {reactive} from './reactive.js'
    import {effect} from './effect.js'

    const user = reactive({
      name:'李白',
      age:18,
      foo:{
        bar:'刘晓'
      }
    })
    // 开始就执行一次，展示初始数据
    effect(()=>{
      document.querySelector('#app').innerText = `${user.name}-${user.age}-${user.foo.bar}`
    })
    // 修改数据
    setTimeout(() => {
      user.name = '杜甫'
      setTimeout(() => {
        user.foo.bar = '陈华'
      }, 2000);
    }, 2000);

  </script>
</body>
</html>

effect.js

let activeEffect;
// effect为副作用函数，更新依赖的作用
export const effect = (fn) => {
    const _effect = () => {
        activeEffect = _effect;
        fn();
    };
    _effect();
};
const targetMap = new WeakMap();
// track 收集依赖
export const track = (target, key) => {
    // 获取Map对象
    let depsMap = targetMap.get(target);
    if (!depsMap) { // 如果没有，初始化一个Map对象，并添加进去
        depsMap = new Map();
        targetMap.set(target, depsMap);
    }
    // 获取一个Set对象（一个伪数组）
    let deps = depsMap.get(key);
    if (!deps) {// 如果没有，初始化一个Set对象，并添加进去
        deps = new Set();
        depsMap.set(key, deps);
    }
    // console.log('deps:', deps);
    // 给相关的依赖添加副作用函数
    deps.add(activeEffect);
};
// trigger 更新依赖
export const trigger = (target, key) => {
    let depsMap = targetMap.get(target);
    if (!depsMap) {
        depsMap = new Map();
        targetMap.set(target, depsMap);
    }
    let deps = depsMap.get(key);
    if (!deps) {
        deps = new Set();
        depsMap.set(key, deps);
    }
    // console.log('deps:', deps);
    // 执行相关依赖内部的effect副作用函数，去更新依赖
    deps.forEach((effect) => effect());
};

reactive.js

import { track, trigger } from './effect.js';
const isObject = (target) => {
    return target !== null && typeof target === 'object';
};
export const reactive = (target) => {
    // Proxy数据劫持
    return new Proxy(target, {
        // 访问了target对象源的属性就会触发get方法
        get(target, key, receiver) {
            let res = Reflect.get(target, key, receiver);
            track(target, key); // 收集依赖
            if (isObject(res)) { // 深层次数据监测  例如：{a:1,b:3,c:{k:3}}
                return reactive(res);
            }
            return res;
        },
        // 修改了target对象源的属性值就会触发set方法
        set(target, key, value, receiver) {
            let res = Reflect.set(target, key, value, receiver);
            trigger(target, key); // 更新依赖
            return res;
        }
    });
};