Vue3教程：新手入门到实践应用

概述

本文详细介绍了Vue3的基本概念和环境搭建步骤，包括Node.js和Vue CLI的安装，以及如何创建第一个Vue3项目。文章还深入讲解了Vue3的基本语法、组件化开发、路由与导航，以及状态管理等关键知识点。此外，文中还提供了丰富的示例代码和实战演练，帮助读者更好地理解和应用Vue3。

Vue3简介与环境搭建

为什么选择Vue3

Vue.js 是一个用于构建用户界面的渐进式框架，它易于上手，且具有强大的功能。Vue3是Vue.js的最新版本，它带来了许多重要的改进和新特性，包括更高效的状态管理、更灵活的渲染机制、更友好的开发者体验等。选择Vue3，您将获得以下优势：

1. 性能优化：Vue3通过编译器层面的优化，进一步提高了运行时的性能。如更小的包体积、更快的渲染速度以及更好的响应式性能。
2. Composition API：引入了Composition API，它在不改变Vue的响应式系统的情况下，提供了更灵活的API来组织代码，更适合复杂的应用程序。
3. 更好的类型支持：Vue3的类型支持得到了加强，通过提供更好的TypeScript支持，使开发过程更加类型安全。
4. 更好的错误处理与调试：Vue3包含了更详细的错误信息和更好的调试工具支持，帮助开发者更快速地定位和解决问题。
5. 更小的体积：Vue3的体积更小，加载速度更快，这对于移动端应用尤其重要。

安装Node.js和Vue CLI

在开始使用Vue3之前，首先需要安装Node.js和Vue CLI。

安装Node.js

1. 访问Node.js官网（https://nodejs.org/），下载适合您操作系统的安装包。
2. 安装Node.js。安装过程中请确保勾选“Add to PATH”。安装完成后，您可以在命令行中使用node -v命令来检查安装是否成功。

安装Vue CLI

1. 打开终端或命令行工具（如Windows的cmd或PowerShell），输入以下命令来全局安装Vue CLI：

   npm install -g @vue/cli

2. 安装完成后，可以通过运行vue -V来检查Vue CLI的版本。

创建第一个Vue3项目

使用Vue CLI创建第一个Vue3项目，包括以下步骤：

1. 初始化Vue CLI项目：

   vue create my-vue-app

2. 在选择预设时，选择Manually select features，然后选择Vue 3。

3. 继续初始化项目，完成后进入项目目录：

   cd my-vue-app

4. 启动项目：

   npm run serve

此时，Vue CLI会启动一个本地服务器，您可以在浏览器中访问http://localhost:8080来查看您的项目。

Vue3的基本语法

模板语法：v-bind与v-on

Vue3中的模板语法提供了多种指令来实现数据绑定和事件处理。两个常见的指令是v-bind和v-on。

v-bind
v-bind用于动态绑定元素的属性，如类名、内联样式或属性。例如：

<div v-bind:class="{ active: isActive }"></div>

等同于：

<div :class="{ active: isActive }"></div>

v-on
v-on用于监听DOM事件，例如点击事件：

<button v-on:click="onClick">点我</button>

等同于：

<button @click="onClick">点我</button>

计算属性与侦听器

计算属性
计算属性是基于它们的依赖缓存的，只要依赖没有更新，计算属性就不会重新计算。这使它比侦听器更加高效。

例如，计算属性可以用于根据输入字段来计算另一个字段的值：

export default {
  data() {
    return {
      firstName: '',
      lastName: ''
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
}

侦听器
侦听器可以监听数据的变化，并在变化时执行自定义的回调函数。例如：

export default {
  data() {
    return {
      message: 'Hello'
    };
  },
  watch: {
    message(newVal, oldVal) {
      console.log(`新值: ${newVal}，旧值: ${oldVal}`);
    }
  }
}

指令：v-if和v-for

v-if
v-if用于在条件为真时渲染元素。条件为假时，该元素将被删除并从DOM中移除。

<div v-if="show">显示这个</div>

v-for
v-for用于迭代数组或对象的每一项。例如：

<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

在上述例子中，items是一个数组，每个item都有一个id和name字段。

组件化开发

创建组件

组件是Vue应用的基本构建块，每个组件都有自己的模板、逻辑和样式。创建一个名为HelloWorld的简单组件：

<template>
  <div>
    <h1>{{ message }}</h1>
    <p>{{ description }}</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    message: String,
    description: String
  }
}
</script>

传递数据与事件

组件可以通过props接收来自父组件的数据，也可以通过事件将数据传递给父组件。

父组件传递给子组件

<template>
  <div>
    <HelloWorld :message="helloMessage" :description="helloDescription" />
  </div>
</template>

<script>
import HelloWorld from './HelloWorld.vue';

export default {
  components: {
    HelloWorld
  },
  data() {
    return {
      helloMessage: 'Hello World',
      helloDescription: '这是一个例子'
    };
  }
}
</script>

子组件传值给父组件

<template>
  <div>
    <input v-model="message" @input="sendMessage">
    <button @click="sendMessage">发送</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    message: String
  },
  methods: {
    sendMessage() {
      this.$emit('change', this.message);
    }
  }
}
</script>

在父组件中监听这个事件：

<template>
  <div>
    <HelloWorld :message="helloMessage" @change="setMessage" />
  </div>
</template>

<script>
import HelloWorld from './HelloWorld.vue';

export default {
  components: {
    HelloWorld
  },
  data() {
    return {
      helloMessage: 'Hello World'
    };
  },
  methods: {
    setMessage(message) {
      this.helloMessage = message;
    }
  }
}
</script>

