当前位置：首页 > VUE

vue3实现

2026-03-09 19:29:11VUE

Vue 3 实现方法

Vue 3 提供了多种方式来实现功能，包括组合式 API、选项式 API 以及基于 <script setup> 的语法糖。以下是常见的实现方法：

组合式 API

组合式 API 是 Vue 3 的核心特性之一，允许更灵活地组织逻辑代码。

import { ref, computed, onMounted } from 'vue';

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

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

    onMounted(() => {
      console.log('Component mounted');
    });

    return {
      count,
      doubleCount,
      increment,
    };
  },
};

`<script setup>` 语法糖

<script setup> 是 Vue 3 的语法糖，简化了组合式 API 的使用。

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

const count = ref(0);
const doubleCount = computed(() => count.value * 2);

function increment() {
  count.value++;
}
</script>

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

选项式 API

Vue 3 仍然支持 Vue 2 的选项式 API，适合简单场景。

export default {
  data() {
    return {
      count: 0,
    };
  },
  computed: {
    doubleCount() {
      return this.count * 2;
    },
  },
  methods: {
    increment() {
      this.count++;
    },
  },
  mounted() {
    console.log('Component mounted');
  },
};

响应式数据管理

Vue 3 的响应式系统基于 ref 和 reactive。

使用 `ref`

ref 用于基本类型数据。

import { ref } from 'vue';

const num = ref(0);
console.log(num.value); // 访问值

使用 `reactive`

reactive 用于对象类型数据。

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  name: 'Vue 3',
});
console.log(state.count); // 直接访问属性

生命周期钩子

Vue 3 的生命周期钩子可以通过 onMounted、onUpdated 等函数调用。

import { onMounted, onUpdated } from 'vue';

onMounted(() => {
  console.log('Component mounted');
});

onUpdated(() => {
  console.log('Component updated');
});

组件通信

Vue 3 支持多种组件通信方式。

Props 和 Emits

父组件通过 props 传递数据，子组件通过 emits 触发事件。

// 子组件
<script setup>
const props = defineProps({
  message: String,
});
const emit = defineEmits(['update']);

function handleClick() {
  emit('update', 'New message');
}
</script>

Provide / Inject

跨层级组件通信。

// 祖先组件
import { provide } from 'vue';
provide('key', 'value');

// 后代组件
import { inject } from 'vue';
const value = inject('key');

状态管理

对于复杂状态管理，可以使用 Pinia 或 Vuex。

Pinia 示例

Pinia 是 Vue 3 推荐的状态管理库。

// store.js
import { defineStore } from 'pinia';

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

// 组件中使用
import { useCounterStore } from './store';
const counter = useCounterStore();
counter.increment();

路由管理

Vue Router 4 是 Vue 3 的官方路由库。

vue3实现

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
  ],
});