Vue 3 用法详细讲解：从基础到进阶

CarlowZJ

已于 2025-05-27 23:25:41 修改

阅读量1.1k

点赞数 24

文章标签： vue.js 前端 javascript

于 2025-02-17 10:31:47 首次发布

本文链接：https://blog.youkuaiyun.com/csdn122345/article/details/145676705

版权

（二）父子组件的 Props 和 Events 通信

Vue 3 是 Vue.js 的最新版本，引入了许多强大的新特性，如 Composition API、全新的响应式系统等，为开发者提供了更高的灵活性和性能优化。本文将详细介绍 Vue 3 的基本用法、核心概念、组件化开发、状态管理和路由基础，帮助你快速掌握 Vue 3 的开发技能。

一、Vue 3 新特性概览

（一）Composition API

Composition API 是 Vue 3 的核心改进之一，提供了更加灵活的组件逻辑组织方式。

示例：

vue复制

<script lang="ts">
import { defineComponent, ref, computed } from 'vue';

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

    const increment = () => {
      count.value++;
    };

    return { count, doubleCount, increment };
  },
});
</script>

优势：

更易于组织和复用代码。
逻辑更清晰，减少组件间的耦合。

（二）全新的响应式系统

Vue 3 使用 Proxy 替代了 Vue 2 的 Object.defineProperty，性能显著提升。

特点：

支持数组、对象动态属性的监听。
改进了调试体验。

（三）Teleport

Teleport 提供了一种更简单的方法，将 DOM 元素渲染到组件树之外的任意位置。

示例：

vue复制

<template>
  <teleport to="#modal">
    <div class="modal">这是一个弹窗</div>
  </teleport>
</template>

二、快速创建 Vue 3 项目

Vue 3 推荐使用 Vite 作为构建工具。以下是创建项目的步骤：

（一）安装 Vite

bash复制

npm create vite@latest my-vue3-app -- --template vue-ts
cd my-vue3-app
npm install
npm run dev

（二）项目结构

src/：存放项目主要代码。
public/：静态资源目录。
vite.config.ts：Vite 配置文件。

三、Vue 3 基础语法

（一）数据绑定

Vue 的数据绑定通过响应式系统实现，确保数据和视图实时同步。

示例：

HTML复制

<div id="app">
  <p>{
  { message }}</p>
  <input v-model="message" />
</div>

<script>
  Vue.createApp({
    setup() {
      return {
        message: "Hello Vue!"
      };
    }
  }).mount("#app");
</script>