feat: 浏览器渲染原理

Chapter2 - Web FrontEnd/2.44.md

@@ -0,0 +1,53 @@
+# Vue 核心原理探究   
+
+## 一、动手做一个超简易 Vue
+
+先简单分析下 Vue 做了什么，巴拉巴拉，好多功能。就说一个最基础的，数据改变了页面就改变。如何实现？
+
+1. `Object.defineProperty` 提供的 getter、setter 便可以拦截到所有 getter 的使用方，做到依赖收集
+2. 依赖收集：getter 方法内部可以知道谁在调用，此时可以做依赖收集。因为可能某个使用的方法（getFullName）会被调用多次，所以需要用 set 去收集，保持唯一。且给 window 对象上挂载一个内部属性的方式，来记录谁去调用过 getter。收集后立马清空 window 对象的私有属性值
+3. 派发执行：当数据改变的时候，也就触发到 setter，此时 setter 内部将该属性收集到的依赖方全部调用一遍方法。
+
+```js
+
+/**
+ * 观察数据对象，数据驱动
+ * 
+ * @param {any} obj 
+ */
+function observe(obj) {
+    for (const key in obj) {
+        let getFunctionCallers = new Set();
+        let internalValue = obj[key];
+            Object.defineProperty(obj, key, {
+            set: function (newValue) {
+                internalValue = newValue;
+                // set 完立即调用所有依赖 getter 的方法
+                for (const getCaller of getFunctionCallers) {
+                    getCaller();
+                }
+            },
+            get: function () {
+                // 依赖收集
+                if (window.__internalGetFunction) {
+                    getFunctionCallers.add(window.__internalGetFunction);
+                }
+                return internalValue;
+            }
+        })
+    }
+}
+
+
+/**
+ * 用于依赖收集，将原始方法绑定到 window 的私有属性上
+ * 
+ * @param {any} originalFunction 
+ */
+function getFunctionProxy (originalFunction) {
+    window.__internalGetFunction = originalFunction;
+    originalFunction();   
+    window.__internalGetFunction = null;
+}
+```
+