Vue3教程：从入门到上手的实用指南-原创手记-慕课网

概述

本文提供了从环境搭建到核心组件使用，再到路由、状态管理的全面指导，帮助你快速掌握Vue3教程。详细介绍了Vue3的新特性和API，包括Composition API和TypeScript支持，让你轻松上手开发。文中还通过实战项目演示了组件创建和路由导航的具体操作，帮助你理解实际应用场景。

Vue3教程：从入门到上手的实用指南

一、Vue3简介与环境搭建

1.1 Vue3的基本概念

Vue.js 是一个用于构建用户界面的渐进式框架。与其他大型框架不同，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或已有的项目整合。Vue 采用了模板语法，允许开发者声明式地将视图渲染到 DOM 中，同时支持双向数据绑定。

Vue 3 是 Vue.js 的最新版本，它在 Vue 2 的基础上进行了大量的改进和优化，包括性能上的提升、TypeScript 的支持、更好的错误处理等。这些改进使得 Vue 3 成为了一个更加现代化和强大的框架。

1.2 安装Node.js与Vue CLI

在开始使用 Vue 3 之前，你需要安装 Node.js 和 Vue CLI。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Vue CLI 是 Vue.js 的官方脚手架工具，它可以帮助你快速搭建 Vue 项目的开发环境。

安装Node.js

访问 Node.js 的官方下载页面（https://nodejs.org），下载并安装最新版本的 Node.js（推荐使用 LTS 版本）。
安装完成后，打开命令行工具并输入以下命令检验安装是否成功。

node -v
npm -v

你应该能看到 Node.js 和 npm 的版本号。

安装Vue CLI

安装完 Node.js 后，接下来安装 Vue CLI。Vue CLI 基于 npm，因此你可以使用 npm 来安装它。

npm install -g @vue/cli

安装完成后，使用以下命令来检验 Vue CLI 是否安装成功。

vue --version

你应该能看到 Vue CLI 的版本号。

1.3 创建首个Vue3项目

现在你可以使用 Vue CLI 来创建一个新的 Vue 3 项目了。首先，在命令行工具中输入以下命令来创建一个新的项目：

vue create my-vue3-project

运行以上命令后，你会看到一个选项列表，选择 "Manually select features"，然后选择 Vue 3 作为项目的基础。接下来，按照提示完成项目的创建。

进入项目目录并启动开发服务器：

cd my-vue3-project
npm run serve

现在，你应该能看到一个默认的 Vue 3 项目已经在本地服务器上运行了。默认的项目结构如下：

my-vue3-project
├── node_modules
├── public
├── src
│   ├── assets
│   ├── components
│   ├── App.vue
│   └── main.js
├── .browserslistrc
├── .editorconfig
├── .eslintrc.js
├── .gitattributes
├── .gitignore
├── babel.config.js
├── package-lock.json
├── package.json
├── README.md
└── vue.config.js

接下来，你可以开始修改和扩展你的项目了。

二、Vue3的核心组件

2.1 模板语法

Vue 3 使用了模板语法来将 JavaScript 逻辑与 HTML 结构相结合。模板语法提供了一种简洁的语法来定义数据与 DOM 的双向绑定。以下是一个简单的模板示例：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello, Vue 3!'
    };
  }
}
</script>

在这个示例中，{{ message }} 是一个插值表达式，它将 message 变量的值插入到 HTML 中。当 message 变量的值发生变化时，DOM 也会自动更新。

2.2 数据绑定与计算属性

在 Vue 3 中，数据绑定是最基本的功能之一。通过数据绑定，Vue 可以自动将 JavaScript 变量的值更新到 DOM 中。有三种主要的数据绑定方式：插值表达式、v-model 和指令。

插值表达式

插值表达式是最简单的数据绑定方式之一。前面的示例已经展示了插值表达式的用法，它可以将 JavaScript 变量的值直接插入到 HTML 中。

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello, Vue 3!'
    };
  }
}
</script>

v-model

v-model 是 Vue 中用于双向数据绑定的指令。它可以将表单元素的值与一个 Vue 实例上的数据属性进行绑定。

<template>
  <div>
    <input v-model="username" placeholder="请输入用户名">
    <p>用户名: {{ username }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      username: ''
    };
  }
}
</script>

在这个示例中，v-model 将输入框的值与 username 变量进行绑定，当用户在输入框中输入内容时，username 变量的值也会随之改变。

计算属性

