Vue响应式原理深入分析

更新时间：2022年12月30日 09:19:20 作者：volit_

响应式就是当对象本身(对象的增删值)或者对象属性(重新赋值)发生变化时,将会运行一些函数,最常见的就是render函数,下面这篇文章主要给大家介绍了关于Vue3响应式原理的相关资料,需要的朋友可以参考下

1.响应式数据和副作用函数

（1）副作用函数

副作用函数就是会产生副作用的函数。

function effect() {
    document.body.innerText = 'hello world.'
}

当effect函数执行时，它会设置body的内容，而body是一个全局变量，除了effect函数外任何地方都可以访问到，也就是说effect函数的执行会对其他操作产生影响，即effect函数是一个副作用函数。

（2）响应式数据

const obj = { text: 'hello world.'};
function effect() {
    document.body.innerText = obj.text;
}
obj.text = 'text';

当 obj.text = 'text' 这条语句执行之后，我们期望 document.body.innerText 的值也能够随之修改，这就是通常意义上的响应式数据。

2.响应式数据的基本实现

上文中，对响应式数据进行描述的代码段，并未实现真正的响应式数据。而通过观察我们可以发现，要实现真正的响应式数据，我们需要对数据的读取和设置进行拦截。当有操作对响应式数据进行读取中，我们将其添加至一个依赖队列，当修改响应式数据的值时，将依赖队列中的操作依次取出，并执行。以下使用Proxy对该思路进行实现。

const bucket = new Set();
const data = { text: "hello world." };
const obj = new Proxy(data, {
  get(target, key) {
    bucket.add(effect);
    return target[key];
  },
  set(target, key, newVal) {
    target[key] = newVal;
    bucket.forEach((fn) => fn());
    return true;
  },
});
const body = {
  innerText: "",
};
function effect() {
  body.innerText = obj.text;
}
effect();
console.log(body.innerText); // hello world
obj.text = "text";
console.log(body.innerText); // text

但是，该实现仍然存在缺陷，比如说只能通过effect函数的名字实现依赖收集。

3.设计一个完善的响应式系统

（1）消除依赖收集的硬绑定

这里我们使用一个active变量来保存当前需要进行依赖收集的函数。

const bucket = new Set();
const data = { text: "hello world." };
let activeEffect; // 新增一个active变量
const obj = new Proxy(data, {
  get(target, key) {
    if (activeEffect) {
      bucket.add(activeEffect); // 添加active变量保存的函数
    }
    return target[key];
  },
  set(target, key, newVal) {
    target[key] = newVal;
    bucket.forEach((fn) => fn());
    return true;
  },
});
function effect(fn) {
  activeEffect = fn; // 将当前函数赋值给active变量
  fn();
}
const body = {
  innerText: "",
};
effect(() => {
  body.innerText = obj.text;
});
console.log(body.innerText); // hello world
obj.text = "text";
console.log(body.innerText); // text

但是该设计仍然存在很多问题，比如说，当访问一个obj对象上并不存在的属性假设为val时，逻辑上并没有存在对obj.val的访问，因此该操作不会产生任何响应，但实际上，当val的值被修改后，传入effect的匿名函数会再次执行。

（2）基于属性的依赖收集

上一个版本的响应式系统只能对拦截对象所有的get和set操作进行响应，并不能做到细粒度的控制。考虑针对属性进行依赖拦截，主要有三个角色，对象、属性和依赖方法。因此考虑修改bucket的结构，由原来的Set修改为WeakMap(target,Map(key,activeEffect));这样就可以针对属性进行细粒度的依赖收集了。

ps.使用WeakMap是因为WeakMap是对key的弱引用，不会影响垃圾回收机制的工作，当target对象不存在任何引用时，说明target对象已不被需要，这时target对象将会被垃圾回收。如果换成Map，即时target不存在任何引用，Map已然会保持对target的引用，容易造成内存泄露。

