Vue3教程：新手入门与初级实践指南

Vue3教程涵盖了从基础概念到项目搭建、组件化开发、路由配置等多个方面，帮助新手快速入门并进行初级实践。文章详细介绍了Vue3的新特性、安装步骤、项目创建与配置等内容，确保开发者能够全面掌握Vue3的使用方法。此外，还深入讲解了组件化开发、响应式系统以及事件处理等核心功能，助力开发者构建高效稳定的Vue3应用。

Vue.js及其版本历史

Vue.js 是一个渐进式前端框架，旨在构建用户界面。Vue的核心库只关注视图层，易于上手，同时也提供了丰富的工具链用于构建大型单页应用。Vue 2.0 版本在2016年发布，随后在2019年，Vue.js 3.0 的 Alpha 版本发布，带来了许多改进，包括更好的类型支持、更快的渲染速度和更小的体积等。Vue 3.0 官方版本于2020年9月发布，引入了许多新的特性和改进，以提高开发效率和应用性能。

Vue3的新特性概览

Vue 3 相较于其前代版本有以下几个主要的新特性：

1. 更快的渲染速度：Vue 3 通过改进优化了内部实现，使得渲染速度大幅提高。
2. 更小的体积：Vue 3 通过代码拆分和压缩等方法，使框架体积减小了约41%。
3. 更好的类型支持：Vue 3 与 TypeScript 的兼容性更好，提供了类型定义文件，使得开发者可以使用静态类型检查。
4. Composition API：这是一种新的 API 设计，旨在解决 Vue 2 中 Option API 存在的痛点，如复用逻辑难以模块化、逻辑难以复用等。
5. Teleport：允许组件内容渲染到 DOM 的任何位置。
6. Fragments：允许组件拥有多个根元素。
7. 更好的错误处理： Vue 3 提供了更明确的错误信息，帮助开发者更容易地定位和修复代码问题。

例如，Composition API 的基本用法如下：

import { ref, reactive } from 'vue'
import { createApp } from 'vue'

const app = createApp(App)

const count = ref(0)
const state = reactive({
  message: 'Hello, Vue3!'
})

app.mount('#app')

安装Vue3与环境搭建

安装 Vue 3 需要以下步骤：

1. Node.js的安装：Node.js 是运行 Vue CLI 和其他依赖项的必要前提。请确保安装 Node.js 的最新版本。

2. 安装Vue CLI：Vue CLI 是一个命令行工具，用于搭建 Vue.js 项目的脚手架。要安装 Vue CLI，请在终端中运行以下命令：

   npm install -g @vue/cli

3. 创建项目：使用 Vue CLI 创建一个新的 Vue 3 项目：

   vue create my-vue3-project

   运行以上命令后，你会被提示选择预设配置。选择 Manually select features，然后选择 Vue 3 作为预设。

4. 安装依赖：项目创建完成后，进入项目目录并运行以下命令安装依赖：

   cd my-vue3-project
   npm install

5. 运行项目：安装完成后，你可以使用以下命令启动开发服务器：

   npm run serve

使用Vue CLI快速搭建Vue3项目

Vue CLI（Vue Command Line Interface）是一个命令行工具，用于快速搭建 Vue.js 项目的脚手架。它可以帮助开发者快速创建 Vue.js 应用，并自动配置好所有需要的依赖。

使用 Vue CLI 创建 Vue 3 项目有以下几个步骤：

1. 全局安装Vue CLI：首先确保 Vue CLI 已安装。若未安装，请运行以下命令：

   npm install -g @vue/cli

2. 使用Vue CLI创建项目：在命令行中运行以下命令来创建一个新的 Vue 项目：

   vue create my-vue3-project

   这将打开一个交互式界面，让你选择预设配置，或手动选择特性。选择 Manually select features，然后选择 Vue 3 作为预设。

3. 选择特性：在手动选择特性时，你可以选择 Vue 3 选项，以及其他你可能需要的特性，如 Babel、CSS Pre-processors、Linting/Type Checking 等。

