Dieser Artikel passt ein Vue an und implementiert schrittweise die bidirektionale Bindung von Daten. Ich hoffe, dass er für alle hilfreich ist.
vue erfordert mindestens zwei Parameter: Vorlage und Daten. [Verwandte Empfehlungen: vue.js Video-Tutorial]
Erstellen Sie ein Compiler-Objekt, rendern Sie die Daten in die Vorlage und mounten Sie sie auf dem angegebenen Knoten.
class MyVue {
// 1，接收两个参数：模板（根节点），和数据对象
constructor(options) {
// 保存模板，和数据对象
if (this.isElement(options.el)) {
this.$el = options.el;
} else {
this.$el = document.querySelector(options.el);
}
this.$data = options.data;
// 2.根据模板和数据对象，渲染到根节点
if (this.$el) {
// 监听data所有属性的get/set
new Observer(this.$data);
new Compiler(this)
}
}
// 判断是否是一个dom元素
isElement(node) {
return node.nodeType === 1;
}
}Compiler die Seite auf einmal 2. Nachdem die Vorlage in den Speicher extrahiert wurde, verwenden Sie die buildTemplate-Funktion, um die Vorlagenelemente zu durchlaufen
Elementknoten
class Compiler {
constructor(vm) {
this.vm = vm;
// 1.将网页上的元素放到内存中
let fragment = this.node2fragment(this.vm.$el);
// 2.利用指定的数据编译内存中的元素
this.buildTemplate(fragment);
// 3.将编译好的内容重新渲染会网页上
this.vm.$el.appendChild(fragment);
}
node2fragment(app) {
// 1.创建一个空的文档碎片对象
let fragment = document.createDocumentFragment();
// 2.编译循环取到每一个元素
let node = app.firstChild;
while (node) {
// 注意点: 只要将元素添加到了文档碎片对象中, 那么这个元素就会自动从网页上消失
fragment.appendChild(node);
node = app.firstChild;
}
// 3.返回存储了所有元素的文档碎片对象
return fragment;
}
buildTemplate(fragment) {
let nodeList = [...fragment.childNodes];
nodeList.forEach(node => {
// 需要判断当前遍历到的节点是一个元素还是一个文本
if (this.vm.isElement(node)) {
// 元素节点
this.buildElement(node);
// 处理子元素
this.buildTemplate(node);
} else {
// 文本节点
this.buildText(node);
}
})
}
buildElement(node) {
let attrs = [...node.attributes];
attrs.forEach(attr => {
// v-model="name" => {name:v-model value:name}
let { name, value } = attr;
// v-model / v-html / v-text / v-xxx
if (name.startsWith('v-')) {
// v-model -> [v, model]
let [_, directive] = name.split('-');
CompilerUtil[directive](node, value, this.vm);
}
})
}
buildText(node) {
let content = node.textContent;
let reg = /\{\{.+?\}\}/gi;
if (reg.test(content)) {
CompilerUtil['content'](node, content, this.vm);
}
}
}let CompilerUtil = {
getValue(vm, value) {
// 解析this.data.aaa.bbb.ccc这种属性
return value.split('.').reduce((data, currentKey) => {
return data[currentKey.trim()];
}, vm.$data);
},
getContent(vm, value) {
// 解析{{}}中的变量
let reg = /\{\{(.+?)\}\}/gi;
let val = value.replace(reg, (...args) => {
return this.getValue(vm, args[1]);
});
return val;
},
// 解析v-model指令
model: function (node, value, vm) {
// 在触发getter之前，为dom创建Wather，并为Watcher.target赋值
new Watcher(vm, value, (newValue, oldValue) => {
node.value = newValue;
});
let val = this.getValue(vm, value);
node.value = val;
},
// 解析v-html指令
html: function (node, value, vm) {
// 在触发getter之前，为dom创建Wather，并为Watcher.target赋值
new Watcher(vm, value, (newValue, oldValue) => {
node.innerHTML = newValue;
});
let val = this.getValue(vm, value);
node.innerHTML = val;
},
// 解析v-text指令
text: function (node, value, vm) {
// 在触发getter之前，为dom创建Wather，并为Watcher.target赋值
new Watcher(vm, value, (newValue, oldValue) => {
node.innerText = newValue;
});
let val = this.getValue(vm, value);
node.innerText = val;
},
// 解析{{}}中的变量
content: function (node, value, vm) {
let reg = /\{\{(.+?)\}\}/gi;
let val = value.replace(reg, (...args) => {
// 在触发getter之前，为dom创建Wather，并为Watcher.target赋值
new Watcher(vm, args[1], (newValue, oldValue) => {
node.textContent = this.getContent(vm, value);
});
return this.getValue(vm, args[1]);
});
node.textContent = val;
}
}Implementieren Sie die datengesteuerte Ansicht
1. Verwenden Sie die Funktion defineRecative, um die Object.defineProperty-Verarbeitung für die Daten durchzuführen, sodass alle Daten in den Daten durch get/set überwacht werden können2 Überlegen Sie als Nächstes, wie Sie den Ansichtsinhalt aktualisieren, nachdem Sie Änderungen im Datenwert abgehört haben. Erstellen Sie mithilfe des Observer-Entwurfsmusters die Klassen Dep und Water.
class Observer {
constructor(data) {
this.observer(data);
}
observer(obj) {
if (obj && typeof obj === 'object') {
// 遍历取出传入对象的所有属性, 给遍历到的属性都增加get/set方法
for (let key in obj) {
this.defineRecative(obj, key, obj[key])
}
}
}
// obj: 需要操作的对象
// attr: 需要新增get/set方法的属性
// value: 需要新增get/set方法属性的取值
defineRecative(obj, attr, value) {
// 如果属性的取值又是一个对象, 那么也需要给这个对象的所有属性添加get/set方法
this.observer(value);
// 第三步: 将当前属性的所有观察者对象都放到当前属性的发布订阅对象中管理起来
let dep = new Dep(); // 创建了属于当前属性的发布订阅对象
Object.defineProperty(obj, attr, {
get() {
// 在这里收集依赖
Dep.target && dep.addSub(Dep.target);
return value;
},
set: (newValue) => {
if (value !== newValue) {
// 如果给属性赋值的新值又是一个对象, 那么也需要给这个对象的所有属性添加get/set方法
this.observer(newValue);
value = newValue;
dep.notify();
console.log('监听到数据的变化');
}
}
})
}
}Verwenden Sie das Beobachter-Entwurfsmuster, um die Dep- und Wather-Klassen zu erstellen.
1. Der Zweck der Verwendung des Beobachter-Entwurfsmusters besteht darin, die Vorlage zu analysieren und die in der Vorlage verwendeten Daten zu sammeln Bestimmte Daten werden in der Datensammlung des DOM-Knotens verwendet. Wenn sich die Daten ändern, wird durch Aktualisieren der DOM-Knotensammlung eine Datenaktualisierung realisiert.
Dep: wird verwendet, um die Sammlung von Dom-Knoten zu sammeln, von denen ein bestimmtes Datenattribut abhängt, und Aktualisierungsmethoden bereitzustellen.
Watcher: das Paketobjekt jedes Dom-Knotens.
Da die Datendaten gelesen werden, wenn die Seite zum ersten Mal gerendert wird, und der Getter der Daten zu diesem Zeitpunkt ausgelöst wird, also Sammle den Dom hier
Wie sammle ich ihn konkret? Wenn die CompilerUtil-Klasse v-model, {{}} und andere Befehle analysiert, wird der Getter ausgelöst. Wir erstellen Water vor dem Auslösen und fügen dem Watcher ein statisches Attribut hinzu. Zeigen Sie auf den Dom und rufen Sie dann in der Getter-Funktion die statische Variable ab und fügen Sie sie der Abhängigkeit hinzu, um eine Sammlung zu vervollständigen. Da der statischen Variablen jedes Mal, wenn der Getter ausgelöst wird, ein Wert zugewiesen wird, kommt es nicht vor, dass falsche Abhängigkeiten erfasst werden.
class Dep {
constructor() {
// 这个数组就是专门用于管理某个属性所有的观察者对象的
this.subs = [];
}
// 订阅观察的方法
addSub(watcher) {
this.subs.push(watcher);
}
// 发布订阅的方法
notify() {
this.subs.forEach(watcher => watcher.update());
}
}3. An diesem Punkt wird die Ansicht automatisch aktualisiert, wenn Daten gebunden sind. Ursprünglich wollte ich den Code Schritt für Schritt implementieren, fand es aber schwierig, damit umzugehen, also habe ich die komplette Klasse gepostet.
werden tatsächlich die Eingabe- und Änderungsereignisse des Eingabefelds überwacht. Ändern Sie die Modellmethode von CompilerUtil. Der spezifische Code lautet wie folgt
class Watcher {
constructor(vm, attr, cb) {
this.vm = vm;
this.attr = attr;
this.cb = cb;
// 在创建观察者对象的时候就去获取当前的旧值
this.oldValue = this.getOldValue();
}
getOldValue() {
Dep.target = this;
let oldValue = CompilerUtil.getValue(this.vm, this.attr);
Dep.target = null;
return oldValue;
}
// 定义一个更新的方法, 用于判断新值和旧值是否相同
update() {
let newValue = CompilerUtil.getValue(this.vm, this.attr);
if (this.oldValue !== newValue) {
this.cb(newValue, this.oldValue);
}
}
}Wie füge ich den Watcher in das Dep-Array ein? Beim Parsen der Vorlage wird der entsprechende Datenattributwert gemäß dem v-Befehl abgerufen. Zu diesem Zeitpunkt wird die get-Methode des Attributs aufgerufen. Wir erstellen zunächst eine Watcher-Instanz und rufen den darin enthaltenen Attributwert ab und speichern Sie es als alten Wert im Inside Watcher. Bevor wir den Wert erhalten, fügen wir das Attribut Watcher.target = this zum Watcher-Prototypobjekt hinzu und erhalten dann den Wert Watcher.target = null. Wenn get aufgerufen wird, kann es basierend auf dem Watcher-Instanzobjekt Watcher.target abgerufen werden.
Das Prinzip der Methoden
Beim Erstellen einer Vue-Instanz empfängt sie den Methodenparameter
und stößt beim Parsen der Vorlage auf die V-On-Anweisung. Dem dom-Element wird ein Listener für das entsprechende Ereignis hinzugefügt, und die Aufrufmethode wird verwendet, um Vue an diese Methode zu binden: vm.$methods[value].call(vm, e);
Prinzip der Berechnung
Wenn Sie eine Vue-Instanz erstellen, erhalten Sie den berechneten Parameter
Vue initialisieren Führen Sie während der Instanz eine Object.defineProperty-Verarbeitung für den berechneten Schlüssel durch und fügen Sie das get-Attribut hinzu.
(Lernvideo-Sharing: Web-Frontend)
Das obige ist der detaillierte Inhalt vonIn diesem Artikel erhalten Sie eine detaillierte Analyse des Prinzips der bidirektionalen Bindung von Vue (verstehen Sie es gründlich).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Die übergeordnete Vue-Komponente ruft die Methode der untergeordneten Komponente auf
vue v-wenn
Der Unterschied zwischen vue2.0 und 3.0
So übergeben Sie einen Wert an die Vue-Komponente
Der Unterschied zwischen vue3.0 und 2.0
Vue allgemeine Anweisungen
Was sind die am häufigsten verwendeten Anweisungen in Vue?
Der Unterschied zwischen mpvue und vue
