Vue3 中 setup 与自定义指令的使用方法

在 Vue3 的开发中，setup 函数和自定义指令都是非常实用的功能，它们极大地提升了开发效率与代码的可维护性。

setup 函数是 Vue3 组件中的一个新选项，它在组件创建之前执行，是组合式 API 的入口。在 setup 函数中，可以定义响应式数据、计算属性、方法等。例如：

import { ref } from 'vue';
export default {
  setup() {
    const count = ref(0);
    const increment = () => {
      count.value++;
    };
    return {
      count,
      increment
    };
  }
};

这里使用 ref 函数创建了一个响应式数据 count，并定义了一个 increment 方法来增加 count 的值。最后通过 return 将数据和方法暴露给模板使用。setup 函数接收两个参数：props 和 context。props 用于接收父组件传递过来的数据，context 包含了 attrs、slots、emit 等属性，方便在 setup 中访问组件的上下文信息。

自定义指令则允许开发者在 HTML 模板中使用自定义的指令来实现特定的功能。创建一个自定义指令很简单，例如创建一个 v-focus 指令，让元素在挂载后自动获取焦点：

import { Directive } from 'vue';
const vFocus: Directive = {
  mounted(el) {
    el.focus();
  }
};
export default vFocus;

然后在组件中使用这个自定义指令：

<template>
  <input v-focus />
</template>

<script setup>
import vFocus from './vFocus';
</script>

在上述代码中，定义了一个 vFocus 指令，在指令的 mounted 钩子函数中，让元素获取焦点。

Vue3 还支持全局注册自定义指令。在 main.ts 中：

import { createApp } from 'vue';
import App from './App.vue';
import vFocus from './vFocus';

const app = createApp(App);
app.directive('focus', vFocus);
app.mount('#app');

这样，在整个应用中都可以使用 v-focus 指令了。

Vue3 的 setup 函数和自定义指令为开发者提供了更加灵活和强大的开发方式，合理运用它们能够打造出高效、可维护的前端应用。