4. 安装依赖：项目创建完成后，进入项目目录并安装依赖：

   cd my-vue3-project
   npm install

5. 运行项目：完成安装后，你可以运行以下命令来启动开发服务器：

   npm run serve

项目结构解析

Vue CLI 创建的项目结构通常包含以下几个主要部分：

• src：源代码目录，包含项目的主要逻辑

  • main.js：项目的入口文件，这里导入并初始化 Vue 实例。示例如下：

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

  • App.vue：项目的根组件，通常在这里定义根 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>
  
  <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>

  • assets：存放静态资源（如图片、字体等）的地方。
  • components：存放 Vue 组件的地方。
• public：存放静态资源目录，如 index.html。
• node_modules：存放项目依赖的目录。
• package.json：存放项目的配置信息及依赖。
• README.md：项目说明文档。
• vue.config.js：Vue CLI 项目的配置文件，可以在这里进行一些项目级别的配置，如端口、静态资源路径等。

常用命令介绍

1. npm run serve：启动开发服务器，项目文件会实时更新，无需手动刷新浏览器。
2. npm run build：将项目构建为生产环境文件，生成的文件会放到 dist 目录下。
3. npm run lint：运行 ESLint 代码检查工具，确保代码符合编码规范。
4. npm run unit：运行单元测试。
5. npm run e2e：运行端到端测试。

组件的基本使用

Vue.js 是一种组件驱动的框架，这意味着你可以在项目中创建自定义组件，然后像使用 HTML 元素一样使用它们。组件是 Vue.js 最强大的功能之一，它们帮助我们以原子化的方式组织代码，使代码更易于维护和复用。

1. 创建组件：创建组件通常需要定义一个 JavaScript 对象，该对象包含了 template、script 和 style 三个部分。例如：

   <template>
    <div>
      <h1>Hello, {{ name }}!</h1>
    </div>
   </template>
   
   <script>
   export default {
    name: 'HelloWorld',
    props: {
      name: String
    }
   }
   </script>
   
   <style scoped>
   h1 {
    color: #42b983;
   }
   </style>

   上面的代码定义了一个名为 HelloWorld 的组件，它接收一个名为 name 的 prop 参数，并在模板中使用它。

2. 使用组件：在其他 Vue 组件或模板中使用自定义组件。首先，需要在父组件中导入该组件，并在模板中使用它。例如：

   <template>
    <div id="app">
      <HelloWorld name="Vue3" />
    </div>
   </template>
   
   <script>
   import HelloWorld from './components/HelloWorld.vue'
   
   export default {
    name: 'App',
    components: {
      HelloWorld
    }
   }
   </script>

   上面的代码在父组件 App.vue 中使用了 HelloWorld 组件，并传入了一个 name 参数。

模板语法与动态绑定

Vue 使用一种基于 HTML 的模板语法，使得开发者可以以声明的方式描述 DOM 代码，同时也支持一些特殊的指令用于绑定 DOM 事件、修饰符和必填属性等。以下是一些常用的模板语法和动态绑定的例子：

1. 数据绑定：{{ }} 语法用于双括号内直接输出变量的值，例如：

   <template>
    <div>
      <p>{{ message }}</p>
    </div>
   </template>
   
   <script>
   export default {
    data() {
      return {
        message: 'Hello, Vue3!'
      }
    }
   }
   </script>

2. v-model：双向数据绑定，通常用于表单元素，例如：

   <template>
    <div>
      <input v-model="message" placeholder="Enter a message">
      <p>{{ message }}</p>
    </div>
   </template>
   
   <script>
   export default {
    data() {
      return {
        message: ''
      }
    }
   }
   </script>

3. v-bind：动态绑定 HTML 属性，例如：

   <template>
    <div>
      <img v-bind:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="imageSrc" v-bind:alt="imageAlt">
    </div>
   </template>
   
   <script>
   export default {
    data() {
      return {
        imageSrc: 'https://example.com/image.jpg',
        imageAlt: 'Sample Image'
      }
    }
   }
   </script>

