js: Custom directive changes for Vue2 and Vue3

The custom directives of Vue2 and Vue3 have changed a lot and require special attention

View 2

Documentation: https://v2.cn.vuejs.org/v2/guide/custom-directive.html

• bind: Called only once, when the directive is bound to the element for the first time. One-time initialization settings can be performed here.

• inserted: Called when the bound element is inserted into the parent node (only the parent node is guaranteed to exist, but not necessarily inserted into the document).

• update: Called when the VNode of the component is updated, but it may happen before the update of its child VNode. The value of the directive may or may not have changed. But you can ignore unnecessary template updates by comparing the values ​​before and after the update (see below for detailed hook function parameters).

• componentUpdated: Called after the VNode of the component where the command is located and its child VNodes are all updated.

• unbind: Called only once, when the instruction is unbound from the element.

View 3

Documentation: 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) {
    
    }
}