Vue3 入门指南：从零开始快速上手框架基础

概述

Vue3 作为 Google 开源的前端框架，通过引入 Composition API, 细化响应式系统和优化组件机制，显著提升了性能和开发效率。其设计理念侧重于简洁性、模块化和高性能，旨在为开发者提供更强大的工具来构建复杂的用户界面。

Vue3 引入 TypeScript 支持，通过 TypeScript 提高类型安全性和代码可读性。其双向数据绑定的优化，如计算属性和响应式系统，使得数据更新更高效且同步。Composition API 是 Vue3 主要的编程模式，它使用基于函数的组件来组合代码，而不是依赖于继承和组件，这极大地简化了组件的逻辑结构和代码的可维护性。细化响应式机制，通过 ref 和 reactive API，开发者能更精准地控制响应式行为，从而提升性能。

快速安装 Vue3

安装 Vue CLI

Vue CLI 是 Vue.js 的官方命令行工具，用于创建新项目、运行开发服务器、构建生产版本等。

首先，确保已安装 Node.js。然后使用 npm 或 yarn 来全局安装 Vue CLI：

# 使用 npm
npm install -g @vue/cli

# 或使用 yarn
yarn global add @vue/cli

创建新项目

使用 Vue CLI 创建项目，选择 Vue 3 作为模板：

vue create my-vue3-project

在命令提示符下输入 y 来接受默认项目的配置，或者根据需要自定义项目目录结构、应用名称、模板等。

项目创建成功后，切换到项目目录并运行开发服务器：

cd my-vue3-project
npm run serve

或使用 yarn 运行开发服务器：

yarn dev

开发服务器将在本地启动，并显示项目的地址。访问此地址以查看和调试应用程序。

Vue3 基本语法

组件系统与响应式数据

Vue3 的单文件组件（SFC）文件包含 HTML、CSS 和 JavaScript 代码。组件通过模板语法和 JavaScript 代码逻辑进行定义。

组件示例：

<!-- MyComponent.vue -->
<template>
  <div>
    <h1>{{ message }}</h1>
    <p>动态更新: {{ message }}</p>
  </div>
</template>

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

组件可以通过 props 接收数据，并通过 emit 事件发送自定义事件。例如：

<!-- 父组件 -->
<template>
  <MyComponent msg="Welcome to Vue3!" />
</template>

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

export default {
  components: {
    MyComponent
  }
}
</script>

数据绑定：

模板中使用双大括号（{{ }}）来绑定数据：

<!-- 在其他组件中使用 MyComponent -->
<MyComponent message="动态更新" />

响应式原理与组件传参与通信

动态组件：

动态组件允许根据条件更换组件实例。这可以通过 v-if, v-else 和 v-for 指令实现：

<!-- 使用 v-if 条件渲染 -->
<template>
  <div>
    <button @click="showComponent = !showComponent">Toggle Component</button>
    <component :is="Component"></component>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  components: {
    ComponentA,
    ComponentB
  },
  data() {
    return {
      showComponent: true,
      Component: ComponentA
    }
  },
  methods: {
    switchComponent() {
      this.Component = this.Component === ComponentA ? ComponentB : ComponentA;
    }
  }
}
</script>

组件传参与通信：

<!-- 父组件 -->
<template>
  <MyComponent msg="Passed message" />
</template>

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

export default {
  components: {
    MyComponent
  }
}
</script>

MyComponent.vue：

<!-- MyComponent.vue -->
<template>
  <div>
    <p>{{ msg }}</p>
  </div>
</template>

<script>
export default {
  props: {
    msg: {
      type: String,
      required: true
    }
  }
}
</script>

实用工具与插件

Vuex

Vuex 是一个用于状态管理的库，对于需要处理复杂的 UI 状态和应用范围的状态共享的项目非常有用。

基本示例：

// 创建 store
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment(context) {
      context.commit('increment');
    }
  },
  getters: {
    doubleCount: state => state.count * 2
  }
});

// 在组件中使用 store
<template>
  <div>
    <button @click="increment">Increment</button>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

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

Vue Router

Vue Router 是用于单页应用路由管理的工具，它允许导航到不同组件和状态之间的转换。

基本示例：

// 导入 Vue Router
import VueRouter from 'vue-router';

// 定义组件
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

// 设置路由
const routes = [
  {
    path: '/a',
    component: ComponentA
  },
  {
    path: '/b',
    component: ComponentB
  }
];

const router = new VueRouter({
  routes
});

// 在 Vue 实例中使用路由
new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

练习与实战：一个简单的 Todo 应用

实战案例：Todo 应用

构建一个简单的 Todo 应用，实现创建、编辑和删除任务的功能。首先，创建包含任务列表、添加、编辑和删除功能的单文件组件 Todo.vue：

<!-- Todo.vue -->
<template>
  <div>
    <h2>{{ title }}</h2>
    <div v-for="task in tasks" :key="task.id">
      <input type="checkbox" v-model="task.done">
      <span :class="{ 'text-strike': task.done }">{{ task.text }}</span>
      <button @click="editTask(task)">编辑</button>
      <button @click="removeTask(task)">删除</button>
    </div>
    <input type="text" v-model="newTask">
    <button @click="addTask">添加任务</button>
  </div>
</template>

<script>
export default {
  name: 'Todo',
  data() {
    return {
      title: 'Todo List',
      tasks: [],
      newTask: ''
    }
  },
  methods: {
    addTask() {
      if (this.newTask.trim() !== '') {
        this.tasks.push({ id: Date.now(), text: this.newTask, done: false });
        this.newTask = '';
      }
    },
    removeTask(task) {
      this.tasks = this.tasks.filter(t => t !== task);
    },
    editTask(task) {
      task.text = prompt('请输入新的任务描述');
      task.done = false;
    }
  }
}
</script>

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

实战案例：Todo 应用组件化

将 Todo.vue 分解为多个组件，包括任务列表组件、任务编辑组件和任务详情组件，可以进一步提升代码的可读性和维护性：

<!-- TaskItem.vue -->
<template>
  <div>
    <input type="checkbox" v-model="task.done">
    <span :class="{ 'text-strike': task.done }">{{ task.text }}</span>
    <button @click="editTask(task)">编辑</button>
    <button @click="removeTask(task)">删除</button>
  </div>
</template>

<script>
export default {
  props: ['task'],
  methods: {
    editTask(task) {
      const newText = prompt('请输入新的任务描述');
      task.text = newText;
      task.done = false;
    },
    removeTask(task) {
      // 处理删除逻辑
    }
  }
}
</script>

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

通过上述步骤，你可以从零开始构建一个完整的 Todo 应用，实现基本的 CRUD 操作，以及进一步考虑组件化和状态管理的实践。这不仅帮助你熟悉 Vue3 的基本语法和组件化开发，同时也加深了对响应式系统和状态管理的理解。

通过逐步构建和扩展这个应用，你可以更深入地理解和应用 Vue3 的功能。实际开发中，你还需要学习如何利用第三方库、插件和工具来优化性能和提升用户体验。