node

事件循环

  • process.nextTick
  • 微任务队列
  • timer
    setTimeout
    setInterval
  • poll
    文件读写
    网络请求
  • check
    setImmediate
阅读更多

响应系统的作用与实现-2

回顾上篇文章 响应系统的作用与实现-1,完成的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
function track(target, key) {
let depsMap = bucket.get(target);
if (!depsMap) {
bucket.set(target, (depsMap = new Map()));
}
let effectFns = depsMap.get(key);
if (!effectFns) {
depsMap.set(key, (effectFns = new Set()));
}
effectFns.add(activeEffect);
}

function trigger(target, key) {
const depsMap = bucket.get(target);
if (depsMap) {
const effectFns = depsMap.get(key);
effectFns && effectFns.forEach((fn) => fn());
}
}

let activeEffect = null;
const bucket = new WeakMap();
function effect(fn) {
activeEffect = fn;
fn();
}
const proxy = new Proxy(obj, {
get(target, key) {
if (!activeEffect) {
return target[key];
}
track(target, key);
return target[key];
},
set(target, key, newValue) {
target[key] = newValue;
trigger(target, key);
return true;
},
});
阅读更多

响应系统的作用与实现-1

我们都知道,vue3.x 是采用 Proxy 实现响应数据的,本篇文章也将围绕 vue3.x 的响应机制开始,展开对响应式数据和副作用函数的实现

副作用函数

阅读更多

Proxy对象

Proxy 是什么? 使用 Proxy 可以创建一个代理对象,能够实现对其他对象的代理,允许拦截并重新定义对一个对象的基本操作。

“Javascript 中一切皆对象”, 那么, 到底是什么对象呢?

阅读更多

vue

v-if 和 v-for 的优先级

源码: compiler/codegen/index.js

阅读更多

typescript

文章内容不会仔细讲基础用法,而是从 typescript 的应用场景,优点,还有工作中常用的知识角度总结。

去往 typescript 官网查看基础用法等

阅读更多