4. v-on：用于绑定事件处理器，例如：

   <template>
    <div>
      <button v-on:click="increment">Increment</button>
    </div>
   </template>
   
   <script>
   export default {
    data() {
      return {
        count: 0
      }
    },
    methods: {
      increment() {
        this.count++;
      }
    }
   }
   </script>

5. v-for：用于列表渲染，例如：

   <template>
    <div>
      <ul>
        <li v-for="item in items" :key="item.id">
          {{ item.title }}
        </li>
      </ul>
    </div>
   </template>
   
   <script>
   export default {
    data() {
      return {
        items: [
          { id: 1, title: 'Item 1' },
          { id: 2, title: 'Item 2' },
          { id: 3, title: 'Item 3' }
        ]
      }
    }
   }
   </script>

父子组件通信

在 Vue.js 中，组件间通信主要有两种方式：通过 prop 从父组件向子组件传递数据，以及通过自定义事件从子组件向父组件传递数据。

1. 通过 prop 传递数据：父组件给子组件传递数据可以通过定义 prop 来实现。例如：

   <!-- 父组件 -->
   <template>
    <div>
      <child-component :message="parentMessage" />
    </div>
   </template>
   
   <script>
   import ChildComponent from './ChildComponent.vue'
   
   export default {
    name: 'ParentComponent',
    components: {
      ChildComponent
    },
    data() {
      return {
        parentMessage: 'Hello from parent!'
      }
    }
   }
   </script>

   <!-- 子组件 -->
   <template>
    <div>
      <p>{{ message }}</p>
    </div>
   </template>
   
   <script>
   export default {
    name: 'ChildComponent',
    props: {
      message: String
    }
   }
   </script>

2. 通过自定义事件传递数据：子组件通过 $emit 触发事件，并在父组件中通过 $on 监听事件。例如：

   <!-- 父组件 -->
   <template>
    <div>
      <child-component @my-event="handleEvent" />
    </div>
   </template>
   
   <script>
   import ChildComponent from './ChildComponent.vue'
   
   export default {
    name: 'ParentComponent',
    components: {
      ChildComponent
    },
    methods: {
      handleEvent(data) {
        console.log('Received:', data)
      }
    }
   }
   </script>

   <!-- 子组件 -->
   <template>
    <div>
      <button @click="sendData">Send Data</button>
    </div>
   </template>
   
   <script>
   export default {
    name: 'ChildComponent',
    methods: {
      sendData() {
        this.$emit('my-event', 'Hello from child!')
      }
    }
   }
   </script>

Vue3响应式系统详解

Vue 3 的响应式系统是构建于底层的 Proxy 对象之上的。与 Vue 2 中使用 Object.defineProperty 不同，Vue 3 使用 Proxy 可以更好地处理复杂的数据结构，如嵌套的对象和数组，同时提供了更精确的性能优化。

1. Proxy 对象：Proxy 对象允许你拦截并自定义某些操作的行为，比如访问和修改属性。在 Vue 3 中，每个响应式对象都由一个 Proxy 对象代理，从而可以在属性被访问或修改时触发相应的更新。

2. Reflect API：Reflect 对象提供了一些与 Proxy 相关的方法，如 Reflect.get(), Reflect.set() 等，用于处理属性的访问和修改。

3. Reactivity System：Vue 3 的响应式系统利用 Proxy 对象和 Reflect API 来实现依赖收集和变更通知。当数据发生变化时，依赖于该数据的视图会被重新渲染。

数据绑定与计算属性

在 Vue 中，数据绑定是通过模板中的双大括号 {{ }} 实现的，它可以根据数据的变化动态更新视图。此外，Vue 还提供了 computed 属性，用于定义基于其他属性的派生值，并且可以作为缓存的只读属性。

