当前位置：首页 > VUE

vue逻辑实现怎么实现

2026-01-14 00:38:30VUE

Vue 逻辑实现方法

Vue 的逻辑实现主要通过组合式 API（Composition API）或选项式 API（Options API）完成。以下是两种方式的详细说明。

组合式 API（Composition API）

组合式 API 是 Vue 3 引入的新特性，更适合复杂逻辑的组织和复用。逻辑通过 setup 函数或 <script setup> 语法糖实现。

<script setup>
import { ref, computed, onMounted } from 'vue';

// 响应式数据
const count = ref(0);

// 计算属性
const doubleCount = computed(() => count.value * 2);

// 方法
function increment() {
  count.value++;
}

// 生命周期钩子
onMounted(() => {
  console.log('组件已挂载');
});
</script>

<template>
  <button @click="increment">Count: {{ count }}, Double: {{ doubleCount }}</button>
</template>

选项式 API（Options API）

选项式 API 是 Vue 2 的传统写法，逻辑通过 data、methods、computed 等选项组织。

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  computed: {
    doubleCount() {
      return this.count * 2;
    }
  },
  methods: {
    increment() {
      this.count++;
    }
  },
  mounted() {
    console.log('组件已挂载');
  }
};
</script>

<template>
  <button @click="increment">Count: {{ count }}, Double: {{ doubleCount }}</button>
</template>

逻辑复用

逻辑复用可以通过自定义 Hook（组合式 API）或 Mixin（选项式 API）实现。

自定义 Hook

// useCounter.js
import { ref, computed } from 'vue';

export function useCounter() {
  const count = ref(0);
  const doubleCount = computed(() => count.value * 2);

  function increment() {
    count.value++;
  }

  return { count, doubleCount, increment };
}

在组件中使用：

<script setup>
import { useCounter } from './useCounter';

const { count, doubleCount, increment } = useCounter();
</script>

Mixin

// counterMixin.js
export default {
  data() {
    return {
      count: 0
    };
  },
  computed: {
    doubleCount() {
      return this.count * 2;
    }
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};

在组件中使用：

<script>
import counterMixin from './counterMixin';

export default {
  mixins: [counterMixin]
};
</script>

状态管理

对于跨组件状态共享，可以使用 Pinia 或 Vuex。

Pinia 示例

// stores/counter.js
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  getters: {
    doubleCount: (state) => state.count * 2
  },
  actions: {
    increment() {
      this.count++;
    }
  }
});

在组件中使用：

<script setup>
import { useCounterStore } from './stores/counter';

const counter = useCounterStore();
</script>

<template>
  <button @click="counter.increment">
    Count: {{ counter.count }}, Double: {{ counter.doubleCount }}
  </button>
</template>

异步逻辑

异步逻辑可以通过 async/await 或 Promise 实现。

<script setup>
import { ref } from 'vue';

const data = ref(null);

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    data.value = await response.json();
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

fetchData();
</script>