Vue3教程：初学者必备指南-原创手记-慕课网

概述

本文档详细介绍了如何安装和使用Vue3，涵盖了组件创建、路由配置、状态管理和响应式数据绑定等核心概念。通过丰富的代码示例，帮助开发者快速上手并应用于实际项目中。

Vue3简介

Vue.js 是一个用于构建用户界面的渐进式框架。它非常容易学习，并且可以融入到现有的项目中。Vue3是Vue.js的最新版本，带来了许多改进和新特性。

Vue3的核心概念

Vue3引入了一些关键的新特性和改进，包括但不限于：

Composition API：允许更灵活地组织和重用逻辑。
Teleport：允许组件的内容在渲染时被移动到DOM中的任何位置。
Fragments：允许组件返回多个根节点。
更好地支持TypeScript：提供与TypeScript更紧密的集成。
更好的性能：优化了变更检测机制，提升了虚拟DOM的渲染效率。

Vue3与Vue2的区别

Vue3与Vue2相比，主要改进如下：

性能提升：优化了变更检测机制，提升了虚拟DOM的渲染效率。
核心API重构：引入Composition API替代了Options API，提供了更灵活的状态管理方式。
更好的TypeScript支持：提升了与TypeScript的兼容性，支持更复杂的类型定义。
Tree Shaking：更好地支持Tree Shaking，允许开发者更灵活地处理代码模块。
更好的错误处理：改进了错误报告机制，使开发调试更加方便。

创建第一个Vue3项目

使用Vue CLI创建项目

安装Vue3的方式有很多种，最推荐的是使用Vue CLI（命令行工具）来快速创建Vue项目。下面是使用Vue CLI安装Vue3的步骤：

安装Vue CLI：
```
npm install -g @vue/cli
```
创建Vue项目：
```
vue create my-vue-app
```
选择Vue版本：
在创建项目时，可以选择特定的Vue版本。输入3将选择Vue3。
进入项目：
```
cd my-vue-app
```
启动开发服务器：
```
npm run serve
```

项目结构解析

Vue CLI创建的项目结构如下：

my-vue-app/
├── node_modules/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   ├── main.js
│   └── router/
├── .browserslistrc
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
└── vue.config.js

public：存放公共资源文件，如index.html和favicon.ico。
src：存放项目的主要代码。
- assets：存放静态资源文件，如图片、字体等。
- components：存放组件文件。
- App.vue：项目的根组件。
- main.js：项目的入口文件。
- router：存放路由配置文件。

启动开发服务器

启动开发服务器，控制台会输出Vue3项目已经成功启动的消息。控制台会显示访问项目的URL，通常是http://localhost:8080。

npm run serve

Vue3组件基础

创建和使用组件

组件是Vue应用的基本构建块。组件可以用于构建可重用的代码，实现更好的模块化。以下是创建一个简单的Vue组件的基本步骤：

创建组件文件：
在src/components目录下创建一个名为HelloWorld.vue的文件。

定义组件结构：
HelloWorld.vue中的基本结构如下：

<template>
 <div class="hello">
   <h1>欢迎来到Vue3！</h1>
 </div>
</template>

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

<style scoped>
.hello {
 text-align: center;
 margin-top: 50px;
}
</style>

在其他组件中使用：
在App.vue中引入并使用HelloWorld组件：

<template>
 <div id="app">
   <HelloWorld />
 </div>
</template>

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

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

<style>
#app {
 font-family: Avenir, Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

Props和事件绑定

Props

组件可以通过props属性来接收外部传递的数据。例如，HelloWorld组件可以接受一个名为message的prop：

<template>
  <div class="hello">
    <h1>{{ message }}</h1>
  </div>
</template>

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

在App.vue中传递message给HelloWorld组件：

<template>
  <div id="app">
    <HelloWorld message="欢迎来到Vue3项目！" />
  </div>
</template>

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

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

事件绑定

