Vue3学习：从入门到初级实战教程

Vue3学习涵盖了从环境搭建到基础语法、组件化开发、路由和状态管理等多个方面。本文详细介绍了Vue3的新特性和改进，帮助开发者高效地入门和掌握Vue3。通过实例和代码示例，你可以逐步构建和优化你的Vue3项目。此外，文章还提供了项目部署和版本控制的指导，确保你的应用能够顺利上线。

Vue3简介与环境搭建

Vue3是Vue.js的最新版本，发布于2020年9月，它不仅优化了性能，还引入了许多新特性和改进。以下是Vue3的一些主要特性：

1. Composition API：为开发者提供一种更灵活的API来组合逻辑，以解决Options API在复杂项目中难以理解的问题。
2. Teleport：支持将DOM元素渲染到DOM中的任何位置。
3. Fragments：允许在单个组件中渲染多个根元素。
4. 更小的体积：Vue3的体积比Vue2小41%，这使得更快的加载速度和更好的用户体验成为可能。
5. 更好的性能：Vue3在多次渲染时表现更好，重新激活了虚拟DOM优化。
6. TypeScript支持：改进了TypeScript支持，使得开发大型项目更加方便。

开发环境搭建

为了开始Vue3的开发，你需要安装Node.js和Vue CLI。Node.js是JavaScript运行环境，而Vue CLI是一个命令行工具，用于初始化、构建和管理Vue项目。

安装Node.js

首先，访问Node.js官网（https://nodejs.org/），下载并安装最新版本的Node.js。安装Node.js时，会同时安装npm（Node.js的包管理器）。

安装完成后，可以通过以下命令检查Node.js和npm是否安装成功：

node -v
npm -v

安装Vue CLI

接下来，使用npm全局安装Vue CLI：

npm install -g @vue/cli

安装完成后，可以通过以下命令检查Vue CLI是否安装成功：

vue --version

创建第一个Vue3项目

现在，你可以使用Vue CLI快速创建一个新的Vue3项目。首先，创建一个新的文件夹，并进入该文件夹：

mkdir my-vue3-app
cd my-vue3-app

然后，使用Vue CLI创建一个新的Vue3项目：

vue create my-vue3-app

在创建过程中，选择Vue3版本。Vue CLI会自动为你安装所有必要的依赖，并生成一个基本的Vue3项目结构。创建完成后，你可以使用以下命令启动开发服务器：

npm run serve

此时，开发服务器会启动，并在浏览器中打开localhost:8080，你可以看到Vue3的欢迎页面。

Vue3基础语法

在了解了Vue3的基本环境搭建之后，让我们深入学习一些基础语法。本节将介绍Vue3的响应式原理、模板语法、计算属性与方法，以及常用指令。

响应式原理简介

Vue3采用了Proxy代理来实现响应式。相比于Vue2中的Object.defineProperty，Proxy可以更好地处理数组和对象的响应式问题。在Vue3中，每个组件都有一个唯一的proxy，所有的数据劫持都是通过这个proxy来实现的。开发者可以通过修改这些响应式数据，触发视图更新。

响应式数据实例

下面是一个简单的响应式数据实例：

import { reactive } from 'vue';

const state = reactive({
  message: 'Hello Vue3'
});

// 修改响应式数据
state.message = 'Hello World';

在这个例子中，我们使用reactive函数创建了一个响应式对象state。当我们修改state.message时，Vue会自动检测到变化并刷新视图。

响应式数组实例

下面是一个数组响应式处理的实例：

import { reactive } from 'vue';

const state = reactive({
  items: ['Apple', 'Banana', 'Cherry']
});

// 向数组中添加元素
state.items.push('Date');

在这个例子中，我们可以通过直接操作数组来触发视图更新。

响应式对象实例

下面是一个对象响应式处理的实例：

import { reactive } from 'vue';

const state = reactive({
  user: {
    name: 'John Doe',
    age: 25
  }
});

// 修改对象属性
state.user.name = 'Jane Doe';

在这个例子中，我们可以通过修改对象的属性来触发视图更新。

模板语法

Vue3在模板语法方面与Vue2基本一致，但是有一些改进和新特性。模板语法主要分为插值、指令、绑定、事件处理等。

插值

插值是通过双大括号{{ }}来实现的，用于显示数据。

<div id="app">
  {{ message }}
</div>

export default {
  data() {
    return {
      message: 'Hello, Vue3!'
    };
  }
};

指令

指令是Vue中定义的特殊属性，用于实现特定功能。常见的指令有v-if、v-for、v-bind等。

<div id="app">
  <p v-if="show">这是一个条件渲染</p>
  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>