// bucket的数据结构修改为WeakMap
const bucket = new WeakMap();
const data = { text: "hello world." };
let activeEffect;
const obj = new Proxy(data, {
  get(target, key) {
    track(target, key);
    return target[key];
  },
  set(target, key, newVal) {
    target[key] = newVal;
    trigger(target, key);
  },
});
function track(target, key) {
  if (!activeEffect) {
    return;
  }
  let depsMap = bucket.get(target);
  if (!depsMap) {
    bucket.set(target, (depsMap = new Map()));
  }
  let deps = depsMap.get(key);
  if (!deps) {
    depsMap.set(key, (deps = new Set()));
  }
  deps.add(activeEffect);
}
function trigger(target, key) {
  const depsMap = bucket.get(target);
  if (!depsMap) return;
  const effects = depsMap.get(key);
  effects && effects.forEach((fn) => fn());
}
function effect(fn) {
  activeEffect = fn;
  fn();
}
const body = {
  innerText: "",
};
effect(() => {
  body.innerText = obj.text;
});
console.log(body.innerText); // hello world
obj.text = "text";
console.log(body.innerText); // text

（3）分支切换和cleanup

对于一段三元运算符 obj.flag? obj.text : 'text',我们所期望的结果是，当obj.flag的值为false时，不会对obj.text属性进行响应操作。如果是上面那段程序，当obj.flag的值为false时，操作obj.text仍然会进行相应操作，因为obj.text对应的依赖仍然存在。对此如果我们能够在每次的函数执行之前，将其从之前相关联的依赖集合中移除，就可以达到目的了。这里通过修改副作用函数来实现：

function effect(fn) {
  const effectFn = () => {
    // 在依赖函数执行之前，清除依赖函数之前的依赖项
    cleanup(effectFn);
    activeEffect = effectFn;
    fn();
  };
  // 给副作用函数添加一个deps数组用来收集和该副作用函数相关联的依赖
  effectFn.deps = [];
  effectFn();
}
// cleanup函数实现
function cleanup(effectFn) {
  for (let i = 0; i < effectFn.deps.length; i++) {
    const deps = effectFn.deps[i];
    deps.delete(effectFn);
  }
  effectFn.deps.length = 0;
}
function track(target, key) {
  if (!activeEffect) {
    return;
  }
  let depsMap = bucket.get(target);
  if (!depsMap) {
    bucket.set(target, (depsMap = new Map()));
  }
  let deps = depsMap.get(key);
  if (!deps) {
    depsMap.set(key, (deps = new Set()));
  }
  deps.add(activeEffect);
  activeEffect.deps.push(deps); // 在这里收集相关联的依赖
}
function trigger(target, key) {
  const depsMap = bucket.get(target);
  if (!depsMap) return;
  const effects = depsMap.get(key);
  const effectToRun = new Set(effects); // 这里需要创建一个新集合来遍历，因为foreach循环会对新加入序列的元素也执行遍历，若遍历直接原集合，会出现死循环。
  effectToRun.forEach((fn) => fn());
}

（4）嵌套effect

虽然我们已经解决了很多问题，但是作为响应式系统中比较常见的场景之一的嵌套，我们还不能实现。因为我们定义的activeEffect是一个变量，当嵌套操作时，无论怎样，最后activeEffect变量中存放的都是操作的最后一个副作用函数。这里，我们通过加入一个effect栈的方式，来给这套响应式系统添加嵌套功能。

// 定义一个effect栈
const effectStack = [];
function effect(fn) {
  const effectFn = () => {
    cleanup(effectFn);
    activeEffect = effectFn;
    effectStack.push(effectFn); // 在effect执行之前，放入栈中
    fn();
    effectStack.pop(); // 执行完毕立即弹出
    activeEffect = effectStack[effectStack.length - 1]; // activeEffect指向新的effect
  };
  effectFn.deps = [];
  effectFn();
}

（5）避免产生死循环

