Vue3 注册和安装 v 指令

26 min read

在 Vue 3 中，注册和安装全局指令的方式与 Vue 2 有一些不同。下面是在 Vue 3 中注册和安装 v 指令的步骤：

  1. 创建一个新的 Vue 实例，并将其作为全局指令注册的基础：
import { createApp } from 'vue'

const app = createApp()

app.directive('v', {
  // 指令的生命周期钩子函数
})
  1. 在全局指令的生命周期钩子函数中定义指令的行为：
app.directive('v', {
  mounted(el, binding, vnode) {
    // 指令被绑定到元素上时触发
  },
  updated(el, binding, vnode) {
    // 指令所在组件的 VNode 更新时触发
  },
  unmounted(el, binding, vnode) {
    // 指令与元素解绑时触发
  }
})
  1. 通过 app.mount() 方法将应用挂载到特定的 DOM 元素上，并启动应用：
app.mount('#app')

注意，如果你想在组件内部使用局部指令，你可以将其注册在组件选项的 directives 字段中：

export default {
  directives: {
    v: {
      mounted(el, binding, vnode) {
        // 指令被绑定到元素上时触发
      },
      updated(el, binding, vnode) {
        // 指令所在组件的 VNode 更新时触发
      },
      unmounted(el, binding, vnode) {
        // 指令与元素解绑时触发
      }
    }
  }
}

这是 Vue 3 中注册和安装全局和局部指令的方法。它们可以在应用程序中的任何组件中使用，并在特定的生命周期钩子函数中执行指令的逻辑。