mirror of
https://github.com/NohamR/knowledge-kit.git
synced 2026-05-25 04:17:17 +00:00
54 lines
1.9 KiB
Markdown
54 lines
1.9 KiB
Markdown
# 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;
|
||
}
|
||
```
|
||
|