</div>

export default {
  data() {
    return {
      show: true,
      items: ['Apple', 'Banana', 'Cherry']
    };
  }
};

计算属性与方法

计算属性是基于数据依赖的计算，只有当数据变化时才会重新计算。方法则是普通的函数，每次调用都会重新计算。

计算属性

计算属性通过computed选项定义。

<div id="app">
  {{ fullName }}
</div>

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
};

方法

方法通过methods选项定义。

<div id="app">
  <button v-on:click="reverseName">点击反转名字</button>
  {{ reversedName }}
</div>

export default {
  data() {
    return {
      name: 'Vue'
    };
  },
  computed: {
    reversedName() {
      return this.name.split('').reverse().join('');
    }
  },
  methods: {
    reverseName() {
      this.name = this.reversedName;
    }
  }
};

组件化开发

Vue3强调组件化开发，组件是Vue应用的基本构建块。组件化开发可以提高代码的复用性和可维护性。

组件的基本概念

组件是自定义的HTML标签，可以包含HTML、CSS和JavaScript。每个组件都有自己的状态和逻辑，可以独立开发和复用。

创建组件

组件可以通过Vue.component全局注册或者在单文件组件中定义。

// 全局注册组件
Vue.component('my-component', {
  template: '<div>这是一个全局组件</div>'
});

// 单文件组件
<template>
  <div>
    这是一个单文件组件
  </div>
</template>
<script>
export default {
  name: 'MyComponent'
}
</script>

定义和使用组件

定义组件时，需要在components选项中指定。使用组件时，可直接在模板中使用自定义标签。

<template>
  <div id="app">
    <my-component></my-component>
  </div>
</template>
<script>
import MyComponent from './MyComponent.vue';

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

槽（slot）的使用

槽用于定义组件的默认内容区域，可以传递到组件内部。

<!-- 定义组件 -->
<template>
  <div>
    <header>这是头部</header>
    <slot></slot>
    <footer>这是底部</footer>
  </div>
</template>

<!-- 使用组件 -->
<my-component>
  <p>这是默认插槽内容</p>
</my-component>

组件的通信

组件间通信主要有父组件向子组件传递数据、子组件向父组件传递数据、兄弟组件通信等。

父组件向子组件传递数据

通过props属性传递数据。

<template>
  <div id="app">
    <child-component :message="message"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: '父组件传递的数据'
    };
  }
};
</script>

export default {
  props: ['message']
};

子组件向父组件传递数据

通过$emit触发自定义事件，父组件监听事件并接收数据。

<template>
  <div id="app">
    <child-component @my-event="handleEvent"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleEvent(data) {
      console.log(data);
    }
  }
};
</script>

export default {
  methods: {
    sendData() {
      this.$emit('my-event', '这是子组件传递的数据');
    }
  }
};

兄弟组件通信

可以通过父组件作为中间人实现通信。

<template>
  <div id="app">
    <child-component-a @event-from-a="handleEventFromA"></child-component-a>
    <child-component-b @event-from-b="handleEventFromB"></child-component-b>
  </div>
</template>
<script>
import ChildComponentA from './ChildComponentA.vue';
import ChildComponentB from './ChildComponentB.vue';

export default {
  components: {
    ChildComponentA,
    ChildComponentB
  },
  methods: {
    handleEventFromA(data) {
      this.$refs.childComponentB.receiveData(data);
    },
    handleEventFromB(data) {
      console.log(data);
    }
  }
};
</script>

<template>
  <div>
    <button @click="sendData">发送数据</button>
  </div>
</template>
<script>
export default {
  methods: {
    sendData() {
      this.$emit('event-from-a', '这是组件A的数据');
    }
  }
};
</script>

<template>
  <div>
    <button @click="receiveData">接收数据</button>
  </div>
</template>
<script>
export default {
  methods: {
    receiveData(data) {
      console.log(data);
    }
  }
};
</script>

Vue3路由基础

路由是Web应用中重要的技术之一，它允许用户通过URL来导航不同的页面或状态。Vue3通过Vue Router来实现单页面应用（SPA）的路由功能。

路由的基本概念

路由由一组路由规则构成，每个规则都定义了一条路径和一个对应的组件。当URL发生改变时，路由规则会匹配对应的组件，并将该组件渲染到页面上。

安装和配置Vue Router

首先，需要安装Vue Router：

npm install vue-router@next

然后，导入并创建路由实例。

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  {
    path: '/',
    component: () => import('./components/Home.vue')
  },
  {
    path: '/about',
    component: () => import('./components/About.vue')
  }
];

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

路由的使用与管理

在Vue应用中，可以通过<router-view>标签来渲染匹配的组件。