组件可以通过emit来触发自定义事件，并在父组件中监听这些事件。例如，HelloWorld组件可以向父组件发送一个自定义事件greet：

<template>
  <div class="hello">
    <h1>{{ message }}</h1>
    <button @click="sendGreeting">发送问候</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    message: String
  },
  methods: {
    sendGreeting() {
      this.$emit('greet', '你好！')
    }
  }
}
</script>

在App.vue中监听greet事件：

<template>
  <div id="app">
    <HelloWorld message="欢迎来到Vue3项目！" @greet="handleGreeting" />
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  methods: {
    handleGreeting(message) {
      alert(message)
    }
  }
}
</script>

生命周期钩子

组件的生命周期包括创建、挂载、更新、销毁等阶段。每个阶段都有对应的生命周期钩子，可以在这些钩子中执行相应的逻辑。例如：

<template>
  <div>
    <h1 v-if="isVisible">欢迎来到Vue3项目！</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      isVisible: true
    }
  },
  beforeCreate() {
    console.log('beforeCreate')
  },
  created() {
    console.log('created')
  },
  beforeMount() {
    console.log('beforeMount')
  },
  mounted() {
    console.log('mounted')
  },
  beforeUpdate() {
    console.log('beforeUpdate')
  },
  updated() {
    console.log('updated')
  },
  beforeUnmount() {
    console.log('beforeUnmount')
  },
  unmounted() {
    console.log('unmounted')
  },
  activated() {
    console.log('activated')
  },
  deactivated() {
    console.log('deactivated')
  }
}
</script>

Vue3响应式原理

响应式数据绑定

Vue3通过Proxy对象实现响应式数据绑定。当数据发生变化时，Vue会自动更新视图。ref和reactive是两个核心的API，用于创建响应式数据。

`ref`

ref用于创建一个响应式引用，适用于基本类型的数据。

import { ref } from 'vue'

const count = ref(0)
console.log(count.value) // 输出：0
count.value = 1
console.log(count.value) // 输出：1

在模板中使用ref：

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

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const increment = () => {
      count.value++
    }
    return {
      count,
      increment
    }
  }
}
</script>

`reactive`

reactive用于创建一个响应式对象，适用于复杂的数据结构。

import { reactive } from 'vue'

const state = reactive({
  count: 0
})
console.log(state.count) // 输出：0
state.count = 1
console.log(state.count) // 输出：1

在模板中使用reactive：

<template>
  <div>
    <p>{{ state.count }}</p>
    <button @click="increment">点击</button>
  </div>
</template>

<script>
import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0
    })
    const increment = () => {
      state.count++
    }
    return {
      state,
      increment
    }
  }
}
</script>

深度监听和浅层监听

Vue3的响应式系统默认只监听顶层属性的变化。如果需要监听对象内部属性的变化，可以使用shallowRef和shallowReactive。

`shallowRef`

shallowRef用于创建一个浅层响应式的引用，只监听顶层属性的变化。

import { shallowRef } from 'vue'

const nested = shallowRef({
  count: 0
})
console.log(nested.value.count) // 输出：0
nested.value.count = 1
console.log(nested.value.count) // 输出：1
nested.value = { count: 2 }
console.log(nested.value.count) // 输出：2

`shallowReactive`

shallowReactive用于创建一个浅层响应式的对象，只监听顶层属性的变化。

import { shallowReactive } from 'vue'

const nested = shallowReactive({
  count: 0
})
console.log(nested.count) // 输出：0
nested.count = 1
console.log(nested.count) // 输出：1
nested = { count: 2 }
console.log(nested.count) // 输出：2

Vue3路由和状态管理

使用Vue Router进行路由配置

Vue Router是Vue官方的路由管理器，用于实现单页面应用的路由。以下是配置Vue Router的基本步骤：

安装Vue Router：
```
npm install vue-router@next
```
创建路由配置文件：
在src目录下创建一个router文件夹，并在其中创建一个index.js文件。