计算属性用于处理复杂的逻辑，并且可以在计算属性中使用其他数据属性。计算属性是基于依赖关系的，当依赖的数据发生变化时，计算属性会自动重新计算。

<template>
  <div>
    <p>原始数据: {{ originalData }}</p>
    <p>计算结果: {{ computedData }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      originalData: 10
    };
  },
  computed: {
    computedData() {
      return this.originalData * 2;
    }
  }
}
</script>

在这个示例中，computedData 是一个计算属性，它依赖于 originalData 变量，并在 originalData 发生变化时重新计算。

2.3 组件与插槽

在 Vue 中，组件是可复用的 Vue 实例，它有可复用的 HTML 代码片段。组件允许你将应用拆分为独立、可复用的代码块，并定义明确的 API。

基本组件

下面是一个简单的 Vue 组件示例：

<!-- Button.vue -->
<template>
  <button @click="handleClick">点击我</button>
</template>
<script>
export default {
  methods: {
    handleClick() {
      alert('按钮被点击了');
    }
  }
}
</script>

<!-- 使用Button组件 -->
<template>
  <div>
    <Button />
  </div>
</template>
<script>
import Button from './Button.vue';
export default {
  components: {
    Button
  }
}
</script>

插槽

插槽允许你在组件中定义内容的插入位置。插槽是 Vue 中强大的特性之一，它可以让你在组件中定义可变的 HTML 结构。

<!-- SlotComponent.vue -->
<template>
  <div>
    <slot></slot>
  </div>
</template>
<script>
export default {
  // 组件逻辑代码
}
</script>

<!-- 使用SlotComponent组件 -->
<template>
  <div>
    <SlotComponent>
      <p>这是插槽的内容</p>
    </SlotComponent>
  </div>
</template>
<script>
import SlotComponent from './SlotComponent.vue';
export default {
  components: {
    SlotComponent
  }
}
</script>

在这个示例中，<slot> 标签定义了插槽的位置，而插槽的内容则是在使用组件时提供的。

2.4 生命周期钩子

Vue 组件的生命周期是指从创建到销毁的整个过程，包含了多个生命周期钩子。生命周期钩子提供了一些特定时机的回调函数，以便在特定的时间点进行操作。

常见生命周期钩子

beforeCreate：在实例初始化之前，数据观测 (data observer) 和事件配置 (event handler configuration) 之前被调用。
created：在实例创建完成后被调用。此时数据观测 (data observer) 和事件配置 (event handler configuration) 都已完成。
beforeMount：在挂载开始之前被调用。
mounted：在实例挂载完成后被调用。
beforeUpdate：在数据更新之前被调用。
updated：在数据更新完毕后被调用。
beforeUnmount：在卸载开始之前被调用。
unmounted：在实例卸载完成后被调用。

以下是一个使用生命周期钩子的示例：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello, Vue 3!'
    };
  },
  beforeCreate() {
    console.log('beforeCreate');
  },
  created() {
    console.log('created');
  },
  beforeMount() {
    console.log('beforeMount');
  },
  mounted() {
    console.log('mounted');
  },
  beforeUnmount() {
    console.log('beforeUnmount');
  },
  unmounted() {
    console.log('unmounted');
  }
}
</script>

这个示例展示了每个生命周期钩子的调用顺序，你可以根据需要在这些钩子中执行特定的逻辑。

三、路由与状态管理

3.1 Vue Router基础

Vue Router 是 Vue.js 官方的路由库。它允许你定义和使用多个路由来实现单页面应用的导航。

安装 Vue Router

首先，安装 Vue Router：

npm install vue-router@next

基本配置

在项目中配置 Vue Router 需要创建一个路由实例，然后将其导出。以下是一个简单的配置示例：

// router.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

在 main.js 中引入并使用这个路由实例：

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

然后，在 App.vue 文件中使用 <router-view> 来定义路由视图：

<!-- App.vue -->
<template>
  <div>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  // 模板代码
}
</script>

这样，你就可以通过路由来导航到不同的视图了。例如，访问 / 会加载 Home.vue 视图，访问 /about 会加载 About.vue 视图。

3.2 Vuex简介与使用

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它使用集中式的存储来管理应用的所有组件中的状态，使得状态管理更加方便和可预测。

安装 Vuex

首先，安装 Vuex：

npm install vuex@next

基本配置

在项目中配置 Vuex 需要创建一个 Vuex 实例，然后将其导出。以下是一个简单的配置示例：

