vue3 如何复用

在Vue 3中，复用代码的主要方法有：1、组合式API 2、组合函数 3、自定义指令 4、插件 5、组件。通过这些方法，你可以在项目中实现代码的高效复用，从而提高开发效率和代码的可维护性。

一、组合式API

组合式API是Vue 3中引入的新特性，它允许你在一个函数中组合多个逻辑单元。这种方式使得代码更加模块化和易于复用。

使用setup函数：

在Vue 3的组件中，你可以使用setup函数来定义组件的逻辑。setup函数会在组件实例创建之前执行，并且它可以返回一个对象，这个对象的属性将会暴露给模板使用。

import { ref, reactive } from 'vue';
export default {
  setup() {
    const count = ref(0);
    const state = reactive({
      message: 'Hello Vue 3!'
    });
    function increment() {
      count.value++;
    }
    return {
      count,
      state,
      increment
    };
  }
};

使用组合函数：

组合函数（也称为Composable）是可以在多个组件之间复用的函数。它们通常用于封装复杂逻辑或状态管理。

// useCounter.js
import { ref } from 'vue';
export function useCounter() {
  const count = ref(0);
  function increment() {
    count.value++;
  }
  return {
    count,
    increment
  };
}
// Component.vue
import { useCounter } from './useCounter';
export default {
  setup() {
    const { count, increment } = useCounter();
    return {
      count,
      increment
    };
  }
};

二、组合函数

组合函数是Vue 3中提供的一种用于复用逻辑的工具。通过将逻辑封装到独立的函数中，你可以在多个组件中共享这些逻辑，而无需重复代码。

定义组合函数：

组合函数通常是一个普通的JavaScript函数，它使用Vue 3的组合式API来封装逻辑。

import { ref, computed } from 'vue';
export function useTodoList() {
  const todos = ref([]);
  const completedTodos = computed(() => todos.value.filter(todo => todo.completed));
  function addTodo(todo) {
    todos.value.push(todo);
  }
  return {
    todos,
    completedTodos,
    addTodo
  };
}

在组件中使用组合函数：

你可以在多个组件中使用相同的组合函数，从而实现逻辑复用。

import { useTodoList } from './useTodoList';
export default {
  setup() {
    const { todos, completedTodos, addTodo } = useTodoList();
    return {
      todos,
      completedTodos,
      addTodo
    };
  }
};

三、自定义指令

自定义指令是Vue提供的一种机制，用于在DOM元素上复用特定的行为。通过自定义指令，你可以将特定的操作封装起来，并在多个地方使用。

定义自定义指令：

自定义指令可以定义在全局或局部组件中。

// 定义全局自定义指令
import { createApp } from 'vue';
const app = createApp({});
app.directive('focus', {
  mounted(el) {
    el.focus();
  }
});

使用自定义指令：

在模板中使用自定义指令，就像使用内置指令一样。
```
<template>
  <input v-focus>
</template>
```

四、插件

插件是Vue提供的一种机制，用于将功能添加到Vue应用中。通过插件，你可以封装并复用逻辑和功能。

定义插件：

插件通常是一个具有install方法的对象，该方法在插件被安装时调用。

const MyPlugin = {
  install(app, options) {
    app.config.globalProperties.$myProperty = 'My Plugin Property';
  }
};
export default MyPlugin;

使用插件：

在应用中注册并使用插件。

import { createApp } from 'vue';
import MyPlugin from './MyPlugin';
const app = createApp({});
app.use(MyPlugin);
app.mount('#app');

五、组件

组件是Vue中最基本的复用单元。通过将UI和逻辑封装到组件中，你可以在多个地方使用相同的组件。

定义组件：

组件可以是单文件组件（SFC）或普通JavaScript对象。

// MyComponent.vue
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello from MyComponent!'
    };
  }
};
</script>

使用组件：

在另一个组件或应用中使用定义的组件。

<template>
  <MyComponent />
</template>
<script>
import MyComponent from './MyComponent.vue';
export default {
  components: {
    MyComponent
  }
};
</script>

总结来说，Vue 3 提供了多种方法来实现代码复用，包括组合式API、组合函数、自定义指令、插件和组件。每种方法都有其独特的优势和适用场景，开发者可以根据具体需求选择合适的复用方式。此外，合理的代码复用不仅能提高开发效率，还能使代码更加模块化和易于维护。为了更好地理解和应用这些方法，建议开发者在实际项目中多加练习，并不断总结经验。