试看obj.val++这条语句，它实际上相当于obj.val = obj.val+1，也就是进行了一次读取操作和一次赋值操作，共两次操作。而若将该操作运行在我们前面的响应式系统中，它将会产生死循环，因为当我们进行了读取操作后，会立即进行赋值操作，而在赋值操作中，读取操作再次被触发，然后循环的执行这一系列操作。这里我们在trigger函数中判断trigger触发的副作用函数，是否与当前正在执行的副作用函数相同，若相同，则不执行当前副作用函数。这样就能避免无限递归调用，避免内存溢出。

function trigger(target, key) {
  const depsMap = bucket.get(target);
  if (!depsMap) return;
  const effects = depsMap.get(key);
  const effectToRun = new Set();
  effects &&
    effects.forEach((fn) => {
      // 若正在执行的副作用函数与当前触发的副作用函数相同，则不执行
      if (fn !== activeEffect) {
        effectToRun.add(fn);  
      }
    });
  effectToRun.forEach((fn) => fn());
}

（6）实现调度实行

现在要实现一个这样的效果：

effect(()=> {
    console.log(obj.val);
});
obj.val ++;
console.log("结束");

// 这段代码本来会输出的结果是:
/**
   1
   2
   结束
**/
// 现在我们想让它变成
/**
    1
    结束
    2
**/

这里我们可以通过给effect函数添加一个配置项来实现：

