Vue3学习入门：初学者必备指南

本文全面介绍了Vue3的基础概念、核心特性、项目搭建、组件化开发、数据绑定与计算属性、路由与导航及状态管理等内容，帮助读者快速掌握Vue3学习入门的知识点。从Vue3的安装配置到使用Vue Router和Vuex进行应用开发，文章详细解析了每个重要环节。通过阅读本文，开发者能够高效地开发现代单页面应用。

什么是Vue3

Vue.js 是一个渐进式 JavaScript 框架，它允许开发者逐步将 Vue 添加到现有的项目中，或者从零开始构建单页面应用。Vue 3 是 Vue.js 的最新主要版本，它在 Vue 2 的基础上进行了多项改进，包括性能优化、TypeScript 支持增强、更小的体积、更好的错误处理等。

Vue 3 引入了许多新功能和改进，使开发者能够更高效地开发现代单页应用。Vue 3 使用了 Proxy 来实现响应式系统，这使得 Vue 3 的响应式系统比 Vue 2 更加高效和灵活。

Vue3的核心特性

• Composition API: Vue 3 引入了 Composition API，它允许开发者更好地组织逻辑，避免在 Options API 下因选项过多而造成的代码组织混乱。

  <!-- 使用Composition API的组件示例 -->
  <template>
  <div>
    <p>{{ message }}</p>
  </div>
  </template>
  
  <script>
  import { ref, onMounted } from 'vue'
  
  export default {
  setup() {
    const message = ref('Hello, Composition API!')
  
    onMounted(() => {
      console.log('Component is mounted')
    })
  
    return {
      message
    }
  }
  }
  </script>

• Teleport: Vue 3 中引入了 Teleport，它允许开发者将组件的渲染结果移动到 DOM 中的任何位置。

  <!-- 使用Teleport的组件示例 -->
  <template>
  <teleport to="#portal">
    <div>{{ message }}</div>
  </teleport>
  </template>
  
  <script>
  export default {
  data() {
    return {
      message: 'Hello from Teleport'
    }
  }
  }
  </script>

• Fragments: Vue 3 支持 Fragments，允许组件有两个根元素，而不需要在组件内部添加一个额外的 DOM 元素。

  <!-- 使用Fragments的组件示例 -->
  <template>
  <div>
    <slot></slot>
    <p>Fragment content</p>
  </div>
  </template>

• 更好的错误处理: Vue 3 提供了更详细的错误提示，有助于开发者更快地定位问题。

• TypeScript 支持: Vue 3 支持 TypeScript，可以更好地利用 TypeScript 的静态类型检查。

安装和配置Vue3

安装 Vue CLI 是推荐的方式，它可以帮助你快速搭建 Vue 3 项目。

安装 Vue CLI

首先，你需要全局安装 Vue CLI：

npm install -g @vue/cli

接下来，使用 Vue CLI 创建一个新的 Vue 3 项目：

vue create my-vue3-project

在创建过程中，你会看到一个界面提示你选择 Vue 3 作为目标版本：

Vue CLI 4.5.1
? Please pick a preset (Use arrow keys to navigate): 
Use (0 of 2) › default (babel, router, vuex, css preprocessor)
  Default ([https://cli.vuejs.org](https://cli.vuejs.org), preset: '@vue/cli-plugin-babel', '@vue/cli-plugin-router', '@vue/cli-plugin-vuex', '@vue/cli-plugin-eslint', '@vue/cli-plugin-typescript')
Use (1 of 2) › vue-ts (babel, router, vuex, css preprocessor, TS)
  Vue 3 + TypeScript

选择 vue-ts 配置，它会创建一个使用 Vue 3 和 TypeScript 的项目。

项目启动

安装完成后，进入项目目录并启动项目：

cd my-vue3-project
npm run serve

这样便可以在浏览器中访问你的 Vue 3 项目。

使用Vue CLI快速搭建Vue3项目

使用 Vue CLI 快速搭建 Vue 3 项目可以节省大量的配置时间。在安装 Vue CLI 并创建项目后，你将得到一个基本的项目结构，包括必要的配置文件和开发工具。

项目目录结构解析

一个典型的 Vue CLI 创建的 Vue 3 项目目录结构如下：

my-vue3-project
│   .editorconfig
│   .gitignore
│   babel.config.js
│   jest.config.js
│   package-lock.json
│   package.json
│   README.md
│   vue.config.js
│
├── public
│   ├── favicon.ico
│   └── index.html
│
├── src
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   ├── App.vue
│   └── main.js
│
└── tests
    └── unit
        └── hello-world.spec.js

目录结构解析

• .editorconfig：编辑器配置文件，用于统一编辑器的设置。
• .gitignore：定义了哪些文件或文件夹不应该被 Git 跟踪。
• babel.config.js：Babel 配置文件，用于转换 ES6+ 代码。
• jest.config.js：Jest 测试框架配置文件。
• package-lock.json 和 package.json：项目依赖和配置管理。
• README.md：项目说明文档。
• vue.config.js：Vue CLI 配置文件，可以用于自定义构建配置。
• public：存放静态资源，如 favicon 和 HTML 模板。
• src：项目的源代码目录，包括组件、资源文件和入口文件。
• tests：存放单元测试文件。

App.vue 示例

<template>
  <div id="app">
    <HelloWorld msg="Welcome to Your Vue.js App" />
  </div>
</template>

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

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

main.js 示例

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

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

项目运行

要启动项目，使用以下命令：

npm run serve

这个命令会启动开发服务器，并在浏览器中自动打开 http://localhost:8080，你可以看到简单的 Hello World 示例。

组件的基本概念

Vue.js 的核心概念之一是组件化。组件是 Vue 应用的基础构建块，它可以被独立地开发、测试和重用。组件可以包含 HTML 模板、JavaScript 逻辑和样式，这使得开发可维护且可复用的代码变得更容易。

创建和使用组件

在 Vue 3 中，组件可以通过以下几种方式创建：

1. 使用 <template> 标签

<template>
  <div>
    <h1>Hello, {{ name }}</h1>
    <p>This is a Vue 3 component</p>
  </div>
</template>

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

<style scoped>
h1 {
  color: blue;
}
</style>

2. 使用 .vue 文件

将上述代码保存为 MyComponent.vue 文件，然后在其他组件中引用它：

<template>
  <div>
    <MyComponent name="Vue 3" />
  </div>
</template>

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

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

组件间的通信

1. 父子组件通信

父组件可以通过 props 向子组件传递数据，子组件可以通过 emit 事件向父组件传递数据。

子组件通过 props 接收数据：

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

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

父组件传递数据给子组件：

<template>
  <div>
    <ChildComponent :message="parentMessage" />
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    }
  }
}
</script>