配置路由：

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

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

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

export default router

在主应用文件中引入路由：

// 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')

创建视图组件：
在src/views目录下创建Home.vue和About.vue组件。例如：

<!-- Home.vue -->
<template>
 <div>
   <h1>首页</h1>
 </div>
</template>

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

<!-- About.vue -->
<template>
 <div>
   <h1>关于我们</h1>
 </div>
</template>

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

在模板中使用路由链接：

<template>
 <div id="app">
   <router-link to="/">Home</router-link>
   <router-link to="/about">About</router-link>
   <router-view></router-view>
 </div>
</template>

<script>
import { createApp } from 'vue'
import router from './router'

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

Vuex的基本使用

Vuex是一个用于 Vue.js 的状态管理库，用来实现应用级别的状态管理。以下是使用Vuex的基本步骤：

安装Vuex：
```
npm install vuex@next
```
创建Vuex Store：
在src目录下创建一个store文件夹，并在其中创建一个index.js文件。

配置Vuex Store：

import { createStore } from 'vuex'

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

在主应用文件中引入Store：

// 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')

在组件中使用Store：

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

<script>
import { useStore } from 'vuex'

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

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

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

状态管理最佳实践

模块化：将状态拆分成模块，确保每个模块只管理一部分状态。
组合使用：结合使用mapState、mapMutations等辅助函数，使代码更简洁。
异步操作：使用Actions处理异步操作，保持Mutations的纯函数特性。
持久化：使用插件如vuex-persistedstate来持久化状态，以在页面刷新后保留数据。

Vue3实战应用

实际项目案例解析

一个实际的Vue3项目可能包括用户界面、后端API交互、状态管理等功能。以下是一个简单的示例，展示如何构建一个包含登录页面的应用。

创建登录页面：
在src/views目录下创建一个Login.vue组件。

<template>
 <div class="login">
   <h1>登录</h1>
   <form @submit.prevent="handleSubmit">
     <div>
       <label for="username">用户名：</label>
       <input type="text" id="username" v-model="username" />
     </div>
     <div>
       <label for="password">密码：</label>
       <input type="password" id="password" v-model="password" />
     </div>
     <button type="submit">登录</button>
   </form>
 </div>
</template>

<script>
import { ref } from 'vue'
import { useStore } from 'vuex'

export default {
 setup() {
   const username = ref('')
   const password = ref('')
   const store = useStore()

   const handleSubmit = () => {
     // 处理登录逻辑
     store.dispatch('login', {
       username: username.value,
       password: password.value
     })
   }

   return {
     username,
     password,
     handleSubmit
   }
 }
}
</script>

<style scoped>
.login {
 text-align: center;
 margin-top: 50px;
}
</style>

在路由中添加登录页面：
更新router/index.js文件，添加登录页面的路由配置。

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

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

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

export default router

在模板中添加导航链接：
在App.vue中添加导航链接到登录页面。


<template>
 <div id="app">
   <router-link to="/">Home</router-link>
   <router-link to="/about">About</router-link>
   <router-link to="/login">登录</router-link>
   <router-view></router-view>
 </div>
</template>

<script>
import { createApp } from 'vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')
</script>
``

常见问题及解决方案

无法获取全局变量：确保在组件中正确使用useStore来访问全局状态。
响应式更新不及时：检查数据绑定是否正确，确保在更改数据时正确使用ref或reactive。
路由不工作：确保正确配置了路由，检查路由文件的路径和组件是否正确引入。
状态管理不生效：确保在组件中正确使用useStore和mapState等辅助函数，并检查Action和Mutation是否正确执行。

总结与回顾

通过本指南，我们学习了如何安装和使用Vue3，创建和管理组件，使用路由和状态管理库。Vue3的响应式系统和Composition API提供了强大而灵活的开发体验，使得构建复杂的前端应用变得更加容易。希望这些内容能够帮助你快速上手Vue3，并在实际项目中发挥其优势。