Vue3学习：从零开始的简单教程

概述

Vue3学习涵盖了从环境搭建到项目创建、基础语法、组件化开发、高级特性和实战项目等多个方面，帮助开发者全面掌握Vue3的核心功能和优势。文章详细介绍了Vue3的新特性和改进，如Composition API、更好的响应式系统和性能优化。此外，还提供了通过Vue CLI创建Vue3项目的步骤和示例代码，帮助读者快速上手。

Vue3简介

什么是Vue3

Vue.js 是由尤雨欣（Evan You）在2014年发布的一款前端JavaScript框架。它以简洁、灵活、高性能著称，是构建用户界面的渐进式框架。Vue3 是Vue.js的最新版本，于2020年9月发布，带来了许多新特性和性能提升。

Vue3的核心功能包括数据绑定、指令、组件化开发、响应式系统等，使得前端开发变得更加高效和灵活。Vue3旨在为开发者提供更强大的工具和更好的开发体验，同时保持与Vue2的兼容性。

Vue3的主要特点和优势

1. 更好的性能：Vue3在渲染性能、内存使用和初始加载时间方面都有显著提升。这些改进主要得益于新的虚拟DOM算法和更精细的依赖追踪。

2. 新的响应式系统：Vue3采用了一种新的响应式系统，通过Proxy对象来实现数据的响应式，这不仅提高了性能，还使得开发者能够更加精确地控制响应式行为。

3. Composition API：Composition API 是一种新的API设计，旨在为更灵活的代码组织提供支持。它允许开发者在不使用选项式API的情况下，组织和重用逻辑代码。这使得代码结构更加清晰，易于维护。

4. 更好的类型支持：Vue3在TypeScript的支持上有了很大的改进，引入了类型推断和更好的类型检查能力，使得Vue应用的开发更加类型安全。

5. 更好的Tree Shaking支持：Vue3通过优化编译器和运行时库，使得无用代码可以更容易地被Tree Shaking工具移除，从而减少最终打包文件的体积。

Vue3与Vue2的区别

Vue3与Vue2相比，有以下具体的不同之处：

1. 响应式系统的改变：Vue3使用了Proxy对象来实现响应式系统，而Vue2则是通过Object.defineProperty()的方式。这使得Vue3在处理对象属性变更时更加灵活和高效。Vue2的响应式系统虽然在复杂对象的处理上存在一定的局限性，但Vue3的Proxy对象能够更好地处理嵌套对象和数组的变化。

2. Composition API的引入：Vue3引入了Composition API，这是一种新的API设计，允许开发者更灵活地组织和重用逻辑代码。而Vue2主要依赖于选项式API，如data、computed、methods等。虽然选项式API在小项目中使用便捷，但随着项目规模的增大，代码的组织和维护变得复杂。Composition API则提供了更加灵活的逻辑组织方式，使得代码更加模块化和复用性更强。

3. 更好的TypeScript支持：Vue3在TypeScript的支持上有了显著改进，包括类型推断、更好的类型检查等。Vue2虽然也可以与TypeScript一起使用，但类型支持相对较弱，尤其是对于复杂逻辑的类型推断和检查。Vue3则通过引入更丰富的类型定义和更好的类型推断能力，提升开发者的类型检查体验，使得大型项目中的开发更加类型安全。

4. 代码体积的优化：Vue3通过优化编译器和运行时库，提升了Tree Shaking的支持，使得打包文件更小。Vue2在这方面也有优化，但Vue3做得更加彻底，通过细粒度的模块划分和Tree Shaking支持，使得最终的打包体积更小，加载速度更快。

5. 更好的虚拟DOM优化：Vue3在虚拟DOM的更新算法上做了改进，使得渲染性能大幅提升。Vue2虽然也有虚拟DOM，但在某些场景下性能不如Vue3。Vue3通过更加智能的算法来判断需要更新的部分，从而减少不必要的DOM操作，提升渲染性能。

环境搭建与项目创建

安装Node.js

首先，需要安装Node.js环境。Node.js是一个基于Chrome V8引擎的JavaScript运行环境，它使得JavaScript可以运行在服务器端。可以通过官网下载安装包，或者使用nvm（Node Version Manager）管理Node.js的版本。以下是安装Node.js的步骤：

1. 访问Node.js的官方网站：https://nodejs.org/，下载适合你操作系统的安装包。
2. 按照安装向导完成安装。

在安装完成后，可以通过命令行工具验证Node.js是否安装成功：

node -v
npm -v

这两条命令分别会输出Node.js和npm（Node.js的包管理器）的版本号，证明安装成功。

使用nvm管理Node.js版本

nvm可以方便地管理不同版本的Node.js，以下是如何使用nvm安装Node.js：

