前言
1.此版本是vue1.0的版本，watcher的監(jiān)聽粒度為頁面級(jí)(出現(xiàn)多少引用數(shù)據(jù)就有多少個(gè)whater,2.0會(huì)小到組件級(jí)別)
2.主要是為了了解依賴收集的過程
核心思想：（你可以把下面的代碼看完后在回頭品一下）
- 一個(gè)Dep對(duì)應(yīng)一個(gè)Key,多個(gè){{}}對(duì)應(yīng)多個(gè)Watcher 統(tǒng)一由Dep管理
- 初始化時(shí)，通過編譯分析界面節(jié)點(diǎn)，做編譯操作，頁面初始化也完成了画恰，另外根據(jù)頁面上的表達(dá)式產(chǎn)生對(duì)應(yīng)的Watcher
- 每創(chuàng)建一個(gè)Watcher實(shí)例會(huì)把Water實(shí)例通過賦值操作賦值給Dep.target靜態(tài)變量，然后訪問執(zhí)行defineReactive中的get
dep.addWatcher(Dep.target);，這時(shí)候數(shù)據(jù)已經(jīng)與Dep產(chǎn)生聯(lián)系遭贸。- 當(dāng)頁面數(shù)據(jù)發(fā)生更改的時(shí)候，觸發(fā)set方法心软，這個(gè)時(shí)候執(zhí)行
Dep.notify()方法 通知內(nèi)部屬性watchers數(shù)組實(shí)例執(zhí)行update()方法 執(zhí)行對(duì)應(yīng)的更新回調(diào)操作壕吹。
目標(biāo)
- {{}}插值表達(dá)式的解析
- a-model指令的實(shí)現(xiàn)
只為說明發(fā)布訂閱
測(cè)試文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" a-model="name" />
<p>{{name}}</p>
<p>{{name}}</p>
</div>
</body>
</html>
<script src="Dep.js"></script>
<script src="Watcher.js"></script>
<script src="AVue.js"></script>
<script src="Compiler.js"></script>
<script>
//一個(gè)key對(duì)應(yīng)一個(gè)dep 多個(gè)插值表達(dá)式
let app = new AVue({
el: "#app",
data: {
name: "測(cè)試",
a: 1,
}
});
console.log(app);
</script>
注意這里是name.a 是深層次的獲取和修改
1.Dep.js依賴搜集管理類 一個(gè)key對(duì)應(yīng)一個(gè)dep
2.Watcher.js數(shù)據(jù)監(jiān)聽類 一個(gè)Dep對(duì)應(yīng)多個(gè)Watcher 頁面多個(gè){{}} v-text 值輸出對(duì)應(yīng)一個(gè)Watcher事例(vue2.0以上是組件級(jí)別一個(gè)組件對(duì)應(yīng)一個(gè)Watcher)
3.AVue.js核心文件啦~
4.Compiler.js dom級(jí)別的編譯器，正常情況是虛擬dom render的時(shí)候做關(guān)聯(lián)
AVue.js
class AVue {
constructor(options) {
this.$options = options;
this.$data = options.data;
//這個(gè)是多余的 目的是為了測(cè)試一個(gè){{}}對(duì)應(yīng)一個(gè)wahter
this.deps = [];
this.observe(this.$data);
new Compiler(options.el, this);
}
//數(shù)據(jù)響應(yīng)
observe(Value) {
if (!Value || typeof Value !== "object") {
return;
}
Object.keys(Value).forEach(key => {
this.defineReactive(Value, key, Value[key]);
//代理
this.proxyData(key);
});
}
//數(shù)據(jù)響應(yīng) val作為閉包 存取都是用臨時(shí)變量 防止出現(xiàn)死循環(huán)
defineReactive(obj, key, val) {
//遞歸
this.observe(val);
//做依賴收集 為什么會(huì)寫在這里呢糯累？寫在這里實(shí)例不會(huì)多創(chuàng)建算利，也是對(duì)應(yīng)的一個(gè)key對(duì)應(yīng)一個(gè)實(shí)例
let dep = new Dep();
//測(cè)試添加
this.deps.push(dep);
//get和set是獨(dú)立的回調(diào)函數(shù) val值作為閉包臨時(shí)變量共享
Object.defineProperty(obj, key, {
get() {
//添加到Dep瞬時(shí)調(diào)用收集到
console.log("get" + key);
if (Dep.target) dep.addWatcher(Dep.target);
return val;
},
set(newVal) {
console.log("set" + key);
if (val === newVal) return;
val = newVal;
//廣播通知更新操作 發(fā)布
dep.notify();
}
});
}
//代理data
proxyData(key) {
// 需要給vue實(shí)例定義屬性
Object.defineProperty(this, key, {
get() {
return this.$data[key];
},
set(newVal) {
this.$data[key] = newVal;
}
});
}
}
我把重點(diǎn)的地方在強(qiáng)調(diào)一遍~
1.defineReactive方法哪里 val作為閉包 存取都是用臨時(shí)變量，如果都是改變的原本值泳姐，那么會(huì)造成死循環(huán)
2.defineReactive的get方法 if (Dep.target) dep.addWatcher(Dep.target); 手動(dòng)調(diào)用get時(shí)添加到dep實(shí)例上效拭，這里的dep也是因?yàn)殚]包的關(guān)系 關(guān)系對(duì)應(yīng)一個(gè)key對(duì)應(yīng)一個(gè)實(shí)例，每次調(diào)用會(huì)dep都是這個(gè)閉包內(nèi)的實(shí)例
3.defineReactive的set方法dep.notify 每次設(shè)置 通知dep內(nèi)的所有watcher執(zhí)行更新回調(diào)，更新對(duì)應(yīng)的更新方法缎患，跟新頁面數(shù)據(jù)慕的。
Dep.js
//創(chuàng)建Dep
//和data中的每一個(gè)key對(duì)應(yīng)起來，主要負(fù)責(zé)管理相關(guān)watcher
class Dep {
constructor() {
this.watchers = [];
}
addWatcher(watcher) {
this.watchers.push(watcher);
}
notify() {
this.watchers.forEach(watcher => watcher.update());
}
}
Dep里面比較簡(jiǎn)單 作用就是為了能夠統(tǒng)一管理和調(diào)用watcher.update()更新操作
Watcher.js
//Watcher:負(fù)責(zé)創(chuàng)建data中的key 和更新函數(shù)的映射
class Watcher {
constructor(vm, key, cb) {
this.$vm = vm;
this.$key = key;
this.$cb = cb;
//關(guān)鍵：
//1.把當(dāng)前的watcher實(shí)例附加到Dep的靜態(tài)屬性上(這里的Dep.target相當(dāng)于一個(gè)臨時(shí)變量)
//2.然后訪問下屬性觸發(fā)執(zhí)行g(shù)et方法添加到dep里面
Dep.target = this;
this.$vm[this.$key]; //觸發(fā)依賴收集
Dep.target = null; //置空
}
update() {
this.$cb && this.$cb.call(this.$vm, this.$vm[this.$key]);
}
}
1.把當(dāng)前的watcher實(shí)例附加到Dep的靜態(tài)屬性上(這里的Dep.target相當(dāng)于一個(gè)臨時(shí)變量)
2.然后訪問下屬性觸發(fā)執(zhí)行g(shù)et方法添加到dep實(shí)例的watchers屬性里面
Compiler.js
class Compiler {
constructor(el, vm) {
this.$vm = vm;
this.el = document.querySelector(el);
this.compile(this.el);
}
compile(node) {
let nodes = node.childNodes;
Array.from(nodes).forEach(node => {
//判斷節(jié)點(diǎn)類型
if (this.isElement(node)) {
//是元素標(biāo)簽
this.compileElement(node);
} else if (this.isInter(node)) {
//是插值文本{{}}
this.compileText(node);
}
this.compile(node);
});
}
isElement(node) {
return node.nodeType === 1;
}
isInter(node) {
return node.nodeType === 3 && /\{\{(.*)\}\}/.test(node.textContent);
}
compileText(node) {
this.update(node, RegExp.$1, "text");
}
compileElement(node) {
//獲取屬性
let nodeAttrs = node.attributes;
Array.from(nodeAttrs).forEach(attr => {
const attrName = attr.name;
const value = attr.value;
//指令|事件
if (this.isDirective(attrName)) {
//截取指令名字
const dir = attrName.slice(2);
//執(zhí)行相應(yīng)指令的函數(shù)
this[dir] && this[dir](node, value);
}
});
}
isDirective(attr) {
return ~attr.indexOf("a-");
}
model(node, key) {
node.value = this.$vm[key];
node.addEventListener("input", e => {
this.$vm[key] = e.target.value
});
}
//update函數(shù) 負(fù)責(zé)更新dom挤渔，同時(shí)創(chuàng)建watcher實(shí)例在兩者之間產(chǎn)生聯(lián)系
update(node, key, dir) {
//初始運(yùn)行
const updaterFn = this[dir + "Updater"];
updaterFn && updaterFn(node, this.$vm[key]);
//修改時(shí)的更新埋點(diǎn) 訂閱觸發(fā)
new Watcher(this.$vm, key, function(value) {
updaterFn && updaterFn(node, value);
});
}
textUpdater(node, value) {
node.textContent = value;
}
}
1.這里是用的實(shí)際dom來代替虛擬dom的編譯過程肮街，拆解頁面元素分析如上圖
2.多個(gè)方法拆分是為了復(fù)用，RegExp.$1靜態(tài)方法是讀取正則運(yùn)行test方法后的靜態(tài)屬性獲取匹配分組的數(shù)據(jù)判导。這里拿到的是key值
測(cè)試結(jié)果
后續(xù)拓展
data數(shù)據(jù)如何多級(jí)層次渲染？
事件眼刃，其他指令绕辖，組件等 后續(xù)在來研究~
代碼地址內(nèi)有答案 包括上述代碼
代碼地址：https://gitee.com/biglove/vue-study.git