// store.js
import { createStore } from 'vuex';

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
});

export default store;

在 main.js 中引入并使用这个 Vuex 实例：

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

const app = createApp(App);
app.use(store);
app.mount('#app');

在组件中使用 Vuex：

<template>
  <div>
    <p>当前计数: {{ count }}</p>
    <p>双倍计数: {{ doubleCount }}</p>
    <button @click="increment">点击增加</button>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['count']),
    ...mapGetters(['doubleCount'])
  },
  methods: {
    ...mapActions(['increment'])
  }
}
</script>

这个示例展示了如何在组件中使用 Vuex 中的状态、getter 和 action。

四、API与Composition API

4.1 Options API与Composition API的区别

Vue 3 引入了 Composition API，这是一个全新的 API 设计，用于替代之前的 Options API。Composition API 提供了一种更灵活的方式来组织和重用组件逻辑。

Options API

Options API 是 Vue 2 中使用的 API 设计。它通过在组件中定义不同的选项（如 data、methods、computed 等）来组织代码。

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="increment">{{ count }}</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello, Vue 3!',
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
}
</script>

Composition API

Composition API 提供了一个 setup 函数，允许你在一个新的函数式环境中编写组件逻辑。Composition API 使用 ref 和 computed 等函数来组织组件逻辑。

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="increment">{{ count }}</button>
  </div>
</template>
<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const message = ref('Hello, Vue 3!');
    const count = ref(0);

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

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

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

在这个示例中，setup 函数允许你在一个新的函数式环境中编写组件逻辑。ref 用于创建响应式变量，computed 用于创建计算属性。

4.2 使用Composition API进行开发

Composition API 提供了更多的灵活性和可重用性，使得组件逻辑的组织更加清晰。以下是一个使用 Composition API 的复杂示例：

<template>
  <div>
    <p>{{ message }}</p>
    <p>{{ doubleCount }}</p>
    <button @click="increment">{{ count }}</button>
    <button @click="decrement">{{ count }}</button>
  </div>
</template>
<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const message = ref('Hello, Vue 3!');
    const count = ref(0);

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

    const decrement = () => {
      count.value--;
    };

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

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

在这个示例中，我们定义了多个响应式变量和方法，并使用 computed 创建了计算属性。setup 函数使得组件逻辑的组织更加清晰和灵活。

4.3 Vue3的新特性与API介绍

Vue 3 引入了许多新特性和 API，以下是一些重要的新特性：

1. 更好的性能

Vue 3 通过优化编译器、运行时和响应式系统，显著提高了性能。Vue 3 的组件渲染速度比 Vue 2 快了 2-5 倍，而静态标记渲染速度则提高了 50%。

2. TypeScript 支持

Vue 3 对 TypeScript 完全友好，提供了更好的类型支持。你可以直接在 Vue 3 项目中使用 TypeScript。

3. Teleport 和 Suspense

Vue 3 引入了 Teleport 和 Suspense 组件，分别用于 DOM 挂载和异步组件渲染。

4. 更好的错误处理

Vue 3 提供了更明确的错误信息和调试工具，使得调试更加方便。

五、实战项目演示

5.1 创建和整合组件

在实际项目中，我们会使用多个组件来构建复杂的界面。下面我们将创建一个简单的博客应用，并使用多个组件来实现。

1. 创建组件

首先，创建一个 Post 组件，用于显示博客文章。

<!-- Post.vue -->
<template>
  <div class="post">
    <h2>{{ title }}</h2>
    <p>{{ content }}</p>
    <div>
      <button @click="deletePost">删除</button>
    </div>
  </div>
</template>
<script>
import { ref } from 'vue';

export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    content: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const deletePost = () => {
      console.log('删除文章');
    };

    return {
      deletePost
    };
  }
}
</script>
<style scoped>
.post {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px;
}
</style>

2. 整合组件

然后，创建一个 BlogList 组件，用于显示多个博客文章，并将 Post 组件作为子组件使用。

<!-- BlogList.vue -->
<template>
  <div>
    <Post v-for="post in posts" :key="post.id" :title="post.title" :content="post.content" />
  </div>
</template>
<script>
import { ref } from 'vue';
import Post from './Post.vue';

export default {
  components: {
    Post
  },
  setup() {
    const posts = ref([
      { id: 1, title: '文章一', content: '这是文章一的内容' },
      { id: 2, title: '文章二', content: '这是文章二的内容' }
    ]);

    return {
      posts
    };
  }
}
</script>