1. 安装nvm：

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash

1. 重启命令行工具，然后安装Node.js：

nvm install node

使用Vue CLI创建Vue3项目

Vue CLI是一个命令行工具，可以用来快速创建和管理Vue.js项目。以下是使用Vue CLI创建Vue3项目的步骤：

1. 安装Vue CLI：

npm install -g @vue/cli

1. 创建Vue3项目：

vue create my-vue3-project

在创建项目的过程中，会提示你选择预设配置或手动配置。选择手动配置时，可以指定使用的Vue版本。确保选择Vue 3.x版本。

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

cd my-vue3-project
npm run serve

此时，开发服务器会启动，并打开浏览器展示默认的Vue3项目界面。

项目的基本结构介绍

创建的Vue项目会包含一些基本的文件和目录结构。以下是常见的目录和文件：

• public/：放置静态文件，如index.html，这些文件会在构建时被复制到输出目录。
• src/：项目的主要源代码目录。包含以下子目录和文件：
  • assets/：放置静态资源，如图片、字体等。
  • components/：放置可复用的Vue组件。
  • App.vue：应用的主组件，整个应用的入口。
  • main.js：应用的入口文件，负责初始化Vue实例和挂载根组件。

示例代码：

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

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

<!-- src/App.vue -->
<template>
  <div id="app">
    <h1>Hello Vue3</h1>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style scoped>
#app {
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Vue3基础语法

模板语法

Vue使用模板语法来构建HTML视图。模板语法的核心是双大括号{{ }}，用于插入数据到DOM中。以下是一个简单的模板示例：

<template>
  <div>
    <h1>{{ message }}</h1>
    <p>{{ 1 + 2 }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue3'
    }
  }
}
</script>

模板语法中也可以使用指令，如v-if、v-for等。v-if用于条件渲染，v-for用于列表渲染。例如：

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

<script>
export default {
  data() {
    return {
      message: 'Hello Vue3',
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ]
    }
  }
}
</script>

计算属性和侦听器

计算属性是基于响应式数据的计算结果，只有当对应的依赖数据发生变化时才会重新计算。计算属性使用computed选项定义：

<template>
  <div>
    <p>{{ fullName }}</p>
    <input v-model="firstName">
    <input v-model="lastName">
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
}
</script>

侦听器（Watchers）可以监听数据的变化，并在变化时执行特定的逻辑。使用watch选项定义：

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

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  watch: {
    count(newVal, oldVal) {
      console.log(`count changed from ${oldVal} to ${newVal}`);
    }
  },
  methods: {
    increment() {
      this.count++;
    }
  }
}
</script>

方法和事件绑定

在Vue中，可以通过methods选项来定义方法，并通过事件绑定来调用这些方法。例如：

<template>
  <div>
    <button @click="sayHello">Say Hello</button>
  </div>
</template>

<script>
export default {
  methods: {
    sayHello() {
      alert('Hello!');
    }
  }
}
</script>

表单输入绑定

Vue通过v-model指令实现双向数据绑定，使得表单输入的值可以与Vue实例的属性进行同步。例如：

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

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

组件化开发

组件的定义与注册

Vue的组件化开发是其核心特性之一。组件可以被定义为单独的Vue实例，并可以通过自定义标签在模板中复用。以下是一个简单的自定义组件示例：

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

<script>
export default {
  props: {
    message: {
      type: String,
      default: 'Hello from Component'
    }
  }
}
</script>

该组件可以通过<my-component>标签在父组件中使用：

<template>
  <div>
    <my-component message="Hello World"></my-component>
  </div>
</template>

组件的嵌套与递归

组件可以嵌套使用，也可以通过递归实现循环嵌套。例如，定义一个递归组件来显示列表：

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

<script>
export default {
  props: {
    items: {
      type: Array,
      required: true
    }
  }
}
</script>

传值与事件的父子组件通信

父子组件之间可以通过props传递数据，通过事件来通信。例如：

<!-- Parent Component -->
<template>
  <div>
    <child-component :message="parentMessage" @child-event="handleChildEvent"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from Parent'
    }
  },
  methods: {
    handleChildEvent(value) {
      console.log(value);
    }
  }
}
</script>

<!-- Child Component -->
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script>
export default {
  props: {
    message: String
  },
  methods: {
    sendMessage() {
      this.$emit('child-event', 'Hello from Child');
    }
  }
}
</script>

插槽（Slots）的使用

插槽允许父组件向子组件传递自定义内容。以下是一个简单的插槽示例：

<!-- Child Component -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

父组件可以这样使用插槽：

<template>
  <div>
    <child-component>
      <p>Custom content from Parent</p>
    </child-component>
  </div>