1. 数据绑定：
   数据绑定是最基本的响应式特性，通过双大括号 {{ }} 语法将数据与 HTML 元素绑定在一起。例如：

   <template>
    <div>
      <p>{{ message }}</p>
    </div>
   </template>
   
   <script>
   export default {
    data() {
      return {
        message: 'Hello, Vue3!'
      }
    }
   }
   </script>

2. 计算属性：
   计算属性是依赖于其他属性的派生值，并作为缓存的只读属性存在。例如：

   <template>
    <div>
      <p>Full name: {{ fullName }}</p>
      <p>First name: {{ firstName }}</p>
      <p>Last name: {{ lastName }}</p>
    </div>
   </template>
   
   <script>
   export default {
    data() {
      return {
        firstName: 'John',
        lastName: 'Doe'
      }
    },
    computed: {
      fullName() {
        return `${this.firstName} ${this.lastName}`
      }
    }
   }
   </script>

   在这个例子中，fullName 是一个计算属性，它依赖于 firstName 和 lastName，并且只有当这两个属性发生变化时才会重新计算 fullName。

Vuex状态管理简介与应用

Vuex 是用于 Vue.js 应用的状态管理模式，它提供了一个集中式存储来管理应用的所有组件的状态。这样做的好处包括：

1. 集中管理状态：将应用的状态集中管理，便于维护和调试。
2. 避免重复状态：通过避免在各个组件中重复维护状态，提高了代码的复用性。

3. 数据共享：组件间的数据可以通过 Vuex 更方便地共享和传递。

4. 安装 Vuex：
   首先需要通过 npm 安装 Vuex：

   npm install vuex@next --save

5. 创建 Vuex Store：
   创建一个新的文件 store.js，并定义 store 的结构：

   import { createStore } from 'vuex'
   
   const store = createStore({
    state: {
      count: 0
    },
    mutations: {
      increment(state) {
        state.count++
      }
    },
    actions: {
      increment(context) {
        context.commit('increment')
      }
    },
    getters: {
      count: state => {
        return state.count
      }
    }
   })
   
   export default store

6. 在 Vue 应用中使用 Vuex Store：
   在 main.js 中引入并使用 store：

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

