Vue 3快速上手 - 《Vue3.js编程详解》 - 严富坤的知识库专栏(yanfukun.com)

为什么选择 Vue 3
- 背景和初衷
- 优势和劣势
适用场景
- 业务场景
- 技术场景
Vue 3 的组成部分和关键点
- 核心库
- 关键组成部分
底层原理和关键实现
Vue 3 快速入门示例
其他重要特性
- Vue Router
- Vuex
总结

Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。与其他大型框架不同，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，并且非常容易学习。通过 Vue 3，开发者可以享受到更高的性能、更加灵活的 API 以及更好的 TypeScript 支持。本文将带你快速入门 Vue 3，帮助你在短时间内掌握这个强大的工具。

为什么选择 Vue 3

背景和初衷

Vue.js 由尤雨溪（Evan You）创建，目的是提供一个更简洁、更易用的前端框架。Vue 3 是对 Vue 2 的重大改进，引入了诸多新特性和性能优化，使得开发更加高效、愉快。

优势和劣势

优势：

性能提升：Vue 3 使用 Proxy 代替了 Vue 2 中的 Object.defineProperty，使得响应式系统性能显著提升。
更好的 TypeScript 支持：Vue 3 从底层架构上对 TypeScript 进行了更好的支持，开发者可以更方便地进行类型检查。
组合式 API：引入了 Composition API，使得逻辑复用更加灵活。
更小的包体积：Vue 3 对包体积进行了优化，使其在同样功能下更小。

劣势：

学习成本：对于熟悉 Vue 2 的开发者来说，组合式 API 的引入需要一段时间的适应。
社区和生态：虽然 Vue 3 有很好的向后兼容性，但部分第三方库可能还未完全适配。

适用场景

业务场景

Vue 3 适用于各类业务场景，特别是以下几种：

单页应用（SPA）：通过 Vue Router 和 Vuex，可以构建复杂的单页应用。
中小型项目：由于其轻量级特性，Vue 非常适合中小型项目。
渐进式增强：可以逐步将现有项目迁移到 Vue 3，减少开发风险。

技术场景

组件化开发：Vue 的组件系统使得开发者可以高效地管理和复用代码。
响应式数据绑定：数据驱动视图更新，减少手动操作 DOM 的繁琐。
SSR（服务端渲染）：提高 SEO 和首屏渲染速度。

Vue 3 的组成部分和关键点

核心库

Vue 3 的核心库提供了基础的视图层功能。以下是几个核心概念：

组件：Vue 3 中的所有东西都是组件。组件是可复用的 Vue 实例。
模板语法：通过模板语法可以声明式地将数据渲染成 DOM。
响应式系统：Vue 3 的响应式系统使用 Proxy 实现，对数据变化做出高效反应。

关键组成部分

Vue 实例
模板语法
指令
计算属性和侦听器
组件系统
插件和生态系统

底层原理和关键实现

响应式系统

Vue 3 的响应式系统是其核心创新之一。它基于 JavaScript 的 Proxy 实现，能够高效地追踪对象和数组的变化。每个 Vue 组件都有自己的响应式数据对象，这些对象的变动会触发组件的重新渲染。

虚拟 DOM

Vue 3 使用虚拟 DOM 来提高渲染性能。虚拟 DOM 是对真实 DOM 的抽象表示，它允许 Vue 在内存中计算差异，然后只进行必要的 DOM 更新。这种方法大大提高了性能，特别是在复杂的应用中。

组合式 API

组合式 API 是 Vue 3 的重要特性之一，它允许开发者通过函数将逻辑组织在一起，而不是依赖于组件的生命周期钩子。通过组合式 API，可以更灵活地复用逻辑，增强代码的可读性和可维护性。

Vue 3 快速入门示例

创建 Vue 项目

首先，你需要确保你的系统中安装了 Node.js 和 npm 或 yarn。然后使用 Vue CLI 创建一个新的 Vue 项目：

npm install -g @vue/cli
vue create my-vue-app

按照提示选择项目配置，完成后进入项目目录并启动开发服务器：

cd my-vue-app
npm run serve

现在，你已经创建了一个 Vue 3 项目，并且可以在浏览器中看到默认的欢迎页面。

基本项目结构

Vue 3 项目的基本结构如下：

my-vue-app
├── public
│   └── index.html
├── src
│   ├── assets
│   ├── components
│   ├── App.vue
│   └── main.js
├── .gitignore
├── babel.config.js
├── package.json
└── README.md

public/index.html：应用的主 HTML 文件。
src/App.vue：根组件。
src/main.js：应用的入口文件。

编写第一个组件

创建一个新的组件文件 src/components/HelloWorld.vue：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>
<style scoped>
.hello {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

在 src/App.vue 中使用这个组件：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </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;
}
#nav {
  padding: 30px;
}
#nav a {
  font-weight: bold;
  color: #42b983;
}
</style>

使用组合式 API

让我们使用组合式 API 重写 HelloWorld.vue 组件：

<template>
  <div class="hello">
    <h1>{{ message }}</h1>
  </div>
</template>
<script>
import { ref } from 'vue'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  setup(props) {
    const message = ref(props.msg)
    return { message }
  }
}
</script>
<style scoped>
.hello {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

其他重要特性

Vue Router

Vue Router 是 Vue.js 的官方路由管理器，用于构建单页应用。在 Vue 3 中，Vue Router 提供了更加灵活的配置和更强大的功能。

安装 Vue Router：

npm install vue-router

配置路由：

// 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(process.env.BASE_URL),
  routes
})
export default router

在 src/main.js 中引入路由：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')

Vuex

Vuex 是 Vue.js 的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

安装 Vuex：

npm install vuex@next

配置 Vuex：

// src/store/index.js
import { createStore } from 'vuex'
export default createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment({ commit }) {
 commit('increment')
    }
  },
  modules: {}
})

在 src/main.js 中引入 Vuex：

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
createApp(App).use(store).mount('#app')

在组件中使用 Vuex：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
  name: 'Counter',
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapActions(['increment'])
  }
}
</script>

总结

Vue 3 作为 Vue.js 的最新版本，引入了众多新特性和改进，使得开发者能够更加高效地构建现代 Web 应用。通过本文，你应该已经了解了 Vue 3 的核心概念和基本用法，并能够创建一个简单的 Vue 3 项目。尽管 Vue 3 相对于 Vue 2 有一定的学习曲线，但它的性能提升和灵活性无疑将使你的开发体验更上一层楼。随着对 Vue 3 的深入学习和实践，你将能更好地利用其强大功能，构建出更加复杂和高效的应用。