嵌套组件和插槽

组件可以嵌套，可以将内容传递给子组件的插槽。例如，以下是一个包含子组件的父组件：

<template>
  <div>
    <parent>
      <child slot="header">这里是头部内容</child>
      <child slot="footer">这里是底部内容</child>
    </parent>
  </div>
</template>

<script>
import Parent from './Parent.vue';
import Child from './Child.vue';

export default {
  components: {
    Parent,
    Child
  }
}
</script>

在Parent.vue中：

<template>
  <div>
    <slot name="header"></slot>
    <slot name="footer"></slot>
  </div>
</template>

在Child.vue中：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'Child',
  props: {
    message: String
  }
}
</script>

路由与导航

安装Vue Router

首先，安装Vue Router：

npm install vue-router@next

配置路由与导航守卫

创建一个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;

在主入口文件中引入路由模块：

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

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

参数传递与动态路由

在路由中使用动态参数，例如：

const routes = [
  { path: '/user/:id', component: User }
];

在User.vue中接收参数：

<template>
  <div>
    <h1>User {{ $route.params.id }}</h1>
  </div>
</template>

在组件中访问路由的参数：

import { onMounted } from 'vue';
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    const id = route.params.id;

    onMounted(() => {
      console.log(`动态参数ID: ${id}`);
    });
  }
}

状态管理

Vuex的安装与配置

首先，安装Vuex：

npm install vuex@next

创建一个store.js文件，配置Vuex：

import { createStore } from 'vuex';

export default createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  }
});

在主入口文件中引入Vuex模块：

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

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

状态管理的基本概念

• State: 状态是应用中所有组件都可以访问到的数据。Vuex的状态存储是响应式的，当状态发生变化时，依赖于该状态的组件也会自动更新。
• Mutations: 用于改变状态。每个Mutation函数都有一个状态参数，用以访问当前状态。
• Actions: 用于异步操作。它们不能直接改变状态，而是触发Mutation。

使用Store进行数据共享

在组件中访问Store：

<template>
  <div>
    {{ count }}
    <button @click="increment">+</button>
  </div>
</template>

<script>
import { useStore } from 'vuex';

export default {
  setup() {
    const store = useStore();
    const count = store.state.count;

    const increment = () => {
      store.dispatch('increment');
    };

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

资源与实战

Vue3官网与社区资源推荐

• Vue3官网
• 慕课网Vue3课程
• Vue社区
• Vue3文档

小项目实战演练

项目需求：构建一个简单的待办事项应用，支持添加、删除和标记已完成的事项。

项目结构：

• src/App.vue: 主应用组件
• src/views/AddItem.vue: 添加事项组件
• src/store/index.js: Vuex状态管理

主应用组件：

<template>
  <div>
    <h1>待办事项</h1>
    <AddItem @addItem="addItem" />
    <ul>
      <li v-for="item in items" :key="item.id" :class="{ completed: item.completed }" @click="toggle(item)">
        {{ item.text }}
      </li>
    </ul>
  </div>
</template>

<script>
import AddItem from './views/AddItem.vue';
import { useStore } from 'vuex';

export default {
  components: {
    AddItem
  },
  setup() {
    const store = useStore();
    const items = store.state.items;

    const addItem = (item) => {
      store.dispatch('addItem', item);
    };

    const toggle = (item) => {
      store.dispatch('toggle', item);
    };

    return { items, addItem, toggle };
  }
}
</script>

添加事项组件：

<template>
  <div>
    <input v-model="itemText" placeholder="输入待办事项" />
    <button @click="addItem">添加</button>
  </div>
</template>

<script>
import { useStore } from 'vuex';

export default {
  setup() {
    const store = useStore();
    const itemText = store.state.itemText;

    const addItem = () => {
      store.dispatch('addItem', { text: itemText, completed: false });
      itemText.value = '';
    };

    return { itemText, addItem };
  }
}
</script>

Vuex状态管理：

import { createStore } from 'vuex';

export default createStore({
  state: {
    items: [],
    itemText: ''
  },
  mutations: {
    addItem(state, item) {
      state.items.push(item);
    },
    toggle(state, item) {
      item.completed = !item.completed;
    }
  },
  actions: {
    addItem({ commit }, item) {
      commit('addItem', item);
    },
    toggle({ commit }, item) {
      commit('toggle', item);
    }
  }
});

常见问题与解决方案

问题1: 组件通信方式选择困难
Vue3推荐使用Composition API来组织代码，通过provide和inject来实现组件间通信，避免使用复杂的props和events。

// 父组件
import { provide } from 'vue';

export default {
  setup() {
    const message = 'Hello';

    provide('message', message);

    return { message };
  }
}

// 子组件
import { inject } from 'vue';

export default {
  setup() {
    const message = inject('message');

    return { message };
  }
}

问题2: 路由跳转时状态丢失
使用Vuex来持久化状态，或使用localStorage存储状态，确保在路由切换时数据不会丢失。

import { createStore } from 'vuex';

export default createStore({
  state: {
    items: JSON.parse(localStorage.getItem('items')) || []
  },
  mutations: {
    addItem(state, item) {
      state.items.push(item);
      localStorage.setItem('items', JSON.stringify(state.items));
    }
  },
  actions: {
    addItem({ commit }, item) {
      commit('addItem', item);
    }
  }
});

通过以上内容，您应该能够获得对Vue3的深入理解，并开始构建复杂的应用程序。