effect(
  ()=> {
    console.log(obj.val);
  },
  {
      scheduler(fn) {
          setTimeout(fn);
      }
  }
function effect(fn,options = {}) {
    const effectFn = ()=> {
       ...
    }
    effectFn.deps = [];
    effectFn.options = options; // 为副作用函数添加配置项
    effectFn();
}
function trigger(target, key) {
  const depsMap = bucket.get(target);
  if (!depsMap) return;
  const effects = depsMap.get(key);
  const effectToRun = new Set();
  effects &&
    effects.forEach((fn) => {
      if (fn !== activeEffect) {
        effectToRun.add(fn);
      }
    });
  effectToRun.forEach((fn) => {
    // 若当前依赖函数含有调度执行，将当前函数传递给调度函数执行
    if (fn.options.scheduler) {
      fn.options.scheduler(fn); //将当前函数传递给调度函数
    } else {
      fn();
    }
  });
}

如果还要实现一下效果：

effect(()=> {
    console.log(obj.val);
});
obj.val ++;
obj.val ++;
// 这段代码本来会输出的结果是:
/**
	1
	2
	3
 **/
// 现在我们想让它变成
/**
 	1
 	3
 **/

这里通过添加一个任务执行队列来实现：

const jobQueue = new Set();
const p = Promise.resolve(); 
let isFlushing = false;
effect(
    ()=> {
        console.log(obj.val);
    },
    {
        scheduler(fn){
            jobQueue.add(fn);
            flushJob();
        }
    }
);
function flushJob() {
    if(isFlushing) return;
    isFlushing = true;
    p.then(()=> {
        jobQueue.forEach(job=>job());
    }).finally(()=> {
        isFlushing = false;
    })
}

像这样，由于Set保证了任务的唯一性，也就是jobQueue中只会保存唯一的一个任务，即当前执行的任务。而isFlushing标记则保证任务只会执行一次。而因为通过Promise将任务添加到了微任务队列中，当任务最后执行的时候，obj.val的值已经是3了。

（7）computed和lazy

计算属性是vue中一个比较有特色的属性，它会缓存表达式的计算结果，只有当表达式依赖的变量发生变化时，它才会进行重新计算。实现计算属性的前提是实现懒加载标记，这里我们可以通过之前effect函数的配置项来实现。

effect(
	()=> {
        return ()=>obj.val * 2;
    },
    {
        lazy: true; // 设置 lazy 标记
    }
);
effect(fn, options = {}) {
  const effectFn = () => {
    cleanup(effectFn);
    activeEffect = effectFn;
    effectStack.push(effectFn);
    const res = fn();
    effectStack.pop();
    activeEffect = effectStack[effectStack.length - 1];
    return res;
  };
  effectFn.deps = [];
  effectFn.options = options;
  if (!effectFn.options.lazy) { // 若副作用函数持有lazy标记，则直接将副作用函数返回
    effectFn();
  }
  return effectFn;
}

通过上面对lazy标记的设置，现在可以实现下面的效果：

const effectFn = effect(
	()=> {
        return ()=>obj.val * 2;
    },
    {
        lazy: true; // 设置 lazy 标记
    }
)();
console.log(effectFn); // 2

在此基础上，我们来实现computed

function computed(getter) {
    let value;
    let dirty = false;
    const effectFn = effect(getter, {
        lazy: true,
        scheduler(){
        	if(!dirty) {
                dirty = true;
                tirgger(obj, 'value');
            }
    	}
    });
    const obj = {
        get value() {
            if(!dirty) {
                value = effectFn();
                dirty = true;
            }
            track(target, 'value');
            return value;
        }
    };
    return obj;
}

（8）watch

想要实现watch，其实只需要添加一个scheduler()，像是这样:

effect(
	()=> {
        consoloe.log(obj.val);
    },
    {
        scheduler() {
            console.log("数值发生了变化");
        }
    }
)

就可以实现一个基本的watch效果，现在来编写一个功能完整的watch函数

function watch(source, cb) {
    let getter;
    if(typeof source === "function") { //若传入()=> obj.val，则直接使用该匿名函数
        getter = source;
    } else {
        getter = traverse(source); // 否则递归遍历该对象的所有属性，从而达到监听所有属性的目的
    }
    let oldValue, newValue; // 保存新旧值
    const effectFn = effect(getter, {
        lazy: true,
        scheduler() {
            newValue = effectFn(); // 获取新值
            cb(oldValue, newValue);
            oldValue = newValue; // 函数执行完后，更新旧值。
        }
    });
    oldValue = effectFn(); // 获取初始旧值
}
function traverse(value, seen = new Set()) {
    if(typeof value !== 'object' || value !== null || seen.has(value)) return ;
    seen.add(value);
    for(const k in seen) {
        traverse(seen[k],seen);
    }
}

到此这篇关于Vue响应式原理深入分析的文章就介绍到这了,更多相关Vue响应式原理内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue 实现购物车总价计算
今天小编就为大家分享一篇vue 实现购物车总价计算，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
Vue privide 和inject 依赖注入的使用详解
这篇文章主要介绍了Vue privide 和inject 依赖注入的用法,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-10-10
Vue项目中使用百度地图api的详细步骤
在之前的一个小项目中,用到的显示当地的地图功能,下面这篇文章主要给大家介绍了关于Vue项目中使用百度地图api的详细步骤,文中通过图文介绍的非常详细,需要的朋友可以参考下
2022-10-10
vue实现标签云效果的方法详解
这篇文章主要介绍了vue实现标签云效果的方法,结合实例形式详细分析了vue标签云的实现技巧与相关操作注意事项,需要的朋友可以参考下
2019-08-08
element-ui表格列金额显示两位小数的方法
这篇文章主要介绍了element-ui表格列金额显示两位小数的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08
vue3 使用setup语法糖实现分类管理功能
这篇文章主要介绍了vue3 使用setup语法糖实现分类管理,本次模块使用 vue3+element-plus 实现一个新闻站的后台分类管理模块，其中新增、编辑采用对话框方式公用一个表单，需要的朋友可以参考下
2022-08-08
vue实现简单学生信息管理
这篇文章主要为大家详细介绍了vue实现简单学生信息管理，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-05-05
vue实现打地鼠小游戏
这篇文章主要为大家详细介绍了vue实现打地鼠小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-08-08
vue中的.sync修饰符用法及原理分析
这篇文章主要介绍了vue中的.sync修饰符用法及原理分析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
VUE3 Vite打包后动态图片资源不显示问题解决方法
这篇文章主要给大家介绍了关于VUE3 Vite打包后动态图片资源不显示问题的解决方法,可能是因为在部署后的服务器环境中对中文文件名的支持不完善,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-09-09