2. 子父组件通信：事件

在子组件中，可以使用 this.$emit 来触发事件，并向父组件传递数据。

子组件触发事件：

<template>
  <button @click="handleClick">Click me</button>
</template>

<script>
export default {
  name: 'ChildComponent',
  methods: {
    handleClick() {
      this.$emit('click', 'This is from child')
    }
  }
}
</script>

父组件监听事件：

<template>
  <div>
    <ChildComponent @click="handleChildClick" />
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    ChildComponent
  },
  methods: {
    handleChildClick(data) {
      console.log(data)
    }
  }
}
</script>

模板语法

Vue 3 的模板语法允许开发者在 HTML 中插入变量和逻辑。Vue 3 使用双大括号 {{ }} 进行变量绑定，使用 v-if、v-for 等指令进行逻辑控制。

变量绑定

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

<script>
export default {
  name: 'App',
  data() {
    return {
      message: 'Hello Vue 3!'
    }
  }
}
</script>

条件渲染

<template>
  <div>
    <p v-if="isTrue">This is true</p>
    <p v-else>This is false</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      isTrue: true
    }
  }
}
</script>

列表渲染

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

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

v-model双向数据绑定

v-model 是一个用于双向数据绑定的指令，它可以在输入框、复选框、单选按钮等表单元素上使用，自动将表单元素的值绑定到 Vue 实例的数据属性上。

<template>
  <div>
    <input v-model="username" placeholder="Enter username">
    <p>Username: {{ username }}</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      username: ''
    }
  }
}
</script>

计算属性和侦听器

计算属性

计算属性是基于其依赖缓存的结果，依赖改变时才会重新计算。这对于只读属性或者复杂的数据计算非常适合。

<template>
  <div>
    <p>Original message: {{ message }}</p>
    <p>Computed reversed message: {{ reversedMessage }}</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      message: 'Hello'
    }
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('')
    }
  }
}
</script>

侦听器

侦听器类似于计算属性，但它们可以接受一个回调函数，当响应式属性变化时触发该回调函数。

<template>
  <div>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      count: 0
    }
  },
  watch: {
    count(newVal, oldVal) {
      console.log(`Count changed from ${oldVal} to ${newVal}`)
    }
  }
}
</script>

安装和配置Vue Router

Vue Router 是 Vue.js 的官方路由插件，它允许你在应用中定义多个视图，每个视图包含一个组件。要使用 Vue Router，首先需要安装它：

npm install vue-router@4

配置 Vue Router

创建一个 router.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 中引入并使用 router：

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

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

路由的基本使用

在组件中使用 router-link 来导航到不同页面：

<template>
  <div>
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view />
  </div>
</template>

定义相应的组件：

<!-- src/views/Home.vue -->
<template>
  <div>
    <h1>Home</h1>
  </div>
</template>

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

<!-- src/views/About.vue -->
<template>
  <div>
    <h1>About</h1>
  </div>
</template>

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

动态路由和参数传递

动态路由允许你基于 URL 的一部分来匹配路由。例如，可以基于用户 ID 来显示用户详情。

动态路由

定义动态路由：

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/users/:id',
    name: 'User',
    component: User
  }
]

在组件中访问动态参数：

<!-- src/views/User.vue -->
<template>
  <div>
    <h1>User {{ $route.params.id }}</h1>
  </div>
</template>

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

参数传递

可以通过 router-link 传递参数：

<router-link :to="{ name: 'User', params: { id: 1 } }">User 1</router-link>

也可以通过编程方式导航：

this.$router.push({ name: 'User', params: { id: 2 } })

Vuex简介

Vuex 是 Vue.js 的状态管理模式，它是一个专为 Vue.js 应用设计的状态管理模式。Vuex 可以帮助你管理应用中的共享状态，避免组件间复杂的 props 传递，使应用更易于维护。

安装和配置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: {
    incrementBy(context, payload) {
      context.commit('increment', payload)
    }
  },
  getters: {
    count: state => state.count
  }
})

在 main.js 中引入并使用 store：

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

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

使用Vuex管理应用状态

在组件中使用 Vuex 的状态：

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

<script>
import { mapState, mapActions } from 'vuex'

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

以上就是 Vue 3 的基础概念、项目搭建、组件化开发、数据绑定与计算属性、路由与导航、状态管理等知识点的介绍。希望通过这些知识点的学习，你能够快速上手使用 Vue 3 开发现代的单页面应用。如果你需要更深入的学习，可以参考慕课网的相关课程。