</template>

Vue3高级特性

使用Composition API

Composition API 是Vue3引入的一种新的API设计，提供了更灵活的逻辑组织方式。以下是一个使用Composition API的基本示例：

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

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

export default {
  setup() {
    const count = ref(0);

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

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

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

Vue3中的Reactivity系统

Vue3的Reactivity系统通过Proxy对象来实现数据的响应式。以下是一个使用Proxy实现响应式数据的示例：

import { reactive } from 'vue';

const state = reactive({
  count: 0
});

state.count++; // 通过Proxy对象实现响应式更新

路由与导航

Vue3可以通过Vue Router实现路由管理。以下是一个简单的Vue Router配置示例：

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

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

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

export default router;

Vue3中使用TypeScript

Vue3在TypeScript的支持上有了很大提升。以下是一个使用TypeScript的基本示例：

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const count = ref<number>(0);

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

    return {
      count
    };
  }
}

实战项目：构建一个简单的待办事项应用

需求分析

待办事项应用的基本功能包括：

• 添加新的待办事项
• 显示当前的待办事项列表
• 完成或删除待办事项

项目规划

1. 项目结构：

   • 创建项目目录，组织好代码结构。
   • 在src/components目录中创建TodoItem.vue组件，用于展示和操作单个待办事项。
   • 在src/目录中创建App.vue作为应用的主组件。
   • 在src/main.js中初始化Vue实例。

2. 数据管理：

   • 在App.vue中定义待办事项数据，使用Vue3的响应式系统管理待办事项列表。
   • 添加方法来实现添加、完成和删除待办事项的功能。

3. UI设计：

   • 设计简洁的UI界面，包括输入框、待办事项列表和操作按钮。
   • 使用CSS样式对应用进行美化。

4. 功能实现：

   • 实现添加待办事项的输入框，当用户按下回车键时，添加新的待办事项。
   • 显示当前的待办事项列表。
   • 实现完成和删除待办事项的功能。

5. 测试与调试：

   • 确保所有功能正常运行。
   • 调试代码，确保逻辑正确。
6. 项目部署：
   • 将项目部署到静态服务器，如GitHub Pages、Netlify或Vercel。

代码实现与功能调试

以下是待办事项应用的代码实现：

1. 项目结构：

my-todo-app/
├── public/
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   │   └── TodoItem.vue
│   ├── App.vue
│   └── main.js
├── package.json
└── vite.config.js

1. 数据管理：

在App.vue中定义待办事项数据：

<template>
  <div>
    <h1>Todo List</h1>
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="Add a new todo">
    <ul>
      <todo-item v-for="todo in todos" :key="todo.id" :todo="todo" @remove="removeTodo"></todo-item>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue';
import TodoItem from './components/TodoItem.vue';

export default {
  components: {
    TodoItem
  },
  setup() {
    const newTodo = ref('');
    const todos = ref([]);

    const addTodo = () => {
      if (newTodo.value.trim() !== '') {
        todos.value.push({
          id: Date.now(),
          text: newTodo.value,
          completed: false
        });
        newTodo.value = '';
      }
    };

    const removeTodo = (id) => {
      todos.value = todos.value.filter(todo => todo.id !== id);
    };

    return {
      newTodo,
      todos,
      addTodo,
      removeTodo
    };
  }
}
</script>

1. UI设计：

简单的设计界面，使用CSS样式：

<style>
  input[type="text"] {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
  }

  ul {
    list-style: none;
    padding: 0;
  }

  li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #ccc;
  }

  button {
    background: #ff4b4b;
    color: white;
    border: none;
    padding: 8px 16px;
    cursor: pointer;
    border-radius: 4px;
  }

  button:hover {
    background: #e74c3c;
  }
</style>

1. 功能实现：

创建TodoItem.vue组件来展示和操作单个待办事项：

<template>
  <li>
    <div>
      <input type="checkbox" v-model="todo.completed">
      <span :class="{ completed: todo.completed }">{{ todo.text }}</span>
    </div>
    <button @click="remove">Remove</button>
  </li>
</template>

<script>
export default {
  props: {
    todo: Object,
    remove: Function
  }
}
</script>

<style scoped>
  .completed {
    text-decoration: line-through;
  }
</style>

项目部署与上线

可以使用Vite或Vue CLI构建项目，并将构建输出部署到静态服务器。以下是使用Vite构建项目的步骤：

1. 安装Vite：

npm install -g create-vite

1. 使用Vite创建项目：

create-vite my-vue3-project

1. 使用Vite的构建命令：

npm run build

构建完成后，将dist目录下的文件部署到静态服务器，如GitHub Pages、Netlify或Vercel等。