7. 在组件中使用 Vuex：
   在你的组件中通过 store 实例来访问状态、提交 mutations 和调用 actions：

   <template>
    <div>
      <p>{{ 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 Router基础配置

Vue Router 是 Vue.js 的官方路由器，用于实现应用中的路由功能。路由的基本配置包括：

1. 安装 Vue Router：
   首先需要通过 npm 安装 Vue Router：

   npm install vue-router@next --save

2. 创建路由配置文件：
   创建一个新的文件 router.js，并定义路由配置：

   import { createRouter, createWebHistory } from 'vue-router'
   import Home from './components/Home.vue'
   import About from './components/About.vue'
   
   const routes = [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
   ]
   
   const router = createRouter({
    history: createWebHistory(),
    routes
   })
   
   export default router

3. 在 Vue 应用中使用 Vue Router：
   在 main.js 中引入并使用 router：

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

4. 在组件中使用路由：
   在组件中使用 <router-view> 来渲染当前路由对应的组件：

   <template>
    <div>
      <router-view></router-view>
    </div>
   </template>
   
   <script>
   import router from './router'
   
   export default {
    name: 'App',
    router
   }
   </script>

路由参数与导航守卫

1. 路由参数：路由参数用于通过 URL 传递动态数据，例如：

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

   在组件中通过 this.$route.params 来访问这些参数：

   <script>
   import { defineComponent } from 'vue'
   
   export default defineComponent({
    name: 'User',
    mounted() {
      console.log(this.$route.params.id)
    }
   })
   </script>

2. 导航守卫：导航守卫用于在路由跳转时执行特定的逻辑，例如：

   • beforeEach：在每个路由切换前触发：

     router.beforeEach((to, from, next) => {
     // 逻辑代码
     next()
     })

   • beforeEnter：在进入特定路由前触发：

     const routes = [
     {
      path: '/admin',
      beforeEnter: (to, from, next) => {
        // 逻辑代码
        next()
      },
      // 子路由
      children: [
        { path: '', name: 'Admin', component: Admin },
        { path: 'settings', name: 'Settings', component: Settings }
      ]
     }
     ]

路由组件的嵌套与命名视图

1. 路由组件的嵌套：可以通过定义子路由来实现组件的嵌套，例如：

   const routes = [
    {
      path: '/admin',
      name: 'Admin',
      component: Admin,
      children: [
        { path: '', name: 'AdminHome', component: AdminHome },
        { path: 'settings', name: 'AdminSettings', component: AdminSettings }
      ]
    }
   ]

   在组件中使用 <router-view> 来渲染子路由组件：

   <template>
    <div>
      <router-view></router-view>
    </div>
   </template>

2. 命名视图：通过多个 <router-view> 和 views 属性来实现多视图的路由配置：

   const routes = [
    {
      path: '/',
      component: Layout,
      children: [
        { path: '', name: 'Index', component: Index, views: { default: Index, sidebar: Sidebar } }
      ]
    }
   ]

   在组件中使用命名视图：

   <template>
    <div>
      <router-view name="default"></router-view>
      <router-view name="sidebar"></router-view>
    </div>
   </template>

Vue3事件绑定与自定义事件

在 Vue 3 中，事件绑定和处理是通过指令和自定义事件来实现的。Vue 的事件处理机制提供了丰富的功能，包括事件修饰符、事件监听器和自定义事件。

1. 事件绑定：
   使用 v-on 指令绑定事件，例如：

   <template>
    <div>
      <button v-on:click="handleClick">Click me</button>
    </div>
   </template>
   
   <script>
   export default {
    name: 'ExampleComponent',
    methods: {
      handleClick() {
        console.log('Button clicked!')
      }
    }
   }
   </script>

2. 事件修饰符：
   Vue 3 提供了一些事件修饰符来简化事件绑定，例如：

   • .prevent：阻止默认行为
   • .stop：阻止事件冒泡
   • .self：只在事件目标是组件自身时触发

   例如：

   <template>
    <div>
      <button v-on:click.prevent="handleClick">Click me</button>
    </div>
   </template>

3. 自定义事件：
   使用 $emit 方法触发自定义事件，例如：

   <template>
    <div>
      <button @click="$emit('custom-event')"></button>
    </div>
   </template>
   
   <script>
   export default {
    name: 'ExampleComponent'
   }
   </script>

   在父组件中监听自定义事件：

   <template>
    <div>
      <child-component @custom-event="handleCustomEvent"></child-component>
    </div>
   </template>
   
   <script>
   import ChildComponent from './ChildComponent.vue'
   
   export default {
    name: 'ParentComponent',
    components: {
      ChildComponent
    },
    methods: {
      handleCustomEvent() {
        console.log('Custom event received!')
      }
    }
   }
   </script>

生命周期钩子的使用

Vue 生命周期钩子允许你在组件的不同生命周期阶段执行特定的代码。这有助于在合适的时间点进行初始化、清理和更新操作。

1. 创建阶段：

   • beforeCreate：在实例初始化之前，属性尚未挂载。
   • created：在实例初始化之后，属性已经挂载但 DOM 尚未渲染。

2. 挂载阶段：

   • beforeMount：在挂载 DOM 前调用。
   • mounted：在挂载 DOM 后调用。

3. 更新阶段：

   • beforeUpdate：在更新 DOM 前调用。
   • updated：在更新 DOM 后调用。
4. 销毁阶段：
   • beforeUnmount：在卸载组件前调用。
   • unmounted：在卸载组件后调用。

以下是一个使用生命周期钩子的示例：

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

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue3!'
    }
  },
  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')
  }
}
</script>