8 |
12 |
--------------------------------------------------------------------------------
/src/reactivity/__tests__/shallowReadonly.spec.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * @Author: ext.luhaifeng1 ext.luhaifeng1@jd.com
3 | * @Date: 2022-06-29 17:43:14
4 | * @LastEditors: luhaifeng666
5 | * @LastEditTime: 2022-06-29 20:11:28
6 | * @Description:
7 | */
8 | import { shallowReadonly, isReadonly } from '../reactive'
9 |
10 | describe('shallowReadonly', () => {
11 | test('should not make non-reactive properties reactive', () => {
12 | const props = shallowReadonly({ n: { foo:1 }})
13 | // 最外层的对象是 readonly 对象
14 | expect(isReadonly(props)).toBe(true)
15 | // 内部嵌套的对象不是 readonly 对象
16 | expect(isReadonly(props.n)).toBe(false)
17 | })
18 | })
--------------------------------------------------------------------------------
/docs/miniVue/notes/prerequisites.md:
--------------------------------------------------------------------------------
1 |
8 | # 开始之前
9 |
10 | 在开始阅读本文档之前，先一起来了解一个思想：`TDD`。
11 |
12 | 那什么是 `TDD` 呢？我们先来看下它的概念：
13 |
14 | ::: tip 什么是 TDD ？
15 |
16 | 1. TDD是测试驱动开发（Test-Driven Development）的英文简称。
17 | 2. 它是敏捷开发中的一项核心实践和技术，也是一种设计方法论。
18 | 3. TDD的原理是在开发功能代码之前，先编写单元测试用例代码，测试代码确定需要编写什么产品代码。
19 | 4. TDD虽是敏捷方法的核心实践，但不只适用于XP（Extreme Programming），同样可以适用于其他开发方法和过程。
20 |
21 | :::
22 |
23 | 简而言之，就是 `测试驱动开发`，在动手开发之前先写好测试用例，然后再进行开发。有兴趣的小伙伴可以自行探究，此处不做赘述。
24 |
25 | 在接下来的文档中，`TDD` 的思想将贯穿始终。话不多说，让我们一起进入 Vue3 源码的学习吧~
26 |
--------------------------------------------------------------------------------
/docs/.vuepress/.temp/pages/miniVue/index.html.js:
--------------------------------------------------------------------------------
1 | export const data = JSON.parse("{\"key\":\"v-f4c6334e\",\"path\":\"/miniVue/\",\"title\":\"\",\"lang\":\"en-US\",\"frontmatter\":{},\"excerpt\":\"\",\"headers\":[],\"git\":{\"updatedTime\":1640835008000,\"contributors\":[{\"name\":\"luhaifeng\",\"email\":\"lhf222458@ncarzone.com\",\"commits\":1}]},\"filePathRelative\":\"miniVue/README.md\"}")
2 |
3 | if (import.meta.webpackHot) {
4 | import.meta.webpackHot.accept()
5 | if (__VUE_HMR_RUNTIME__.updatePageData) {
6 | __VUE_HMR_RUNTIME__.updatePageData(data)
7 | }
8 | }
9 |
10 | if (import.meta.hot) {
11 | import.meta.hot.accept(({ data }) => {
12 | __VUE_HMR_RUNTIME__.updatePageData(data)
13 | })
14 | }
15 |
--------------------------------------------------------------------------------
/src/runtime-core/componentPublicInstance.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * @Author: luhaifeng666 youzui@hotmail.com
3 | * @Date: 2022-08-01 09:01:09
4 | * @LastEditors: luhaifeng666
5 | * @LastEditTime: 2022-08-01 09:06:20
6 | * @Description:
7 | */
8 | const publicPropertiesMap = {
9 | $el: i => i.vnode.el
10 | }
11 |
12 | export const PublicInstanceProxyHandlers = {
13 | get ({_: instance}, key) {
14 | const { setupState } = instance
15 | // 通过 this.xxxx 获取值
16 | if (key in setupState) {
17 | return setupState[key]
18 | }
19 | // 通过 this.$el 获取值
20 | const publicGetter = publicPropertiesMap[key]
21 | if (publicGetter) {
22 | return publicGetter(instance)
23 | }
24 | }
25 | }
--------------------------------------------------------------------------------
/docs/.vuepress/.temp/pages/index.html.js:
--------------------------------------------------------------------------------
1 | export const data = JSON.parse("{\"key\":\"v-8daa1a0e\",\"path\":\"/\",\"title\":\"\",\"lang\":\"en-US\",\"frontmatter\":{\"home\":true,\"heroImage\":\"/images/logo.svg\"},\"excerpt\":\"\",\"headers\":[],\"git\":{\"updatedTime\":1655196562000,\"contributors\":[{\"name\":\"luhaifeng\",\"email\":\"lhf222458@ncarzone.com\",\"commits\":2},{\"name\":\"luhaifeng666\",\"email\":\"youzui@hotmail.com\",\"commits\":1}]},\"filePathRelative\":\"README.md\"}")
2 |
3 | if (import.meta.webpackHot) {
4 | import.meta.webpackHot.accept()
5 | if (__VUE_HMR_RUNTIME__.updatePageData) {
6 | __VUE_HMR_RUNTIME__.updatePageData(data)
7 | }
8 | }
9 |
10 | if (import.meta.hot) {
11 | import.meta.hot.accept(({ data }) => {
12 | __VUE_HMR_RUNTIME__.updatePageData(data)
13 | })
14 | }
15 |
--------------------------------------------------------------------------------
/docs/.vuepress/.temp/pages/miniVue/notes/index.html.js:
--------------------------------------------------------------------------------
1 | export const data = JSON.parse("{\"key\":\"v-402aedb2\",\"path\":\"/miniVue/notes/\",\"title\":\"Vue3 源码学习\",\"lang\":\"en-US\",\"frontmatter\":{\"title\":\"Vue3 源码学习\",\"comment\":false},\"excerpt\":\"\",\"headers\":[],\"git\":{\"updatedTime\":1657017188000,\"contributors\":[{\"name\":\"luhaifeng\",\"email\":\"lhf222458@ncarzone.com\",\"commits\":4},{\"name\":\"luhaifeng666\",\"email\":\"youzui@hotmail.com\",\"commits\":2}]},\"filePathRelative\":\"miniVue/notes/README.md\"}")
2 |
3 | if (import.meta.webpackHot) {
4 | import.meta.webpackHot.accept()
5 | if (__VUE_HMR_RUNTIME__.updatePageData) {
6 | __VUE_HMR_RUNTIME__.updatePageData(data)
7 | }
8 | }
9 |
10 | if (import.meta.hot) {
11 | import.meta.hot.accept(({ data }) => {
12 | __VUE_HMR_RUNTIME__.updatePageData(data)
13 | })
14 | }
15 |
--------------------------------------------------------------------------------
/src/reactivity/computed.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * @Author: luhaifeng666 youzui@hotmail.com
3 | * @Date: 2022-07-05 14:25:24
4 | * @LastEditors: luhaifeng666
5 | * @LastEditTime: 2022-07-05 18:08:38
6 | * @Description:
7 | */
8 | import { ReactiveEffect } from './effect'
9 |
10 | class ComputedRefImpl {
11 | private _getter: any
12 | private _dirty: boolean = true // 标记是否需要触发 getter
13 | private _value: any // 缓存值
14 | private _effect: ReactiveEffect
15 |
16 | constructor(getter) {
17 | this._getter = getter
18 | this._effect = new ReactiveEffect(this._getter, () => {
19 | if (!this._dirty) this._dirty = true
20 | })
21 | }
22 |
23 | get value() {
24 | // 值没有发生变化时，再次获取不会触发 getter
25 | if (this._dirty) {
26 | this._dirty = false
27 | this._value = this._effect.run()
28 | }
29 | return this._value
30 | }
31 | }
32 |
33 | export const computed = getter => new ComputedRefImpl(getter)
--------------------------------------------------------------------------------
/docs/.vuepress/public/themes/layouts/Layout.vue:
--------------------------------------------------------------------------------
1 |
2 | Vue3 源码学习
9 |用于记录Vue3源码学习的笔记， 参考崔大的 mini-vue
每篇笔记会对应一个提交分支，分支号会标记在笔记中，有兴趣的小伙伴可以切到对应分支配合笔记一起食用。
11 |
134 |
135 | 
136 |
137 |
138 |
139 | 其实道理是一样的，依旧是在 `createGetter` 时没有判断值类型。因此，我们只需要在刚才进行对象类型判断之处再加上 `isReadonly` 的判断即可。如果 `isReadonly === true` 且当前属性的值是对象类型，则返回 `readonly(res)`:
140 |
141 | :::: code-group
142 | ::: code-group-item baseHandlers.ts
143 |
144 | ```ts{13}
145 | // src/reactivity/baseHandlers.ts
146 |
147 | /**
148 | * 用于生成 get 方法
149 | * @param isReadonly 是否是 readonly 对象
150 | * @returns
151 | */
152 | function createGetter(isReadonly = false) {
153 | return function(target, key) {
154 | // 省略一大波代码
155 |
156 | if (isObject(res)) {
157 | return isReadonly ? readonly(res) : reactive(res)
158 | }
159 | }
160 | }
161 | ```
162 |
163 | :::
164 | ::::
165 |
--------------------------------------------------------------------------------
/docs/.vuepress/.temp/internal/pagesData.js:
--------------------------------------------------------------------------------
1 | export const pagesData = {
2 | // path: /
3 | "v-8daa1a0e": () => import(/* webpackChunkName: "v-8daa1a0e" */"/Users/luhaifeng/codes/mine/vue3-study/docs/.vuepress/.temp/pages/index.html.js").then(({ data }) => data),
4 | // path: /miniVue/
5 | "v-f4c6334e": () => import(/* webpackChunkName: "v-f4c6334e" */"/Users/luhaifeng/codes/mine/vue3-study/docs/.vuepress/.temp/pages/miniVue/index.html.js").then(({ data }) => data),
6 | // path: /miniVue/notes/
7 | "v-402aedb2": () => import(/* webpackChunkName: "v-402aedb2" */"/Users/luhaifeng/codes/mine/vue3-study/docs/.vuepress/.temp/pages/miniVue/notes/index.html.js").then(({ data }) => data),
8 | // path: /miniVue/notes/prerequisites.html
9 | "v-29a0bfe3": () => import(/* webpackChunkName: "v-29a0bfe3" */"/Users/luhaifeng/codes/mine/vue3-study/docs/.vuepress/.temp/pages/miniVue/notes/prerequisites.html.js").then(({ data }) => data),
10 | // path: /miniVue/notes/reactivity/01_reactive.html
11 | "v-aec07b30": () => import(/* webpackChunkName: "v-aec07b30" */"/Users/luhaifeng/codes/mine/vue3-study/docs/.vuepress/.temp/pages/miniVue/notes/reactivity/01_reactive.html.js").then(({ data }) => data),
12 | // path: /miniVue/notes/reactivity/02_runner.html
13 | "v-f6da2ddc": () => import(/* webpackChunkName: "v-f6da2ddc" */"/Users/luhaifeng/codes/mine/vue3-study/docs/.vuepress/.temp/pages/miniVue/notes/reactivity/02_runner.html.js").then(({ data }) => data),
14 | // path: /miniVue/notes/reactivity/03_scheduler.html
15 | "v-b8c3a658": () => import(/* webpackChunkName: "v-b8c3a658" */"/Users/luhaifeng/codes/mine/vue3-study/docs/.vuepress/.temp/pages/miniVue/notes/reactivity/03_scheduler.html.js").then(({ data }) => data),
16 | // path: /miniVue/notes/reactivity/04_stop.html
17 | "v-05db1f42": () => import(/* webpackChunkName: "v-05db1f42" */"/Users/luhaifeng/codes/mine/vue3-study/docs/.vuepress/.temp/pages/miniVue/notes/reactivity/04_stop.html.js").then(({ data }) => data),
18 | // path: /miniVue/notes/reactivity/05_readonly.html
19 | "v-37892dc3": () => import(/* webpackChunkName: "v-37892dc3" */"/Users/luhaifeng/codes/mine/vue3-study/docs/.vuepress/.temp/pages/miniVue/notes/reactivity/05_readonly.html.js").then(({ data }) => data),
20 | // path: /miniVue/notes/reactivity/06_reactiveOrReadonly.html
21 | "v-bc670b30": () => import(/* webpackChunkName: "v-bc670b30" */"/Users/luhaifeng/codes/mine/vue3-study/docs/.vuepress/.temp/pages/miniVue/notes/reactivity/06_reactiveOrReadonly.html.js").then(({ data }) => data),
22 | // path: /miniVue/notes/reactivity/07_nestedReactiveAndReadonly.html
23 | "v-464fa7c2": () => import(/* webpackChunkName: "v-464fa7c2" */"/Users/luhaifeng/codes/mine/vue3-study/docs/.vuepress/.temp/pages/miniVue/notes/reactivity/07_nestedReactiveAndReadonly.html.js").then(({ data }) => data),
24 | // path: /miniVue/notes/reactivity/08_shallowReadonly.html
25 | "v-ec2b32d8": () => import(/* webpackChunkName: "v-ec2b32d8" */"/Users/luhaifeng/codes/mine/vue3-study/docs/.vuepress/.temp/pages/miniVue/notes/reactivity/08_shallowReadonly.html.js").then(({ data }) => data),
26 | // path: /miniVue/notes/reactivity/09_isProxy.html
27 | "v-453eef05": () => import(/* webpackChunkName: "v-453eef05" */"/Users/luhaifeng/codes/mine/vue3-study/docs/.vuepress/.temp/pages/miniVue/notes/reactivity/09_isProxy.html.js").then(({ data }) => data),
28 | // path: /miniVue/notes/reactivity/10_ref.html
29 | "v-58f7d3e0": () => import(/* webpackChunkName: "v-58f7d3e0" */"/Users/luhaifeng/codes/mine/vue3-study/docs/.vuepress/.temp/pages/miniVue/notes/reactivity/10_ref.html.js").then(({ data }) => data),
30 | // path: /miniVue/notes/reactivity/11_isRef%20&%20unRef.html
31 | "v-ff176422": () => import(/* webpackChunkName: "v-ff176422" */"/Users/luhaifeng/codes/mine/vue3-study/docs/.vuepress/.temp/pages/miniVue/notes/reactivity/11_isRef & unRef.html.js").then(({ data }) => data),
32 | // path: /miniVue/notes/reactivity/12_proxyRefs.html
33 | "v-6486207a": () => import(/* webpackChunkName: "v-6486207a" */"/Users/luhaifeng/codes/mine/vue3-study/docs/.vuepress/.temp/pages/miniVue/notes/reactivity/12_proxyRefs.html.js").then(({ data }) => data),
34 | // path: /miniVue/notes/reactivity/13_computed.html
35 | "v-79913d35": () => import(/* webpackChunkName: "v-79913d35" */"/Users/luhaifeng/codes/mine/vue3-study/docs/.vuepress/.temp/pages/miniVue/notes/reactivity/13_computed.html.js").then(({ data }) => data),
36 | // path: /miniVue/notes/runtime-core/01_initComponent.html
37 | "v-dae0fb94": () => import(/* webpackChunkName: "v-dae0fb94" */"/Users/luhaifeng/codes/mine/vue3-study/docs/.vuepress/.temp/pages/miniVue/notes/runtime-core/01_initComponent.html.js").then(({ data }) => data),
38 | // path: /404.html
39 | "v-3706649a": () => import(/* webpackChunkName: "v-3706649a" */"/Users/luhaifeng/codes/mine/vue3-study/docs/.vuepress/.temp/pages/404.html.js").then(({ data }) => data),
40 | }
41 |
--------------------------------------------------------------------------------
/docs/.vuepress/.temp/internal/pagesComponents.js:
--------------------------------------------------------------------------------
1 | import { defineAsyncComponent } from 'vue'
2 |
3 | export const pagesComponents = {
4 | // path: /
5 | "v-8daa1a0e": defineAsyncComponent(() => import(/* webpackChunkName: "v-8daa1a0e" */"/Users/luhaifeng/codes/mine/vue3-study/docs/.vuepress/.temp/pages/index.html.vue")),
6 | // path: /miniVue/
7 | "v-f4c6334e": defineAsyncComponent(() => import(/* webpackChunkName: "v-f4c6334e" */"/Users/luhaifeng/codes/mine/vue3-study/docs/.vuepress/.temp/pages/miniVue/index.html.vue")),
8 | // path: /miniVue/notes/
9 | "v-402aedb2": defineAsyncComponent(() => import(/* webpackChunkName: "v-402aedb2" */"/Users/luhaifeng/codes/mine/vue3-study/docs/.vuepress/.temp/pages/miniVue/notes/index.html.vue")),
10 | // path: /miniVue/notes/prerequisites.html
11 | "v-29a0bfe3": defineAsyncComponent(() => import(/* webpackChunkName: "v-29a0bfe3" */"/Users/luhaifeng/codes/mine/vue3-study/docs/.vuepress/.temp/pages/miniVue/notes/prerequisites.html.vue")),
12 | // path: /miniVue/notes/reactivity/01_reactive.html
13 | "v-aec07b30": defineAsyncComponent(() => import(/* webpackChunkName: "v-aec07b30" */"/Users/luhaifeng/codes/mine/vue3-study/docs/.vuepress/.temp/pages/miniVue/notes/reactivity/01_reactive.html.vue")),
14 | // path: /miniVue/notes/reactivity/02_runner.html
15 | "v-f6da2ddc": defineAsyncComponent(() => import(/* webpackChunkName: "v-f6da2ddc" */"/Users/luhaifeng/codes/mine/vue3-study/docs/.vuepress/.temp/pages/miniVue/notes/reactivity/02_runner.html.vue")),
16 | // path: /miniVue/notes/reactivity/03_scheduler.html
17 | "v-b8c3a658": defineAsyncComponent(() => import(/* webpackChunkName: "v-b8c3a658" */"/Users/luhaifeng/codes/mine/vue3-study/docs/.vuepress/.temp/pages/miniVue/notes/reactivity/03_scheduler.html.vue")),
18 | // path: /miniVue/notes/reactivity/04_stop.html
19 | "v-05db1f42": defineAsyncComponent(() => import(/* webpackChunkName: "v-05db1f42" */"/Users/luhaifeng/codes/mine/vue3-study/docs/.vuepress/.temp/pages/miniVue/notes/reactivity/04_stop.html.vue")),
20 | // path: /miniVue/notes/reactivity/05_readonly.html
21 | "v-37892dc3": defineAsyncComponent(() => import(/* webpackChunkName: "v-37892dc3" */"/Users/luhaifeng/codes/mine/vue3-study/docs/.vuepress/.temp/pages/miniVue/notes/reactivity/05_readonly.html.vue")),
22 | // path: /miniVue/notes/reactivity/06_reactiveOrReadonly.html
23 | "v-bc670b30": defineAsyncComponent(() => import(/* webpackChunkName: "v-bc670b30" */"/Users/luhaifeng/codes/mine/vue3-study/docs/.vuepress/.temp/pages/miniVue/notes/reactivity/06_reactiveOrReadonly.html.vue")),
24 | // path: /miniVue/notes/reactivity/07_nestedReactiveAndReadonly.html
25 | "v-464fa7c2": defineAsyncComponent(() => import(/* webpackChunkName: "v-464fa7c2" */"/Users/luhaifeng/codes/mine/vue3-study/docs/.vuepress/.temp/pages/miniVue/notes/reactivity/07_nestedReactiveAndReadonly.html.vue")),
26 | // path: /miniVue/notes/reactivity/08_shallowReadonly.html
27 | "v-ec2b32d8": defineAsyncComponent(() => import(/* webpackChunkName: "v-ec2b32d8" */"/Users/luhaifeng/codes/mine/vue3-study/docs/.vuepress/.temp/pages/miniVue/notes/reactivity/08_shallowReadonly.html.vue")),
28 | // path: /miniVue/notes/reactivity/09_isProxy.html
29 | "v-453eef05": defineAsyncComponent(() => import(/* webpackChunkName: "v-453eef05" */"/Users/luhaifeng/codes/mine/vue3-study/docs/.vuepress/.temp/pages/miniVue/notes/reactivity/09_isProxy.html.vue")),
30 | // path: /miniVue/notes/reactivity/10_ref.html
31 | "v-58f7d3e0": defineAsyncComponent(() => import(/* webpackChunkName: "v-58f7d3e0" */"/Users/luhaifeng/codes/mine/vue3-study/docs/.vuepress/.temp/pages/miniVue/notes/reactivity/10_ref.html.vue")),
32 | // path: /miniVue/notes/reactivity/11_isRef%20&%20unRef.html
33 | "v-ff176422": defineAsyncComponent(() => import(/* webpackChunkName: "v-ff176422" */"/Users/luhaifeng/codes/mine/vue3-study/docs/.vuepress/.temp/pages/miniVue/notes/reactivity/11_isRef & unRef.html.vue")),
34 | // path: /miniVue/notes/reactivity/12_proxyRefs.html
35 | "v-6486207a": defineAsyncComponent(() => import(/* webpackChunkName: "v-6486207a" */"/Users/luhaifeng/codes/mine/vue3-study/docs/.vuepress/.temp/pages/miniVue/notes/reactivity/12_proxyRefs.html.vue")),
36 | // path: /miniVue/notes/reactivity/13_computed.html
37 | "v-79913d35": defineAsyncComponent(() => import(/* webpackChunkName: "v-79913d35" */"/Users/luhaifeng/codes/mine/vue3-study/docs/.vuepress/.temp/pages/miniVue/notes/reactivity/13_computed.html.vue")),
38 | // path: /miniVue/notes/runtime-core/01_initComponent.html
39 | "v-dae0fb94": defineAsyncComponent(() => import(/* webpackChunkName: "v-dae0fb94" */"/Users/luhaifeng/codes/mine/vue3-study/docs/.vuepress/.temp/pages/miniVue/notes/runtime-core/01_initComponent.html.vue")),
40 | // path: /404.html
41 | "v-3706649a": defineAsyncComponent(() => import(/* webpackChunkName: "v-3706649a" */"/Users/luhaifeng/codes/mine/vue3-study/docs/.vuepress/.temp/pages/404.html.vue")),
42 | }
43 |
--------------------------------------------------------------------------------
/lib/mini-vue.esm.js:
--------------------------------------------------------------------------------
1 | /*
2 | * @Author: luhaifeng666 youzui@hotmail.com
3 | * @Date: 2022-07-10 09:42:52
4 | * @LastEditors: luhaifeng666
5 | * @LastEditTime: 2022-08-01 08:54:23
6 | * @Description:
7 | */
8 | function createVNode(type, props, children) {
9 | var vnode = {
10 | type: type,
11 | props: props,
12 | children: children,
13 | el: null
14 | };
15 | return vnode;
16 | }
17 |
18 | /*
19 | * @Author: luhaifeng666 youzui@hotmail.com
20 | * @Date: 2022-08-01 09:01:09
21 | * @LastEditors: luhaifeng666
22 | * @LastEditTime: 2022-08-01 09:06:20
23 | * @Description:
24 | */
25 | var publicPropertiesMap = {
26 | $el: function (i) { return i.vnode.el; }
27 | };
28 | var PublicInstanceProxyHandlers = {
29 | get: function (_a, key) {
30 | var instance = _a._;
31 | var setupState = instance.setupState;
32 | // 通过 this.xxxx 获取值
33 | if (key in setupState) {
34 | return setupState[key];
35 | }
36 | // 通过 this.$el 获取值
37 | var publicGetter = publicPropertiesMap[key];
38 | if (publicGetter) {
39 | return publicGetter(instance);
40 | }
41 | }
42 | };
43 |
44 | /*
45 | * @Author: luhaifeng666 youzui@hotmail.com
46 | * @Date: 2022-07-10 09:53:01
47 | * @LastEditors: luhaifeng666
48 | * @LastEditTime: 2022-08-01 09:04:00
49 | * @Description:
50 | */
51 | function createComponentInstance(vnode) {
52 | var component = {
53 | vnode: vnode,
54 | type: vnode.type,
55 | setupState: {}
56 | };
57 | return component;
58 | }
59 | function setupComponent(instance) {
60 | // initProps()
61 | // initSlots()
62 | setupStatefulComponent(instance);
63 | }
64 | function setupStatefulComponent(instance) {
65 | var Component = instance.type;
66 | instance.proxy = new Proxy({ _: instance }, PublicInstanceProxyHandlers);
67 | var setup = Component.setup;
68 | if (setup) {
69 | var setupResult = setup();
70 | handleSetupResult(instance, setupResult);
71 | }
72 | }
73 | function handleSetupResult(instance, setupResult) {
74 | if (typeof setupResult === 'object') {
75 | instance.setupState = setupResult;
76 | }
77 | finishComponentSetup(instance);
78 | }
79 | function finishComponentSetup(instance) {
80 | var Component = instance.type;
81 | if (Component.render) {
82 | instance.render = Component.render;
83 | }
84 | }
85 |
86 | /*
87 | * @Author: luhaifeng666 youzui@hotmail.com
88 | * @Date: 2022-07-10 09:44:49
89 | * @LastEditors: luhaifeng666
90 | * @LastEditTime: 2022-08-01 08:57:37
91 | * @Description:
92 | */
93 | function render(vnode, container) {
94 | patch(vnode, container);
95 | }
96 | function patch(vnode, container) {
97 | var type = vnode.type;
98 | if (typeof type === 'string') {
99 | // 处理Element
100 | processElement(vnode, container);
101 | }
102 | else {
103 | // 处理组件
104 | processComponent(vnode, container);
105 | }
106 | }
107 | function processElement(vnode, container) {
108 | mountElement(vnode, container);
109 | }
110 | function mountElement(vnode, container) {
111 | var type = vnode.type, children = vnode.children, props = vnode.props;
112 | var el = (vnode.el = document.createElement(type));
113 | if (typeof children === 'string') {
114 | el.textContent = children;
115 | }
116 | else if (Array.isArray(children)) {
117 | mountChildren(vnode, el);
118 | }
119 | for (var key in props) {
120 | var val = props[key];
121 | el.setAttribute(key, val);
122 | }
123 | container.append(el);
124 | }
125 | function mountChildren(vnode, container) {
126 | vnode.children.forEach(function (child) {
127 | patch(child, container);
128 | });
129 | }
130 | function processComponent(vnode, container) {
131 | mountComponent(vnode, container);
132 | }
133 | function mountComponent(vnode, container) {
134 | var instance = createComponentInstance(vnode);
135 | setupComponent(instance);
136 | setupRenderEffect(instance, vnode, container);
137 | }
138 | function setupRenderEffect(instance, vnode, container) {
139 | var proxy = instance.proxy;
140 | var subTree = instance.type.render.call(proxy);
141 | patch(subTree, container);
142 | vnode.el = subTree.el;
143 | }
144 |
145 | /*
146 | * @Author: luhaifeng666 youzui@hotmail.com
147 | * @Date: 2022-07-10 09:39:37
148 | * @LastEditors: luhaifeng666
149 | * @LastEditTime: 2022-07-10 10:37:59
150 | * @Description:
151 | */
152 | function createApp(rootComponent) {
153 | return {
154 | mount: function (rootContainer) {
155 | var vnode = createVNode(rootComponent);
156 | render(vnode, rootContainer);
157 | }
158 | };
159 | }
160 |
161 | /*
162 | * @Author: luhaifeng666 youzui@hotmail.com
163 | * @Date: 2022-07-16 15:33:50
164 | * @LastEditors: luhaifeng666
165 | * @LastEditTime: 2022-07-17 16:33:23
166 | * @Description:
167 | */
168 | function h(type, props, children) {
169 | return createVNode(type, props, children);
170 | }
171 |
172 | export { createApp, h };
173 |
--------------------------------------------------------------------------------
/lib/mini-vue.cjs.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | Object.defineProperty(exports, '__esModule', { value: true });
4 |
5 | /*
6 | * @Author: luhaifeng666 youzui@hotmail.com
7 | * @Date: 2022-07-10 09:42:52
8 | * @LastEditors: luhaifeng666
9 | * @LastEditTime: 2022-08-01 08:54:23
10 | * @Description:
11 | */
12 | function createVNode(type, props, children) {
13 | var vnode = {
14 | type: type,
15 | props: props,
16 | children: children,
17 | el: null
18 | };
19 | return vnode;
20 | }
21 |
22 | /*
23 | * @Author: luhaifeng666 youzui@hotmail.com
24 | * @Date: 2022-08-01 09:01:09
25 | * @LastEditors: luhaifeng666
26 | * @LastEditTime: 2022-08-01 09:06:20
27 | * @Description:
28 | */
29 | var publicPropertiesMap = {
30 | $el: function (i) { return i.vnode.el; }
31 | };
32 | var PublicInstanceProxyHandlers = {
33 | get: function (_a, key) {
34 | var instance = _a._;
35 | var setupState = instance.setupState;
36 | // 通过 this.xxxx 获取值
37 | if (key in setupState) {
38 | return setupState[key];
39 | }
40 | // 通过 this.$el 获取值
41 | var publicGetter = publicPropertiesMap[key];
42 | if (publicGetter) {
43 | return publicGetter(instance);
44 | }
45 | }
46 | };
47 |
48 | /*
49 | * @Author: luhaifeng666 youzui@hotmail.com
50 | * @Date: 2022-07-10 09:53:01
51 | * @LastEditors: luhaifeng666
52 | * @LastEditTime: 2022-08-01 09:04:00
53 | * @Description:
54 | */
55 | function createComponentInstance(vnode) {
56 | var component = {
57 | vnode: vnode,
58 | type: vnode.type,
59 | setupState: {}
60 | };
61 | return component;
62 | }
63 | function setupComponent(instance) {
64 | // initProps()
65 | // initSlots()
66 | setupStatefulComponent(instance);
67 | }
68 | function setupStatefulComponent(instance) {
69 | var Component = instance.type;
70 | instance.proxy = new Proxy({ _: instance }, PublicInstanceProxyHandlers);
71 | var setup = Component.setup;
72 | if (setup) {
73 | var setupResult = setup();
74 | handleSetupResult(instance, setupResult);
75 | }
76 | }
77 | function handleSetupResult(instance, setupResult) {
78 | if (typeof setupResult === 'object') {
79 | instance.setupState = setupResult;
80 | }
81 | finishComponentSetup(instance);
82 | }
83 | function finishComponentSetup(instance) {
84 | var Component = instance.type;
85 | if (Component.render) {
86 | instance.render = Component.render;
87 | }
88 | }
89 |
90 | /*
91 | * @Author: luhaifeng666 youzui@hotmail.com
92 | * @Date: 2022-07-10 09:44:49
93 | * @LastEditors: luhaifeng666
94 | * @LastEditTime: 2022-08-01 08:57:37
95 | * @Description:
96 | */
97 | function render(vnode, container) {
98 | patch(vnode, container);
99 | }
100 | function patch(vnode, container) {
101 | var type = vnode.type;
102 | if (typeof type === 'string') {
103 | // 处理Element
104 | processElement(vnode, container);
105 | }
106 | else {
107 | // 处理组件
108 | processComponent(vnode, container);
109 | }
110 | }
111 | function processElement(vnode, container) {
112 | mountElement(vnode, container);
113 | }
114 | function mountElement(vnode, container) {
115 | var type = vnode.type, children = vnode.children, props = vnode.props;
116 | var el = (vnode.el = document.createElement(type));
117 | if (typeof children === 'string') {
118 | el.textContent = children;
119 | }
120 | else if (Array.isArray(children)) {
121 | mountChildren(vnode, el);
122 | }
123 | for (var key in props) {
124 | var val = props[key];
125 | el.setAttribute(key, val);
126 | }
127 | container.append(el);
128 | }
129 | function mountChildren(vnode, container) {
130 | vnode.children.forEach(function (child) {
131 | patch(child, container);
132 | });
133 | }
134 | function processComponent(vnode, container) {
135 | mountComponent(vnode, container);
136 | }
137 | function mountComponent(vnode, container) {
138 | var instance = createComponentInstance(vnode);
139 | setupComponent(instance);
140 | setupRenderEffect(instance, vnode, container);
141 | }
142 | function setupRenderEffect(instance, vnode, container) {
143 | var proxy = instance.proxy;
144 | var subTree = instance.type.render.call(proxy);
145 | patch(subTree, container);
146 | vnode.el = subTree.el;
147 | }
148 |
149 | /*
150 | * @Author: luhaifeng666 youzui@hotmail.com
151 | * @Date: 2022-07-10 09:39:37
152 | * @LastEditors: luhaifeng666
153 | * @LastEditTime: 2022-07-10 10:37:59
154 | * @Description:
155 | */
156 | function createApp(rootComponent) {
157 | return {
158 | mount: function (rootContainer) {
159 | var vnode = createVNode(rootComponent);
160 | render(vnode, rootContainer);
161 | }
162 | };
163 | }
164 |
165 | /*
166 | * @Author: luhaifeng666 youzui@hotmail.com
167 | * @Date: 2022-07-16 15:33:50
168 | * @LastEditors: luhaifeng666
169 | * @LastEditTime: 2022-07-17 16:33:23
170 | * @Description:
171 | */
172 | function h(type, props, children) {
173 | return createVNode(type, props, children);
174 | }
175 |
176 | exports.createApp = createApp;
177 | exports.h = h;
178 |
--------------------------------------------------------------------------------
/docs/miniVue/notes/reactivity/06_reactiveOrReadonly.md:
--------------------------------------------------------------------------------
1 |
8 | # isReactive & isReadOnly
9 |
10 | ::: tip
11 | 本篇笔记对应的分支号为: `main分支：abec34d`
12 | :::
13 |
14 | 到目前为止，我们已经初步实现了 `reactive` 以及 `readonly` 的基本功能。现在，我们需要添加两个方法用于判断某个对象是否是 `reactive` 对象或者 `readonly` 对象。
15 |
16 | ## 实现 isReactive
17 |
18 | 在实现之前，我们先来补充下 `reactive` 的测试用例：
19 |
20 | :::: code-group
21 | ::: code-group-item reactive.spec.ts
22 |
23 | ```ts{3,15-16}
24 | // src/reactivity/__tests__/reactive.spec.ts
25 |
26 | import { reactive, isReactive } from '../reactive'
27 |
28 | describe('reactive', () => {
29 | it('happy path', () => {
30 | const origin = { num: 0 }
31 | // 通过 reactive 创建响应式对象
32 | const reactiveData = reactive(origin)
33 | // 判断响应式对象与原对象不是同一个对象
34 | expect(reactiveData).not.toBe(origin)
35 | // 代理对象中的 num 值应与原对象中的相同
36 | expect(reactiveData.num).toBe(0)
37 | // 判断是否是 reactive 对象
38 | expect(isReactive(origin)).toBe(false)
39 | expect(isReactive(reactiveData)).toBe(true)
40 | })
41 | })
42 | ```
43 |
44 | :::
45 | ::::
46 |
47 | 根据测试用例，`isReactive` 方法接受一个对象作为入参，返回值为布尔值，用于判断传入的对象是否是 `reactive` 对象。那我们通过什么可以判断当前对象是否是 `reactive` 对象呢？
48 |
49 | 试想一下，如果传入 `isReactive` 的是 `reactive` 对象，那么它必然是个 `Proxy` 对象。还记得在上一篇 `readonly` 功能的实现中，我们给 `createGetter` 方法传入了一个 `isReadonly` 标记，用于判断是否是 `readonly` 对象么。**如果当前对象是个 `Proxy` 对象，并且 `isReadonly === false`**， 那么不就说明当前对象是个 `reactive` 对象了么！
50 |
51 | 顺着这个思路，要想触发 `get` 方法，我们可以定义一个静态标记 `__v_isReactive` 用于判断是否是 `reactive` 对象。当我们尝试获取传入对象的 `__v_isReactive` 属性时，就会触发 `get` 方法，此时，我们只要返回 `!isReadOnly` 即可：
52 |
53 | :::: code-group
54 | ::: code-group-item reactive.ts
55 |
56 | ```ts
57 | // src/reactivity/reactive.ts
58 |
59 | export const enum ReactiveFlags {
60 | IS_REACTIVE = '__v_isReactive'
61 | }
62 |
63 | // 判断是否是 reactive 对象
64 | export const isReactive = value => value[ReactiveFlags.IS_REACTIVE]
65 | ```
66 |
67 | :::
68 |
69 | ::: code-group-item baseHandlers.ts
70 |
71 | ```ts {13-15}
72 | // src/reactivity/baseHandlers.ts
73 |
74 | import { ReactiveFlags } from './reactive'
75 |
76 | /**
77 | * 用于生成 get 方法
78 | * @param isReadonly 是否是 readonly 对象
79 | * @returns
80 | */
81 | function createGetter(isReadonly = false) {
82 | return function(target, key) {
83 | // 判断是否是 reactive 对象
84 | if (key === ReactiveFlags.IS_REACTIVE) {
85 | return !isReadonly
86 | }
87 | const res = Reflect.get(target, key)
88 | // 收集依赖
89 | !isReadonly && track(target, key)
90 | return res
91 | }
92 | }
93 | ```
94 |
95 | :::
96 | ::::
97 |
98 | 现在，我们回过头来看下测试用例的运行结果，当我们传入的对象为普通对象时，测试用例报错，原因如下：
99 |
100 | 
101 |
102 | 预期返回结果是 `false`，结果返回的却是 `undefined`。这是为什么呢？
103 |
104 | 那是因为普通对象并不是 `Proxy` 对象，直接访问 `__v_isReactive` 属性时，并不会触发 `get` 方法，而普通对象上又不存在 `__v_isReactive` 标记，因此测试用例不会通过。而实际上普通对象也的确不是 `reactive` 对象，因此，我们需要对 `isReactive` 方法进行改造，直接返回 `!!value[ReactiveFlags.IS_REACTIVE]` 即可：
105 |
106 | :::: code-group
107 | ::: code-group-item reactive.ts
108 |
109 | ```ts
110 | export const isReactive = value => !!value[ReactiveFlags.IS_REACTIVE]
111 | ```
112 |
113 | :::
114 | ::::
115 |
116 | ## 实现 isReadOnly
117 |
118 | `isReadOnly` 的判断方式与 `isReactive` 有异曲同工之妙，皆是通过 `isReadOnly` 来进行判断的，只不过不用取反罢了。
119 |
120 | 我们先来补充下 `isReadonly` 的测试用例：
121 |
122 | :::: code-group
123 | ::: code-group-item readonly.spec.ts
124 |
125 | ```ts{9-10}
126 | // src/reactivity/__tests__/readonly.spec.ts
127 |
128 | it('happy path', () => {
129 | const original = { foo: 1, bar: { bar: 2 }}
130 | const wrapped = readonly(original)
131 | expect(wrapped).not.toBe(original)
132 | expect(wrapped.foo).toBe(1)
133 | // 判断是否是 readonly 对象
134 | expect(isReadonly(original)).toBe(false)
135 | expect(isReadonly(wrapped)).toBe(true)
136 | })
137 | ```
138 |
139 | :::
140 | ::::
141 |
142 | 因此，我们可以参照 `isReactive` 的实现方式，定义一个名为 `__v_isReadonly` 的静态标记，并在 `get` 方法中进行判断即可：
143 |
144 | :::: code-group
145 | ::: code-group-item reactive.ts
146 |
147 | ```ts
148 | // src/reactivity/reactive.ts
149 |
150 | export const enum ReactiveFlags {
151 | IS_REACTIVE = '__v_isReactive',
152 | IS_READONLY = '__v_isReadonly'
153 | }
154 |
155 | // 判断是否是 reactive 对象
156 | export const isReadonly = value => !!value[ReactiveFlags.IS_READONLY]
157 |
158 | // 判断是否是 readonly 对象
159 | export const isReadonly = value => !!value[ReactiveFlags.IS_READONLY]
160 | ```
161 |
162 | :::
163 |
164 | ::: code-group-item baseHandlers.ts
165 |
166 | ```ts {15-18}
167 | // src/reactivity/baseHandlers.ts
168 |
169 | import { ReactiveFlags } from './reactive'
170 |
171 | /**
172 | * 用于生成 get 方法
173 | * @param isReadonly 是否是 readonly 对象
174 | * @returns
175 | */
176 | function createGetter(isReadonly = false) {
177 | return function(target, key) {
178 | // 判断是否是 reactive 对象
179 | if (key === ReactiveFlags.IS_REACTIVE) {
180 | return !isReadonly
181 | } else if (key === ReactiveFlags.IS_READONLY) {
182 | // 判断是否是 readonly 对象
183 | return isReadonly
184 | }
185 | const res = Reflect.get(target, key)
186 | // 收集依赖
187 | !isReadonly && track(target, key)
188 | return res
189 | }
190 | }
191 | ```
192 |
193 | :::
194 | ::::
195 |
196 | 至此，我们就实现了 `isReactive` 以及 `isReadOnly` 功能。
197 |
--------------------------------------------------------------------------------
/docs/miniVue/notes/reactivity/13_computed.md:
--------------------------------------------------------------------------------
1 |
8 | # computed
9 |
10 | :::tip
11 | 本篇笔记对应的分支号为: `main分支： 139cae9`
12 | :::
13 |
14 | `computed` 接受一个 getter 函数，并根据 getter 的返回值返回一个 **不可变** 的响应式 `ref` 对象。
15 |
16 | ::: tip
17 | 其实 `computed` 还可以接受一个具有 `get` 和 `set` 函数的对象(参照 [computed](https://v3.cn.vuejs.org/api/computed-watch-api.html#computed) 这篇文档)，用来创建可写的 `ref` 对象，这个后期可以考虑实现下，这个章节只考虑第一种情况
18 | :::
19 |
20 | ## happy path
21 |
22 | 我们还是先从简单的 `happy path` 入手：
23 |
24 | :::: code-group
25 | ::: code-group-item computed.spec.ts
26 |
27 | ```ts
28 | // src/reactivity/__tests__/computed.spec.ts
29 |
30 | it("happy path", () => {
31 | const user = reactive({
32 | age: 1
33 | })
34 |
35 | const age = computed(() => user.age)
36 |
37 | expect(age.value).toBe(1)
38 | })
39 | ```
40 |
41 | :::
42 | ::::
43 |
44 | 根据测试用例我们可以得出：
45 |
46 | > 1. `computed` 接受一个函数（按照官方的说法，我们叫它 `getter`）;
47 | > 2. 返回一个 `ref` 对象，可以通过 `.value` 的方式去获取值
48 |
49 | 根据以上描述，我们新建 `computed.ts` 文件用于定义 `computed` 方法，并定义 `ComputedRefImpl` 类用于做后续处理：
50 |
51 | :::: code-group
52 | ::: code-group-item computed.ts
53 |
54 | ```ts
55 | // src/reactivity/computed.ts
56 | class ComputedRefImpl {
57 | private _getter: any
58 |
59 | constructor(getter) {
60 | this._getter = getter
61 | }
62 |
63 | get value() {
64 | return this._getter()
65 | }
66 | }
67 |
68 | export const computed = getter => new ComputedRefImpl(getter)
69 | ```
70 |
71 | :::
72 | ::::
73 |
74 | 这样一来，我们就已经初步实现了我们的功能。
75 |
76 | ## 实现 computed 的缓存功能
77 |
78 | 熟悉 `Vue` 的小伙伴们应该知道，无论是 `Vue2` 还是 `Vue3`，`computed` 都具有一个特性，那就是 **缓存**。
79 |
80 | > 1. 当 `computed` 中响应式的值没有发生变化的时候，`computed` 不会重复计算，也就是说 `getter` 不会重复执行，而是将上一次的计算结果直接返回。
81 | > 2. 只有当其中响应式的值发生变化时，`getter` 方法才会再次触发，并返回最新的值。
82 |
83 | 我们先来实现第一个特性。首先还是先通过测试用例来捋一捋逻辑：
84 |
85 | :::: code-group
86 | ::: code-group-item computed.spec.ts
87 |
88 | ```ts
89 | // src/reactivity/__tests__/computed.spec.ts
90 |
91 | it("should compute lazily", () => {
92 | const value = reactive({
93 | foo: 1
94 | })
95 |
96 | const getter = jest.fn(() => value.foo)
97 | const cValue = computed(getter)
98 |
99 | // lazy 不触发 get 时不会执行 getter 方法
100 | expect(getter).not.toHaveBeenCalled()
101 | // 触发 get 时执行 getter
102 | expect(cValue.value).toBe(1)
103 | expect(getter).toHaveBeenCalledTimes(1)
104 |
105 | // should not compute again
106 | cValue.value
107 | expect(getter).toHaveBeenCalledTimes(1)
108 | })
109 | ```
110 |
111 | :::
112 | ::::
113 |
114 | 那么这个缓存的功能应该怎么去实现呢？
115 |
116 | 这里我们可以定义一个开关 `_dirty`，用于控制是否需要触发 `getter` 方法，如果 `_dirty === true`, 那么就触发，否则不触发。之后定义 `_value` 用于缓存 `getter` 的执行结果：
117 |
118 | :::: code-group
119 | ::: code-group-item computed.ts
120 |
121 | ```ts{5-6,14-18}
122 | // src/reactivity/computed.ts
123 |
124 | class ComputedRefImpl {
125 | private _getter: any
126 | private _dirty: boolean = true // 标记是否需要触发 getter
127 | private _value: any // 缓存值
128 |
129 | constructor(getter) {
130 | this._getter = getter
131 | }
132 |
133 | get value() {
134 | // 值没有发生变化时，再次获取不会触发 getter
135 | if (this._dirty) {
136 | this._dirty = false
137 | this._value = this.getter()
138 | }
139 | return this._value
140 | }
141 | }
142 | ```
143 |
144 | :::
145 | ::::
146 |
147 | 现在，我们的 `computed` 就具有了缓存的能力，接下来我们需要实现第二个功能点。别急，开始之前，我们先来补充下测试用例：
148 |
149 | :::: code-group
150 | ::: code-group-item computed.spec.ts
151 |
152 | ```ts{21-31}
153 | // src/reactivity/__tests__/computed.spec.ts
154 |
155 | it("should compute lazily", () => {
156 | const value = reactive({
157 | foo: 1
158 | })
159 |
160 | const getter = jest.fn(() => value.foo)
161 | const cValue = computed(getter)
162 |
163 | // lazy
164 | expect(getter).not.toHaveBeenCalled()
165 |
166 | expect(cValue.value).toBe(1)
167 | expect(getter).toHaveBeenCalledTimes(1)
168 |
169 | // should not compute again
170 | cValue.value
171 | expect(getter).toHaveBeenCalledTimes(1)
172 |
173 | // should not compute until needed
174 | value.foo = 2
175 | expect(getter).toHaveBeenCalledTimes(1)
176 |
177 | // now it should computed
178 | expect(cValue.value).toBe(2)
179 | expect(getter).toHaveBeenCalledTimes(2)
180 |
181 | // should not compute again
182 | cValue.value
183 | expect(getter).toHaveBeenCalledTimes(2)
184 | })
185 | ```
186 |
187 | :::
188 | ::::
189 |
190 | 补充完测试用例，我们执行下测试命令，发现 `22-23行` 是通过的。因为我们目前只是设置了 `value.foo` 的值，并没有获取 `cValue.value` ，因此 `getter` 仍然只执行了一次，没毛病。
191 |
192 | 但是接下来当我们尝试获取 `cValue.value` 时，发现测试用例无法通过了：
193 |
194 | 
195 |
196 | 通过报错信息我们可以得知，`cValue.value` 的值并没有如我们所愿的变成2。原因也很简单，因为当我们再次获取 `cValue.value` 时，此时的 `_dirty === false`，因此不会重新执行 `getter` 方法，自然也就无法返回最新的值。
197 |
198 | 那么我们应该在什么时候将 `_dirty` 的值重新设置为 `true` 呢？其实在描述 **第二点** 的时候就已经透露了：**在响应式的值发生变化的时候**。在这里，我们的响应式的值其实指的就是 `value.foo`。
199 |
200 | 我们知道，当我们在设置 `value.foo` 的值时，会触发 `set` 方法，`set` 方法中会调用 `trigger` 方法触发依赖，所以我们只需要在触发依赖的过程中将 `_dirty` 设置为 `true` 即可。那我们要怎么才能做到这一点呢？
201 |
202 | ### 第一步：收集依赖
203 |
204 | 要想触发依赖，那得先收集依赖，不然谈何触发？
205 |
206 | 现在我们一起来回忆一下，**依赖收集** 的过程发生在 `get` 阶段，其中的 `track` 方法会收集 `activeEffect` 对象，也就是 `ReactiveEffect` 的实例对象。在上述测试用例中，什么时候会调用 `value.foo` 呢？答案是在首次获取 `cValue.value` 的时候。既然如此，我们就要想办法在此之前将 `this._dirty = true` 的操作存到 `activeEffect` 对象中，这样才能让 `track` 收集到。
207 |
208 | 既如此，我们就需要将 `ReactiveEffect` 抛出来，并在 `computed.ts` 中引入。并在初始化 `ComputedRefImpl` 时实例化它：
209 |
210 | :::: code-group
211 | ::: code-group-item effect.ts
212 |
213 | ```ts
214 | // src/reactivity/effect.ts
215 |
216 | export class ReactiveEffect {
217 | // 省略一大波代码
218 | }
219 | ```
220 |
221 | :::
222 |
223 | ::: code-group-item computed.ts
224 |
225 | ```ts
226 | // src/reactivity/computed.ts
227 | import { ReactiveEffect } from './effect'
228 |
229 | class ComputedRefImpl {
230 | private _getter: any
231 | private _dirty: boolean = true // 标记是否需要触发 getter
232 | private _value: any // 缓存值
233 | private _effect: ReactiveEffect
234 |
235 | constructor(getter) {
236 | this._getter = getter
237 | this._effect = new ReactiveEffect(this._getter, () => {
238 | if (!this._dirty) this._dirty = true
239 | })
240 | }
241 |
242 | get value() {
243 | // 值没有发生变化时，再次获取不会触发 getter
244 | if (this._dirty) {
245 | this._dirty = false
246 | this._value = this._effect.run()
247 | }
248 | return this._value
249 | }
250 | }
251 | ```
252 |
253 | :::
254 | ::::
255 |
256 | ::: warning 注意
257 | 这里我们将设置 `_dirty` 的操作放到了 `scheduler` 中。为什么这么做呢？因为在 `trigger` 的逻辑中，如果没有 `scheduler`, 则会执行 `run` 方法，这样一来就会多触发一次 `getter`。
258 | :::
259 |
260 | 这样一来，在设置 `value.foo` 时，便会执行到 `scheduler` 方法，进而执行 `if (!this._dirty) this._dirty = true` 。当我们再次获取 `cValue.value` 时，此时的 `_dirty === true`，之后便能返回最新的值了。而且重复访问 `cValue.value` 时也就不会再次触发 `getter` 方法了。
261 |
262 | 至此，我们的功能就已实现完毕~
263 |
--------------------------------------------------------------------------------
/docs/miniVue/notes/reactivity/05_readonly.md:
--------------------------------------------------------------------------------
1 |
8 | # readonly
9 |
10 | ::: tip
11 | 本篇笔记对应的分支号为: `main分支：4162b7d`
12 | :::
13 |
14 | 顾名思义，`readonly` 返回的对象是 `只读` 的，意味着其中的属性不可被修改。如果尝试对其属性进行修改，需要给出相应的提示。
15 |
16 | 它与 `reactive` 方法的异同之处如下：
17 |
18 | > 1. **同**： 它们都返回了一个 `Proxy` 对象;
19 | > 2. **异**： 由于 `readonly` 返回的对象属性不可更改，因此在 `readonly` 中无需进行 `依赖收集` 以及 `依赖触发`。
20 |
21 | ## 实现 readonly
22 |
23 | 根据上文的描述，我们来编写下 `readonly` 的测试用例：
24 |
25 | :::: code-group
26 | ::: code-group-item readonly.spec.ts
27 |
28 | ```ts
29 | // src/reactivity/__tests__/readonly.spec.ts
30 |
31 | import { readonly } from '../reactive'
32 |
33 | describe('readonly', () => {
34 | it('happy path', () => {
35 | const original = { foo: 1, bar: { bar: 2 }}
36 | const wrapped = readonly(original)
37 | expect(wrapped).not.toBe(original)
38 | expect(wrapped.foo).toBe(1)
39 | })
40 |
41 | it('warn when call set', () => {
42 | console.warn = jest.fn()
43 | const user = readonly({ age: 10 })
44 | user.age = 11
45 | // 当设置 readonly 对象的值时，需要发出告警
46 | expect(console.warn).toBeCalled()
47 | })
48 | })
49 | ```
50 |
51 | :::
52 | ::::
53 |
54 | 由于 `readonly` 无需进行 `依赖收集` 以及 `依赖触发`，所以它的实现其实非常简单：
55 |
56 | :::: code-group
57 | ::: code-group-item reactive.ts
58 |
59 | ```ts
60 | // src/reactivity/reactive.ts
61 |
62 | export function readonly(raw) {
63 | return new Proxy(raw, {
64 | get(target, key) {
65 | const res = Reflect.get(target, key)
66 | }
67 |
68 | set(target, key, value) {
69 | // 当尝试设置 readonly 的属性值时，需要给出告警提示
70 | console.warn(`${key} can't be setted!`, target)
71 | return true
72 | }
73 | })
74 | }
75 | ```
76 |
77 | :::
78 | ::::
79 |
80 | ## 代码优化
81 |
82 | 当当~又到了我们熟悉的代码优化环节~ 🥳
83 |
84 | 我们先将 `reactive` 以及 `readonly` 的逻辑放到一起来看下：
85 |
86 | :::: code-group
87 | ::: code-group-item reactive.ts
88 |
89 | ``` ts
90 | // src/reactivity/reactive.ts
91 |
92 | import { track, trigger } from './effect'
93 |
94 | export const reactive = (raw) => {
95 | return new Proxy(raw, {
96 | // 取值
97 | get(target, key) {
98 | const res = Reflect.get(target, key)
99 | // 收集依赖
100 | track(target, key)
101 | return res
102 | },
103 | // 赋值
104 | set(target, key, value) {
105 | const res = Reflect.set(target, key, value)
106 | // 触发依赖
107 | trigger(target, key)
108 | return res
109 | }
110 | })
111 | }
112 |
113 | export function readonly(raw) {
114 | return new Proxy(raw, {
115 | get(target, key) {
116 | const res = Reflect.get(target, key)
117 | return res
118 | }
119 |
120 | set(target, key, value) {
121 | // 当尝试设置 readonly 的属性值时，需要给出告警提示
122 | console.warn(`${key} can't be setted!`, target)
123 | return true
124 | }
125 | })
126 | }
127 | ```
128 |
129 | :::
130 | ::::
131 |
132 | 不难发现的是，两者的代码结构非常相似，此时，我们可以将类似的逻辑抽取出来。
133 |
134 | ### 抽取 get
135 |
136 | 两者 `get` 的区别在于是否需要进行依赖收集，我们可以定义一个函数 `createGetter` 用于返回 `get`，并通过传入 `isReadonly` 来决定返回的 `get` 是否需要进行依赖收集：
137 |
138 | :::: code-group
139 | ::: code-group-item reactive.ts
140 |
141 | ```ts
142 | // src/reactivity/reactive.ts
143 |
144 | function createGetter(isReadonly = false) {
145 | return function(target, key) {
146 | const res = Reflect.get(target, key)
147 | // 收集依赖
148 | !isReadonly && track(target, key)
149 | return res
150 | }
151 | }
152 | ```
153 |
154 | :::
155 | ::::
156 |
157 | 抽取之后，原先的代码就可以改写成这样：
158 |
159 | :::: code-group
160 | ::: code-group-item reactive.ts
161 |
162 | ``` ts
163 | // src/reactivity/reactive.ts
164 |
165 | import { track, trigger } from './effect'
166 |
167 | function createGetter(isReadonly = false) {
168 | return function(target, key) {
169 | const res = Reflect.get(target, key)
170 | // 收集依赖
171 | !isReadonly && track(target, key)
172 | return res
173 | }
174 | }
175 |
176 | export const reactive = (raw) => {
177 | return new Proxy(raw, {
178 | // 取值
179 | get: createGetter(),
180 | // 赋值
181 | set(target, key, value) {
182 | const res = Reflect.set(target, key, value)
183 | // 触发依赖
184 | trigger(target, key)
185 | return res
186 | }
187 | })
188 | }
189 |
190 | export function readonly(raw) {
191 | return new Proxy(raw, {
192 | get: createGetter(true),
193 |
194 | set(target, key, value) {
195 | // 当尝试设置 readonly 的属性值时，需要给出告警提示
196 | console.warn(`${key} can't be setted!`, target)
197 | return true
198 | }
199 | })
200 | }
201 | ```
202 |
203 | :::
204 | ::::
205 |
206 | 相较之前，代码就简洁了许多。
207 |
208 | ### 抽取 set
209 |
210 | 依葫芦画瓢，我们可以将 `set` 也抽取出来。由于 `readonly` 的 `set` 实现与 `reactive` 的相似之处不多，因此，我们暂时只对 `reactive` 的进行改造：
211 |
212 | :::: code-group
213 | ::: code-group-item reactive.ts
214 |
215 | ``` ts
216 | // src/reactivity/reactive.ts
217 |
218 | import { track, trigger } from './effect'
219 |
220 | function createGetter(isReadonly = false) {
221 | return function(target, key) {
222 | const res = Reflect.get(target, key)
223 | // 收集依赖
224 | !isReadonly && track(target, key)
225 | return res
226 | }
227 | }
228 |
229 | function createSetter() {
230 | return function(target, key, value) {
231 | const res = Reflect.set(target, key, value)
232 | // 触发依赖
233 | trigger(target, key)
234 | return res
235 | }
236 | }
237 |
238 | export const reactive = (raw) => {
239 | return new Proxy(raw, {
240 | // 取值
241 | get: createGetter(),
242 | // 赋值
243 | set: createSetter()
244 | }
245 |
246 | export function readonly(raw) {
247 | return new Proxy(raw, {
248 | get: createGetter(true),
249 |
250 | set(target, key, value) {
251 | // 当尝试设置 readonly 的属性值时，需要给出告警提示
252 | console.warn(`${key} can't be setted!`, target)
253 | return true
254 | }
255 | })
256 | }
257 | ```
258 |
259 | :::
260 | ::::
261 |
262 | ### 抽取 baseHandlers
263 |
264 | 代码优化到这里，我们来看看还有哪些可以被优化的部分。
265 |
266 | > 1. `reactive` 与 `readonly` 返回的都是 `Proxy` 代理对象，且都做了 `get` 与 `set` 操作的劫持处理。因此，我们可以创建一个 `baseHandlers` 对象，用于定义 `Proxy` 的 `get` 与 `set`，并将其抽取到单独的 `baseHandlers` 模块中;
267 | > 2. 在每次执行 `reactive` 或者 `readonly` 方法时，`createGetter` 与 `createSetter` 方法总是会被执行。此时，我们可以在首次执行时将执行结果缓存下来，以提升性能；
268 | > 3. 两者都返回了 `new Proxy`, 我们可以定义一个更加见名知意的方法 `createActiveObject` 用于返回 `Proxy` 对象。
269 |
270 | :::: code-group
271 | ::: code-group-item baseHandlers.ts
272 |
273 | ``` ts
274 | // src/reactivity/baseHandlers.ts
275 |
276 | import { track, trigger } from './effect'
277 |
278 | function createGetter(isReadonly = false) {
279 | return function(target, key) {
280 | const res = Reflect.get(target, key)
281 | // 收集依赖
282 | !isReadonly && track(target, key)
283 | return res
284 | }
285 | }
286 |
287 | function createSetter() {
288 | return function(target, key, value) {
289 | const res = Reflect.set(target, key, value)
290 | // 触发依赖
291 | trigger(target, key)
292 | return res
293 | }
294 | }
295 |
296 | // 缓存，避免重复调用
297 | const get = createGetter()
298 | const set = createSetter()
299 | const readonlyGet = createGetter(true)
300 |
301 | export const mutableHandlers = {
302 | get,
303 | set
304 | }
305 |
306 | export const readonlyHandlers = {
307 | get: readonlyGet,
308 | set(target, key, value) {
309 | // 当尝试设置 readonly 的属性值时，需要给出告警提示
310 | console.warn(`${key} can't be setted!`, target)
311 | return true
312 | }
313 | }
314 | ```
315 |
316 | ::: code-group-item reactive.ts
317 |
318 | ``` ts
319 | // src/reactivity/reactive.ts
320 |
321 | import { mutableHandlers, readonlyHandlers } from './baseHandlers'
322 |
323 | /**
324 | * 创建proxy对象
325 | * @param raw 需要被代理的对象
326 | * @param baseHandlers 代理拦截
327 | * @returns
328 | */
329 | function createActiveObject(raw, baseHandlers) {
330 | return new Proxy(raw, baseHandlers)
331 | }
332 |
333 | /**
334 | * 创建 reactive 对象
335 | * @param raw 需要被代理的对象
336 | * @returns
337 | */
338 | export const reactive = (raw) => {
339 | return createActiveObject(raw, mutableHandlers)
340 | }
341 |
342 | /**
343 | * 创建 readonly 对象
344 | * @param raw 需要被代理的对象
345 | * @returns
346 | */
347 | export const readonly = (raw) => {
348 | return createActiveObject(raw, readonlyHandlers)
349 | }
350 | ```
351 |
352 | :::
353 |
354 | :::
355 | ::::
356 |
357 | 至此，我们的优化告一段落~此时的代码就会显得更加简洁，可读性也会更强。
358 |
--------------------------------------------------------------------------------
/docs/miniVue/notes/reactivity/01_reactive.md:
--------------------------------------------------------------------------------
1 |
8 |
9 | # effect & reactive & 依赖收集 & 触发依赖
10 |
11 | ::: tip
12 | 本篇笔记对应的分支号为: `main分支：e8bb112`
13 | :::
14 |
15 | 在 Vue3 中，[reactive](https://v3.cn.vuejs.org/api/basic-reactivity.html#reactive) 方法被用于创建一个对象的 **响应式副本**。这里可以拆成两个部分来理解，即 **响应式** 以及 **副本**。
16 |
17 | ## 副本
18 |
19 | 我们先来看看 **副本** 这个部分。在实现 `reactive` 方法之前，我们先来写下它的测试用例，看看它需要做些啥：
20 |
21 | :::: code-group
22 | ::: code-group-item reactive.spec.ts
23 |
24 | ```ts
25 | // src/reactivity/__tests__/reactive.spec.ts
26 |
27 | describe('reactive', () => {
28 | it('happy path', () => {
29 | const origin = { num: 0 }
30 | // 通过 reactive 创建响应式对象
31 | const reactiveData = reactive(origin)
32 | // 判断响应式对象与原对象不是同一个对象
33 | expect(reactiveData).not.toBe(origin)
34 | // 代理对象中的 num 值应与原对象中的相同
35 | expect(reactiveData.num).toBe(0)
36 | })
37 | })
38 | ```
39 |
40 | :::
41 | ::::
42 |
43 | ### 实现 `reactive`
44 |
45 | 通过测试用例我们不难发现，其实 `reactive` 做的事情很简单，就是创建一个对象副本，那这个 **副本** 该怎么创建呢？答案是使用 [Proxy](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy) 👇
46 |
47 | :::: code-group
48 | ::: code-group-item reactive.ts
49 |
50 | ```ts
51 | // src/reactivity/reactive.ts
52 |
53 | export const reactive = (raw) => {
54 | return new Proxy(raw, {
55 | // 取值
56 | get(target, key) {
57 | const res = Reflect.get(target, key)
58 | return res
59 | },
60 | // 赋值
61 | set(target, key, value) {
62 | const res = Reflect.set(target, key, value)
63 | return res
64 | }
65 | })
66 | }
67 | ```
68 |
69 | :::
70 | ::::
71 |
72 | ## 响应式
73 |
74 | 现在我们已经可以通过 `reactive` 方法获取目标对象的 **副本** 了，那 **响应式** 部分又该如何实现呢？
75 |
76 | 所谓 **响应式**， 其实本质上就做了两件事情：
77 |
78 | > 1. 在读取对象属性时进行 `依赖收集`
79 | > 2. 在修改对象属性时执行 `依赖触发`
80 |
81 | 而这部分的逻辑则交由 `effect` 模块来实现。那 `依赖收集` 跟 `依赖触发` 具体是怎样的一个流程呢？请看下图：
82 |
83 | 
84 |
85 | 对上图的内容简单描述如下：
86 |
87 | > 1. 在读取响应式对象 `Target` 中的属性时进行 `依赖收集` 操作，所有的依赖会被收集到依赖池 `TargetMap` 中；
88 | > 2. 在设置响应式对象 `Target` 的属性值时执行 `依赖触发` 操作，会根据对应的 `Target` 以及 `key` 将依赖从依赖池 `TargetMap` 中取出并执行。
89 |
90 | 现在我们已经知道了 `effect` 模块所要实现的功能，依据上述内容，先来编写下测试用例：
91 |
92 | :::: code-group
93 | ::: code-group-item effect.spec.ts
94 |
95 | ```ts {14}
96 | // src/reactivity/__tests__/effect.spec.ts
97 |
98 | describe('effect', () => {
99 | it('happy path', () => {
100 | // 创建响应式对象
101 | const user = reactive({
102 | age: 10
103 | })
104 | let nextAge
105 | effect(() => {
106 | nextAge = user.age + 1
107 | })
108 | // 传入 effect 的方法会被立即执行一次
109 | expect(nextAge).toBe(11)
110 | // 修改响应式对象的属性值
111 | user.age++
112 | // 传入 effect 的方法会再次被执行
113 | expect(nextAge).toBe(12)
114 | })
115 | })
116 | ```
117 |
118 | :::
119 | ::::
120 |
121 | ### 实现 `effect`
122 |
123 | 接下来我们需要实现 `effect` 模块的功能。
124 |
125 | 根据上面的描述，`effect` 接受一个函数作为参数，既如此先定义一下 `effect` 方法：
126 |
127 | :::: code-group
128 | ::: code-group-item effect.ts
129 |
130 | ```ts
131 | // src/reactivity/effect.ts
132 |
133 | export function effect(fn) {}
134 | ```
135 |
136 | :::
137 | ::::
138 |
139 | 接下来，我们需要定义依赖池 `targetMap` 用于存放依赖。依赖池中存放的是响应式对象 `target` 所对应的依赖，需要使用对象类型作 key 的话，那么使用 [Map](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map) 自然再合适不过啦：
140 |
141 | :::: code-group
142 | ::: code-group-item effect.ts
143 |
144 | ```ts
145 | // src/reactivity/effect.ts
146 |
147 | const targetMap = new Map()
148 |
149 | export function effect(fn) {}
150 | ```
151 |
152 | :::
153 | ::::
154 |
155 | 好了，现在存放依赖的地方有了，那么我们就开始收集它们吧~
156 |
157 | 上文中我们提到，`收集依赖` 的操作是在读取响应式对象 `target` 中的属性时进行的。还记得 `target` 对象是通过 `Proxy` 创建出来的么？在读取 `target` 的属性时，必然会触发 `get` 方法，那么 `收集依赖` 的操作也应该在 `get` 方法中进行。
158 |
159 | 我们先来定义一个方法 `tarck` 用于依赖收集，并在 `reactive.ts` 中引入它，以便在 `get` 方法中进行调用：
160 |
161 | :::: code-group
162 | ::: code-group-item effect.ts
163 |
164 | ```ts
165 | // src/reactivity/effect.ts
166 |
167 | const targetMap = new Map()
168 |
169 | /**
170 | * 收集依赖
171 | * @param target 需要收集依赖的对象
172 | * @param key 收集该key所对应的依赖
173 | */
174 | export function track(target, key) {
175 | }
176 |
177 | export function effect(fn) {}
178 | ```
179 |
180 | :::
181 |
182 | ::: code-group-item reactive.ts
183 |
184 | ```ts
185 |
186 | // src/reactivity/reactive.ts
187 |
188 | import { track } from './effect'
189 |
190 | export const reactive = (raw) => {
191 | return new Proxy(raw, {
192 | // 取值
193 | get(target, key) {
194 | const res = Reflect.get(target, key)
195 | // 收集依赖
196 | track(target, key)
197 | return res
198 | },
199 | // 赋值
200 | set(target, key, value) {
201 | const res = Reflect.set(target, key, value)
202 | return res
203 | }
204 | })
205 | }
206 | ```
207 |
208 | :::
209 | ::::
210 |
211 | 接下来，我们需要实现 `track` 这部分的功能。在动手实现之前，我们先来捋一捋 `track` 需要做哪些事情:
212 |
213 | > 1. 由于在初始化时依赖池是空的（也为了避免覆盖），所以在存入 `targetMap` 依赖池之前，需要先判断依赖池中是否已经存在 `target` 所对应的依赖容器 `depsMap`：
214 | > - 如果存在，则取出 `depsMap`;
215 | > - 否则新建一个 `depsMap`, 并将其存入到依赖池 `targetMap` 中;
216 | > 2. 从依赖容器 `depsMap` 中取出响应式对象 `target` 对应属性的依赖 `deps`，由 `步骤1` 可知，`depsMap` 可能是空的，因此也需要对 `deps` 进行判空处理：
217 | > - 如果存在，则取出，并将依赖存入
218 | > - 如果不存在，则新建一个 `deps`，将依赖存入其中，并将 `deps` 存入对应属性的依赖容器 `depsMap` 中。为了避免重复收集依赖，此处使用 [Set](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set) 进行存储。
219 |
220 | 为了方便理解，我们来一起看下流程图:
221 |
222 | 
223 |
224 | 代码实现如下：
225 |
226 | :::: code-group
227 | ::: code-group-item effect.ts
228 |
229 | ```ts {25}
230 | // src/reactivity/effect.ts
231 |
232 | const targetMap = new Map()
233 |
234 | /**
235 | * 收集依赖
236 | * @param target 需要收集依赖的对象
237 | * @param key 收集该key所对应的依赖
238 | */
239 | export function track(target, key) {
240 | // 查找该对象对应的依赖池
241 | let depsMap = targetMap.get(target)
242 | // 如果没有（首次初始化时），则创建新的依赖池
243 | if (!depsMap) {
244 | depsMap = new Map()
245 | targetMap.set(target, depsMap)
246 | }
247 | // 从获取到的依赖池中获取该key所对应的依赖列表
248 | let deps = depsMap.get(key)
249 | // 如果没有，则新建一个该key对应的列表
250 | if (!deps) {
251 | deps = new Set()
252 | depsMap.set(key, deps)
253 | }
254 | // TODO 将依赖对象保存到列表中
255 | }
256 |
257 | export function effect(fn) {}
258 | ```
259 |
260 | :::
261 | ::::
262 |
263 | 好，代码写到这里的时候，我们遇到了一个
264 |
265 | ::: warning 问题：
266 | **需要被收集的依赖在 `effect` 方法中，在 `tarck` 里要怎么获取到这个依赖呢？**
267 | :::
268 |
269 | 针对这个问题，我们可以通过定义一个用于存储依赖的全局变量 `activeEffect` 来解决解决这个问题。那我们直接把依赖塞到 `activeEffect` 中就完事儿了么？当然。。。。
270 |
271 | 
272 |
273 | 不是！如果只单单为了实现这个功能，无可厚非，但是后续我们还有其他操作（为了代码的健壮性，可读性， 可扩展性），这里我们定义 `ReactiveEffect` 类将依赖收集起来，之后将该类的实例赋值给 `activeEffect` 即可：
274 |
275 | :::: code-group
276 | ::: code-group-item effect.ts
277 |
278 | ```ts {3,13,14,41,48}
279 | // src/reactivity/effect.ts
280 |
281 | let activeEffect
282 |
283 | class ReactiveEffect {
284 | private _fn: any
285 |
286 | constructor(fn) {
287 | this._fn = fn
288 | }
289 |
290 | run() {
291 | activeEffect = this
292 | this._fn()
293 | }
294 | }
295 |
296 | const targetMap = new Map()
297 |
298 | /**
299 | * 收集依赖
300 | * @param target 需要收集依赖的对象
301 | * @param key 收集该key所对应的依赖
302 | */
303 | export function track(target, key) {
304 | // 查找该对象对应的依赖池
305 | let depsMap = targetMap.get(target)
306 | // 如果没有（首次初始化时），则创建新的依赖池
307 | if (!depsMap) {
308 | depsMap = new Map()
309 | targetMap.set(target, depsMap)
310 | }
311 | // 从获取到的依赖池中获取该key所对应的依赖列表
312 | let deps = depsMap.get(key)
313 | // 如果没有，则新建一个该key对应的列表
314 | if (!deps) {
315 | deps = new Set()
316 | depsMap.set(key, deps)
317 | }
318 | // 将依赖对象保存到列表中
319 | deps.add(activeEffect)
320 | }
321 |
322 | export function effect(fn) {
323 | // 实例化 ReactiveEffect 类，并将依赖传入
324 | const _effect = new ReactiveEffect(fn)
325 |
326 | _effect.run()
327 | }
328 | ```
329 |
330 | :::
331 | ::::
332 |
333 | ::: warning 注意
334 | 这里需要注意的是，传入 `effect` 中的方法会被立即执行一次（可以回看上述测试用例中的 `第14行代码`）。所以 `ReactiveEffect` 暴露的 `run` 方法中除了要将依赖存入全局变量 `activeEffect` 中，还得将传入的依赖返回出来用以执行。
335 | :::
336 |
337 | 到目前为止，`依赖收集` 的功能就已经实现了。接下来便轮到 `依赖触发` 了。相较于 `依赖收集`，`依赖触发` 就简单了，只需要根据传入的 `target` 以及对应的属性 `key`，将依赖项取出执行便可。
338 |
339 | 这里我们在 `effect.ts` 中定义一个 `trigger` 方法用于触发依赖，之后在 `reactive.ts` 中引入。由于触发依赖发生在修改响应式对象 `target` 的属性阶段，所以需要放到 `set` 中执行:
340 |
341 | :::: code-group
342 | ::: code-group-item effect.ts
343 |
344 | ```ts
345 | // src/reactivity/effect.ts
346 |
347 | /**
348 | * 触发依赖
349 | * @param target 触发依赖的对象
350 | * @param key 触发该key对应的依赖
351 | */
352 | export function trigger(target, key) {
353 | // 根据对象与key获取到所有的依赖，并执行
354 | const depsMap = targetMap.get(target)
355 | const deps = depsMap.get(key)
356 | for(const dep of deps) {
357 | dep.run()
358 | }
359 | }
360 | ```
361 |
362 | :::
363 |
364 | ::: code-group-item reactive.ts
365 |
366 | ```ts
367 | // src/reactivity/reactive.ts
368 |
369 | import { track, trigger } from './effect'
370 |
371 | export const reactive = (raw) => {
372 | return new Proxy(raw, {
373 | // 取值
374 | get(target, key) {
375 | const res = Reflect.get(target, key)
376 | // 收集依赖
377 | track(target, key)
378 | return res
379 | },
380 | // 赋值
381 | set(target, key, value) {
382 | const res = Reflect.set(target, key, value)
383 | // 触发依赖
384 | trigger(target, key)
385 | return res
386 | }
387 | })
388 | }
389 | ```
390 |
391 | :::
392 | ::::
393 |
394 | 至此，`依赖收集` & `触发依赖` 的功能就完成啦~
395 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | /* Visit https://aka.ms/tsconfig.json to read more about this file */
4 |
5 | /* Projects */
6 | // "incremental": true, /* Enable incremental compilation */
7 | // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */
8 | // "tsBuildInfoFile": "./", /* Specify the folder for .tsbuildinfo incremental compilation files. */
9 | // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects */
10 | // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */
11 | // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */
12 |
13 | /* Language and Environment */
14 | "target": "es5" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
15 | "lib": ["es2015", "DOM"], /* Specify a set of bundled library declaration files that describe the target runtime environment. */
16 | // "jsx": "preserve", /* Specify what JSX code is generated. */
17 | // "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */
18 | // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */
19 | // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */
20 | // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
21 | // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using `jsx: react-jsx*`.` */
22 | // "reactNamespace": "", /* Specify the object invoked for `createElement`. This only applies when targeting `react` JSX emit. */
23 | // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */
24 | // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */
25 |
26 | /* Modules */
27 | "module": "esnext" /* Specify what module code is generated. */,
28 | // "rootDir": "./", /* Specify the root folder within your source files. */
29 | // "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */
30 | // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */
31 | // "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */
32 | // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */
33 | // "typeRoots": [], /* Specify multiple folders that act like `./node_modules/@types`. */
34 | // "types": ["jest"], /* Specify type package names to be included without being referenced in a source file. */
35 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
36 | // "resolveJsonModule": true, /* Enable importing .json files */
37 | // "noResolve": true, /* Disallow `import`s, `require`s or `
136 |
137 |
8 |
12 |
16 |
17 |
31 |
32 | 实现
33 |
35 |
36 |
53 |
54 |
74 |
75 |
96 |
97 | 实现
98 |
101 |
102 |
106 |
107 |
109 |
110 |
116 |
117 |
121 |
122 |
136 |
137 |
159 |
160 |
181 |
182 |
211 |
212 |
216 |
220 |
221 |
271 |
272 |
275 |
278 |
279 |
295 |
296 |
319 |
320 |
322 |
--------------------------------------------------------------------------------
effect & reactive & 依赖收集 & 触发依赖
9 |TIP
10 |本篇笔记对应的分支号为: main分支：e8bb112
在 Vue3 中，reactive
副本
14 |我们先来看看 副本 这个部分。在实现 reactive 方法之前，我们先来写下它的测试用例，看看它需要做些啥：
// src/reactivity/__tests__/reactive.spec.ts
18 |
19 | describe('reactive', () => {
20 | it('happy path', () => {
21 | const origin = { num: 0 }
22 | // 通过 reactive 创建响应式对象
23 | const reactiveData = reactive(origin)
24 | // 判断响应式对象与原对象不是同一个对象
25 | expect(reactiveData).not.toBe(origin)
26 | // 代理对象中的 num 值应与原对象中的相同
27 | expect(reactiveData.num).toBe(0)
28 | })
29 | })
30 | 实现 reactive
33 | 通过测试用例我们不难发现，其实 reactive 做的事情很简单，就是创建一个对象副本，那这个 副本 该怎么创建呢？答案是使用 Proxy
// src/reactivity/reactive.ts
37 |
38 | export const reactive = (raw) => {
39 | return new Proxy(raw, {
40 | // 取值
41 | get(target, key) {
42 | const res = Reflect.get(target, key)
43 | return res
44 | },
45 | // 赋值
46 | set(target, key, value) {
47 | const res = Reflect.set(target, key, value)
48 | return res
49 | }
50 | })
51 | }
52 | 响应式
55 |现在我们已经可以通过 reactive 方法获取目标对象的 副本 了，那 响应式 部分又该如何实现呢？
所谓 响应式， 其实本质上就做了两件事情：
57 |58 |63 |59 |
62 |- 在读取对象属性时进行
60 |依赖收集- 在修改对象属性时执行
61 |依赖触发
而这部分的逻辑则交由 effect 模块来实现。那 依赖收集 跟 依赖触发 具体是怎样的一个流程呢？请看下图：
对上图的内容简单描述如下：
66 |67 |72 |68 |
71 |- 在读取响应式对象
69 |Target中的属性时进行依赖收集操作，所有的依赖会被收集到依赖池TargetMap中；- 在设置响应式对象
70 |Target的属性值时执行依赖触发操作，会根据对应的Target以及key将依赖从依赖池TargetMap中取出并执行。
现在我们已经知道了 effect 模块所要实现的功能，依据上述内容，先来编写下测试用例：
// src/reactivity/__test__/effect.spec.ts
76 |
77 | describe('effect', () => {
78 | it('happy path', () => {
79 | // 创建响应式对象
80 | const user = reactive({
81 | age: 10
82 | })
83 | let nextAge
84 | effect(() => {
85 | nextAge = user.age + 1
86 | })
87 | // 传入 effect 的方法会被立即执行一次
88 | expect(nextAge).toBe(11)
89 | // 修改响应式对象的属性值
90 | user.age++
91 | // 传入 effect 的方法会再次被执行
92 | expect(nextAge).toBe(12)
93 | })
94 | })
95 | 实现 effect
98 | 接下来我们需要实现 effect 模块的功能。
根据上面的描述，effect 接受一个函数作为参数，既如此先定义一下 effect 方法：
// src/reactivity/effect.ts
103 |
104 | export function effect(fn) {}
105 | 接下来，我们需要定义依赖池 targetMap 用于存放依赖。依赖池中存放的是响应式对象 target 所对应的依赖，需要使用对象类型作 key 的话，那么使用 Map
// src/reactivity/effect.ts
111 |
112 | const targetMap = new Map()
113 |
114 | export function effect(fn) {}
115 | 好了，现在存放依赖的地方有了，那么我们就开始收集它们吧~
118 |上文中我们提到，收集依赖 的操作是在读取响应式对象 target 中的属性时进行的。还记得 target 对象是通过 Proxy 创建出来的么？在读取 target 的属性时，必然会触发 get 方法，那么 收集依赖 的操作也应该在 get 方法中进行。
我们先来定义一个方法 tarck 用于依赖收集，并在 reactive.ts 中引入它，以便在 get 方法中进行调用：
// src/reactivity/effect.ts
123 |
124 | const targetMap = new Map()
125 |
126 | /**
127 | * 收集依赖
128 | * @param target 需要收集依赖的对象
129 | * @param key 收集该key所对应的依赖
130 | */
131 | export function track(target, key) {
132 | }
133 |
134 | export function effect(fn) {}
135 |
138 | // src/reactivity/reactive.ts
139 |
140 | import { track } from './effect'
141 |
142 | export const reactive = (raw) => {
143 | return new Proxy(raw, {
144 | // 取值
145 | get(target, key) {
146 | const res = Reflect.get(target, key)
147 | // 收集依赖
148 | track(target, key)
149 | return res
150 | },
151 | // 赋值
152 | set(target, key, value) {
153 | const res = Reflect.set(target, key, value)
154 | return res
155 | }
156 | })
157 | }
158 | 接下来，我们需要实现 track 这部分的功能。在动手实现之前，我们先来捋一捋 track 需要做哪些事情:
162 |177 |163 |
176 |- 由于在初始化时依赖池是空的（也为了避免覆盖），所以在存入
169 |targetMap依赖池之前，需要先判断依赖池中是否已经存在target所对应的依赖容器depsMap： 164 |165 |
168 |- 如果存在，则取出
166 |depsMap;- 否则新建一个
167 |depsMap, 并将其存入到依赖池targetMap中;- 从依赖容器
175 |depsMap中取出响应式对象target对应属性的依赖deps，由步骤1可知，depsMap可能是空的，因此也需要对deps进行判空处理： 170 |171 |
174 |- 如果存在，则取出，并将依赖存入
172 |- 如果不存在，则新建一个
173 |deps，将依赖存入其中，并将deps存入对应属性的依赖容器depsMap中。为了避免重复收集依赖，此处使用 Set进行存储。
为了方便理解，我们来一起看下流程图:
178 |
代码实现如下：
180 |// src/reactivity/effect.ts
183 |
184 | const targetMap = new Map()
185 |
186 | /**
187 | * 收集依赖
188 | * @param target 需要收集依赖的对象
189 | * @param key 收集该key所对应的依赖
190 | */
191 | export function track(target, key) {
192 | // 查找该对象对应的依赖池
193 | let depsMap = targetMap.get(target)
194 | // 如果没有（首次初始化时），则创建新的依赖池
195 | if (!depsMap) {
196 | depsMap = new Map()
197 | targetMap.set(target, depsMap)
198 | }
199 | // 从获取到的依赖池中获取该key所对应的依赖列表
200 | let deps = depsMap.get(key)
201 | // 如果没有，则新建一个该key对应的列表
202 | if (!deps) {
203 | deps = new Set()
204 | depsMap.set(key, deps)
205 | }
206 | // TODO 将依赖对象保存到列表中
207 | }
208 |
209 | export function effect(fn) {}
210 | 好，代码写到这里的时候，我们遇到了一个
213 |问题：
214 |需要被收集的依赖在 effect 方法中，在 tarck 里要怎么获取到这个依赖呢？
针对这个问题，我们可以通过定义一个用于存储依赖的全局变量 activeEffect 来解决解决这个问题。那我们直接把依赖塞到 activeEffect 中就完事儿了么？当然。。。。
不是！如果只单单为了实现这个功能，无可厚非，但是后续我们还有其他操作（为了代码的健壮性，可读性， 可扩展性），这里我们定义 ReactiveEffect 类将依赖收集起来，之后将该类的实例赋值给 activeEffect 即可：
// src/reactivity/effect.ts
222 |
223 | let activeEffect
224 |
225 | class ReactiveEffect {
226 | private _fn: any
227 |
228 | constructor(fn) {
229 | this._fn = fn
230 | }
231 |
232 | run() {
233 | activeEffect = this
234 | this._fn()
235 | }
236 | }
237 |
238 | const targetMap = new Map()
239 |
240 | /**
241 | * 收集依赖
242 | * @param target 需要收集依赖的对象
243 | * @param key 收集该key所对应的依赖
244 | */
245 | export function track(target, key) {
246 | // 查找该对象对应的依赖池
247 | let depsMap = targetMap.get(target)
248 | // 如果没有（首次初始化时），则创建新的依赖池
249 | if (!depsMap) {
250 | depsMap = new Map()
251 | targetMap.set(target, depsMap)
252 | }
253 | // 从获取到的依赖池中获取该key所对应的依赖列表
254 | let deps = depsMap.get(key)
255 | // 如果没有，则新建一个该key对应的列表
256 | if (!deps) {
257 | deps = new Set()
258 | depsMap.set(key, deps)
259 | }
260 | // 将依赖对象保存到列表中
261 | deps.add(activeEffect)
262 | }
263 |
264 | export function effect(fn) {
265 | // 实例化 ReactiveEffect 类，并将依赖传入
266 | const _effect = new ReactiveEffect(fn)
267 |
268 | _effect.run()
269 | }
270 | 注意
273 |这里需要注意的是，传入 effect 中的方法会被立即执行一次（可以回看上述测试用例中的 第14行代码）。所以 ReactiveEffect 暴露的 run 方法中除了要将依赖存入全局变量 activeEffect 中，还得将传入的依赖返回出来用以执行。
到目前为止，依赖收集 的功能就已经实现了。接下来便轮到 依赖触发 了。相较于 依赖收集，依赖触发 就简单了，只需要根据传入的 target 以及对应的属性 key，将依赖项取出执行便可。
这里我们在 effect.ts 中定义一个 trigger 方法用于触发依赖，之后在 reactive.ts 中引入。由于触发依赖发生在修改响应式对象 target 的属性阶段，所以需要放到 set 中执行:
// src/reactivity/effect.ts
280 |
281 | /**
282 | * 触发依赖
283 | * @param target 触发依赖的对象
284 | * @param key 触发该key对应的依赖
285 | */
286 | export function trigger(target, key) {
287 | // 根据对象与key获取到所有的依赖，并执行
288 | const depsMap = targetMap.get(target)
289 | const deps = depsMap.get(key)
290 | for(const dep of deps) {
291 | dep.run()
292 | }
293 | }
294 | // src/reactivity/reactive.ts
297 |
298 | import { track, trigger } from './effect'
299 |
300 | export const reactive = (raw) => {
301 | return new Proxy(raw, {
302 | // 取值
303 | get(target, key) {
304 | const res = Reflect.get(target, key)
305 | // 收集依赖
306 | track(target, key)
307 | return res
308 | },
309 | // 赋值
310 | set(target, key, value) {
311 | const res = Reflect.set(target, key, value)
312 | // 触发依赖
313 | trigger(target, key)
314 | return res
315 | }
316 | })
317 | }
318 | 至此，依赖收集 & 触发依赖 的功能就完成啦~