Vue2 と Vue3 のカスタム ディレクティブは大きく変更されており、特別な注意が必要です
ビュー2
ドキュメント: https://v2.cn.vuejs.org/v2/guide/custom-directive.html
-
bind: ディレクティブが初めて要素にバインドされるときに、1 回だけ呼び出されます。ここではワンタイムの初期化設定を行うことができます。
-
insert: バインドされた要素が親ノードに挿入されるときに呼び出されます (親ノードのみが存在することが保証されますが、必ずしもドキュメントに挿入されるわけではありません)。
-
update: コンポーネントの VNode が更新されるときに呼び出されますが、子 VNode の更新前に発生する場合もあります。ディレクティブの値は変更されている場合もあれば、変更されていない場合もあります。ただし、更新前後の値を比較することで、不要なテンプレートの更新を無視できます (フック関数のパラメーターの詳細については以下を参照してください)。
-
componentUpdated: コマンドが配置されているコンポーネントの VNode とその子 VNode がすべて更新された後に呼び出されます。
-
unbind: 命令が要素からアンバインドされるときに 1 回だけ呼び出されます。
ビュー 3
ドキュメント: https://cn.vuejs.org/guide/reusability/custom-directives.html#introduction
const myDirective = {
// 在绑定元素的 attribute 前
// 或事件监听器应用前调用
created(el, binding, vnode, prevVnode) {
// 下面会介绍各个参数的细节
},
// 在元素被插入到 DOM 前调用
beforeMount(el, binding, vnode, prevVnode) {
},
// 在绑定元素的父组件
// 及他自己的所有子节点都挂载完成后调用
mounted(el, binding, vnode, prevVnode) {
},
// 绑定元素的父组件更新前调用
beforeUpdate(el, binding, vnode, prevVnode) {
},
// 在绑定元素的父组件
// 及他自己的所有子节点都更新后调用
updated(el, binding, vnode, prevVnode) {
},
// 绑定元素的父组件卸载前调用
beforeUnmount(el, binding, vnode, prevVnode) {
},
// 绑定元素的父组件卸载后调用
unmounted(el, binding, vnode, prevVnode) {
}
}