Wann kann ich benutzerdefinierte Anweisungen in Vue verwenden?

Die Logik der Verwendung benutzerdefinierter Anweisungen ist dieselbe wie die Logik der Verwendung von Ereignismodifikatoren. Wenn es Logik im Zusammenhang mit der Bedienung von DOM/BOM in Methoden gibt, muss diese in eine benutzerdefinierte Anweisung abstrahiert werden, damit die Geschäftslogik entkoppelt werden kann DOM-Operationen und vereinfacht deren Unit-Test.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.

1. So erstellen Sie eine benutzerdefinierte Anweisung

Erstellen Sie eine Anweisung global über Vue.directive. Der folgende Code erstellt eine Anweisung mit dem Namen resize.

Vue.directive("resize", {

});

Nachdem Sie diese Direktive global registriert haben, bedeutet dies, dass Sie diese Direktive in jeder Komponente verwenden können. Sie können die Direktive direkt in der Vorlage einer einzelnen Dateikomponente oder in JSX verwenden. Konventionell wird dem Befehlsnamen „v-“ vorangestellt, was anzeigt, dass es sich um ein Präfix handelt.

II. Wann benutzerdefinierte Anweisungen verwendet werden sollten

Die Logik, wann benutzerdefinierte Anweisungen verwendet werden sollten, ist dieselbe wie bei der Verwendung von Ereignismodifikatoren.

Die Verwendung von Ereignismodifikatoren dient hauptsächlich dazu, unseren Code datengesteuert und einfach testbar erscheinen zu lassen, indem die Logik des DOM separat delegiert und einigen spezifischen Modifikatoren zugestimmt wird. (Verwandte Hinweise zu Ereignismodifikatoren: https://www.cnblogs.com/xiaoxuStudy/p/13233379.html#oneone)

　Tatsächlich haben benutzerdefinierte Anweisungen auch die gleiche Logik, wenn unsere Methoden zur Manipulation von DOM/ vorhanden sind. Wenn Sie sich die Stücklistenlogik ansehen, sollten Sie darüber nachdenken, ob sie in eine benutzerdefinierte Anweisung abstrahiert werden kann, um die Geschäftslogik von zugehörigen DOM-Vorgängen zu entkoppeln und den Unit-Test zu erleichtern.

3. Hook-Funktion

Hier folgt Vue strikt dem Öffnungs- und Schließprinzip im Entwurfsmuster, sodass Entwickler Komponenten zu unterschiedlichen Zeiten durch vereinbarte Hook-Funktionen bedienen können. (Bezogen auf die Hook-Funktion der offiziellen Website von Vue: https://cn.vuejs.org/v2/guide/custom-directive.html#%E9%92%A9%E5%AD%90%E5%87%BD%E6%95 % B0)

1. Hook-Funktion

Vue.directive("resize", {
  //只调用一次，指令第一次绑定元素时调用
  //在这里可以进行一次性的初始化设置
  bind: function(el, binding, value){},
  //被绑定元素插入父节点时调用
  //（仅保证父节点存在，但不一定已被插入文档中）
  inserted: function(el, binding, vnode){},
  //所在组件的 Vnode 更新时调用
  //但是可能发生在其子 VNode 更新之前
  //指令的值可能发生了变化，也可能没有
  //但是可以通过比较更新前后的值来忽略不必要的模板更新
  update: function(el, binding, vnode, oldVnode){},
  //指令所在的 VNode 及其子 VNode 全部更新后调用
  componentUpdated: function(el, binding, vnode, oldVnode){},
  //只调用一次，指令与元素解绑时调用
  unbind: function(el, binding, vnode){},
});

Hook-Funktionsbeispiel

Schauen wir uns zunächst das erste Paar Hook-Funktionen an, diese beiden Hook-Funktionen werden in der aktuellen Anweisung deklariert und beim Binden und Lösen der Bindung eines Elements aufgerufen. Dabei ist zu beachten, dass sowohl bind als auch unbind nur einmal aufgerufen werden.

　 Schauen Sie sich als Nächstes die eingefügte Hook-Funktion an. Normalerweise wird insert nach bind aufgerufen.

　Der Unterschied zwischen bind und insert ist: Der Parameter el.parentNode in bind ist null, und in insert kann über el.parentNode auf den übergeordneten Knoten des aktuellen Knotens zugegriffen werden. Wenn Informationen auf dem übergeordneten Knoten gespeichert werden müssen und auf den übergeordneten Knoten zugegriffen werden muss, wird insert häufiger verwendet als bind.

Schauen wir uns als Nächstes den letzten Satz der Hook-Funktionen „update“ und „componentUpdate“ an. Dieses Paar von Hook-Funktionen wird vor und nach der Aktualisierung des Vnode aufgerufen.

Im Vergleich zu anderen Hook-Funktionen übergeben update und ComponentUpdate einen weiteren Parameter: oldVnode repräsentiert die vorherigen virtuellen DOM-Knoteninformationen und vnode repräsentiert die aktuellen virtuellen DOM-Knoteninformationen. Sie können feststellen, ob die Vorlage aktualisiert werden muss, indem Sie den Unterschied zwischen oldVnode und vnode vergleichen, um unnötige Vorlagenaktualisierungen zu reduzieren und dadurch die Komponentenleistung bis zu einem gewissen Grad zu verbessern.

2. 钩子函数参数

function(
  // 指令所绑定的元素，可以用来直接操作 DOM
  el,
  // binding 一个对象，包含以下属性
  {
    // 指令名，不包括 -v 前缀
    name,
    // 指令的绑定值，例如：v-my-directive="1+1"中，绑定值为 2
    value,
    // 指令绑定的前一个值
    // 仅在 update 和 componentUpdated 钩子中可用
    oldValue,
    //字符串形式的指令表达式
    //例如 v-my-directive="1+1" 中，表达式为 "1+1"
    expression,
    //例如指令的参数，可选。
    //例如 v-my-directive:foo 中，参数为 "foo"
    arg,
    //一个包含修饰符的对象
    //例如：v-my-directive.foo.bar 中，
    //修饰符对象为 {foo: true, bar: true}
    modifiers
  },
  //Vue 编译生成的虚拟节点
  vnode,
  //上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用
  oldVnode
)

钩子函数参数

　　除了 el 之后，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。

【相关推荐：《vue.js教程》】

Das obige ist der detaillierte Inhalt vonWann kann ich benutzerdefinierte Anweisungen in Vue verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!