5.2 实现路由导航

接下来，我们将使用 Vue Router 来实现不同页面之间的导航。我们创建两个路由，一个用于显示博客列表，另一个用于显示单篇文章。

配置路由

首先，更新 router.js 文件，添加新的路由配置：

// router.js
import { createRouter, createWebHistory } from 'vue-router';
import BlogList from './views/BlogList.vue';
import BlogPost from './views/BlogPost.vue';

const routes = [
  { path: '/', component: BlogList },
  { path: '/post/:id', component: BlogPost }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

创建 BlogPost 组件

接下来，创建 BlogPost 组件，用于显示单篇文章的详细信息。

<!-- BlogPost.vue -->
<template>
  <div>
    <h1>{{ post.title }}</h1>
    <p>{{ post.content }}</p>
  </div>
</template>
<script>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    const post = ref(null);

    onMounted(() => {
      const postId = route.params.id;
      // 从数据库中获取文章数据
      post.value = { id: postId, title: '文章标题', content: '文章内容' };
    });

    return {
      post
    };
  }
}
</script>

5.3 数据存储与管理

在实际应用中，我们需要使用 Vuex 来管理全局状态。我们假设有一个博客文章列表，需要在多个组件之间共享和更新。

创建 Vuex Store

首先，创建一个 Vuex store，用于管理博客文章列表。

// store.js
import { createStore } from 'vuex';
import { ref, computed } from 'vue';

const store = createStore({
  state: {
    posts: ref([
      { id: 1, title: '文章一', content: '这是文章一的内容' },
      { id: 2, title: '文章二', content: '这是文章二的内容' }
    ])
  },
  mutations: {
    addPost(state, post) {
      state.posts.value.push(post);
    },
    deletePost(state, id) {
      state.posts.value = state.posts.value.filter(post => post.id !== id);
    }
  },
  actions: {
    addPost({ commit }, post) {
      commit('addPost', post);
    },
    deletePost({ commit }, id) {
      commit('deletePost', id);
    }
  },
  getters: {
    postById: state => id => {
      return state.posts.value.find(post => post.id === id);
    }
  }
});

export default store;

在组件中使用 Vuex

然后，在组件中使用 Vuex 来获取和更新数据。

<!-- BlogList.vue -->
<template>
  <div>
    <Post v-for="post in posts" :key="post.id" :title="post.title" :content="post.content" @delete="deletePost" />
  </div>
</template>
<script>
import { computed } from 'vue';
import { useStore } from 'vuex';
import Post from './Post.vue';

export default {
  components: {
    Post
  },
  setup() {
    const store = useStore();
    const posts = computed(() => store.state.posts.value);

    const deletePost = (id) => {
      store.dispatch('deletePost', id);
    };

    return {
      posts,
      deletePost
    };
  }
}
</script>

六、常见问题与调试技巧

6.1 常见错误与解决方案

在使用 Vue 3 时，你可能会遇到一些常见的错误。以下是一些常见的错误及其解决方案：

1. 错误：Cannot find module 'vue'

如果你在项目中引入了 Vue，但运行时提示 Cannot find module 'vue'，确保你已经正确安装了 Vue。

npm install vue@next

2. 错误：[Vue warn]: Unknown custom element: <my-component> - did you register the component correctly?

这个错误提示你使用了一个未注册的组件。确保你在父组件中正确注册了子组件。

import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent
  }
}

3. 错误：Property or method "xxx" is not defined on the instance

这个错误提示你在模板中引用了未定义的属性或方法。确保你在 setup 函数中正确定义了这些属性或方法。

import { ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello, Vue 3!');

    return {
      message
    };
  }
}

6.2 调试技巧与工具推荐

1. 使用 Vue Devtools

Vue Devtools 是一个浏览器扩展工具，可以帮助你调试 Vue 应用程序。它可以让你查看组件树、状态管理、性能分析等。

2. 使用 console.log

你可以在代码中添加 console.log 语句来输出关键变量的值，以便调试。

console.log('当前计数:', count.value);

3. 使用 Vue 的官方文档

Vue 官方文档提供了详细的 API 参考和示例代码，可以帮助你更好地理解和调试代码。

4. 使用 IDE 的调试工具

现代的 IDE（如 VS Code）提供了强大的调试工具，可以方便地设置断点、查看变量值等。

通过以上调试技巧和工具，你可以更好地调试和解决问题。