vue3中 Hook详解 Hook结合自定义指令

在Vue 3中，Hook是一种新的机制，可以让你在组件之外使用类似组件的逻辑复用机制。Vue 3中的Hook主要通过setup函数配合自定义指令来实现。

以下是一个使用Hook结合自定义指令的例子：

// 引入 Vue 相关函数
import { ref, onMounted, directive as registerDirective } from 'vue';
 
// 自定义指令函数
function vMyDirective(el, binding) {
  // 指令的逻辑
  el.textContent = binding.value.message;
}
 
// 创建一个组件
export default {
  setup() {
    // 使用 ref 创建响应式数据
    const msg = ref('Hello, Vue 3!');
 
    // 定义指令
    registerDirective('my-directive', vMyDirective);
 
    // setup 返回的对象将会被合并到组件模板的作用域内
    return { msg };
  }
};

在模板中使用自定义指令：

<template>
  <div>
    <p v-my-directive="{ message: msg }">Message will be displayed here</p>
  </div>
</template>

在这个例子中，我们创建了一个自定义指令vMyDirective，并通过registerDirective注册。在setup函数中，我们返回了一个包含msg响应式数据的对象，该数据将被用于自定义指令中。在模板中，我们使用v-my-directive指令，并通过绑定传递了msg响应式数据。