<template>
  <div id="app">
    <router-link to="/">主页</router-link>
    <router-link to="/about">关于</router-link>
    <router-view></router-view>
  </div>
</template>
<script>
import { createApp } from 'vue';
import router from './router';

const app = createApp({});
app.use(router);
app.mount('#app');
</script>

路由守卫

路由守卫分为全局守卫、独享守卫和组件内守卫，可以用于控制路由的导航行为。

全局守卫

全局守卫对所有导航进行拦截。

router.beforeEach((to, from, next) => {
  console.log(`从 ${from.path} 导航到了 ${to.path}`);
  next();
});

独享守卫

独享守卫只针对特定路由进行拦截。

const routes = [
  {
    path: '/about',
    component: () => import('./components/About.vue'),
    beforeEnter: (to, from, next) => {
      console.log(`从 ${from.path} 导航到了 ${to.path}`);
      next();
    }
  }
];

组件内守卫

组件内守卫直接在组件中定义。

export default {
  beforeRouteEnter(to, from, next) {
    // 在进入组件前调用
  },
  beforeRouteUpdate(to, from, next) {
    // 在组件更新时调用
  },
  beforeRouteLeave(to, from, next) {
    // 在离开组件前调用
  }
};

Vue3状态管理

在大型应用中，数据状态管理是必不可少的。Vue3通过Vuex来实现全局状态管理，可以帮助开发者更好地处理复杂的应用状态。

Vuex介绍

Vuex是一个专为Vue.js应用设计的状态管理模式。它采用集中式的存储，使组件可以方便地读取或修改状态。Vuex包含一个唯一的存储对象，所有组件都可以通过该对象访问状态。

安装和配置Vuex

首先，安装Vuex：

npm install vuex@next

然后，创建一个Vuex实例并将其挂载到Vue应用中。

import { createStore } from 'vuex';

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

export default store;

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

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

使用Vuex进行状态管理

在组件中，可以通过mapState和mapActions等辅助函数来方便地访问状态和执行动作。

<template>
  <div id="app">
    <p>{{ count }}</p>
    <button @click="increment">点击加1</button>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex';

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

案例实践：购物车应用

购物车应用是一个典型的全局状态管理场景。我们需要维护一个购物车的状态，包括商品列表、数量等信息。

首先，创建一个store文件夹，并在其中定义状态和相关的操作。

import { createStore } from 'vuex';

const store = createStore({
  state() {
    return {
      cart: []
    };
  },
  mutations: {
    addToCart(state, product) {
      state.cart.push(product);
    },
    removeFromCart(state, index) {
      state.cart.splice(index, 1);
    }
  },
  actions: {
    addProduct({ commit }, product) {
      commit('addToCart', product);
    },
    removeProduct({ commit }, index) {
      commit('removeFromCart', index);
    }
  }
});

export default store;

然后，在组件中使用这些状态和动作。

<template>
  <div id="app">
    <div>
      <p v-for="(product, index) in cart" :key="index">
        {{ product.name }} - {{ product.price }} <button @click="removeProduct(index)">移除</button>
      </p>
    </div>
    <button @click="addProduct">添加商品</button>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['cart'])
  },
  methods: {
    ...mapActions(['addProduct', 'removeProduct'])
  }
};
</script>

Vue3项目部署

在开发完Vue3项目后，需要将其部署到生产环境。本节将介绍项目打包、部署到本地服务器，以及使用Git进行版本控制。

项目打包

首先，通过npm run build命令将项目打包成静态文件。

npm run build

执行完该命令后，项目会被打包到dist目录下。

部署到本地服务器

可以将打包后的文件部署到任何静态文件服务器上。常用的静态文件服务器有Apache、Nginx、Express等。

使用Express

安装Express：

npm install express

创建一个简单的服务器：

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'dist')));

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`服务器启动，监听端口 ${port}`);
});

运行服务器：

node server.js

使用Apache

将打包后的文件放入Apache的htdocs目录下，配置虚拟主机或.htaccess文件。

使用Nginx

将打包后的文件放入Nginx的html目录下，配置Nginx服务器。

使用Git进行版本控制

Git是一个分布式版本控制系统，可以帮助开发者追踪和管理项目的历史记录。

初始化Git仓库

在项目根目录下初始化Git仓库：

git init

添加文件到Git

将项目文件添加到Git：

git add .

提交文件到Git

提交文件到Git：

git commit -m "初始化项目"

推送到远程仓库

创建一个远程仓库，如使用GitHub或GitLab。将本地仓库推送到远程仓库：

git remote add origin <远程仓库URL>
git push -u origin master