深入解析Vue3:从入门到实战(详细版)

news/2024/11/7 16:49:33/

文章目录

    • 前言
    • 一、Vue3简介
      • 官网地址
      • 主要特点
    • 二、安装与创建Vue3项目
      • 使用Vue CLI创建项目
      • 使用Vite创建项目
    • 三、Composition API详解
      • Setup函数
      • ref与Reactive
      • 生命周期钩子
      • 计算属性和监听器
    • 四、新特性与优化
      • 响应式系统
      • 更好的TypeScript支持
      • 类型定义
      • 类型推断
      • 新组件
      • 全局API重构
      • 更好的测试支持
    • 五、实战案例
    • 结语


前言

Vue.js 是一款用于构建用户界面的渐进式JavaScript框架。自Vue2推出以来,其简洁优雅的API设计、轻量级的特性以及出色的性能表现赢得了广大开发者的好评。随着前端技术的快速发展,Vue3应运而生,带来了众多令人兴奋的新特性和改进。本文旨在全面介绍Vue3的核心概念、新特性以及如何将其应用于实际项目中。


一、Vue3简介

Vue3是Vue.js框架的第三个主要版本,于2020年9月18日正式发布。相较于Vue2,Vue3在多个方面实现了显著的提升。

官网地址

  • https://cn.vuejs.org/

主要特点

  • 性能优化:Vue3利用现代JavaScript特性(如Proxy),在保持现有API的同时,提升了应用的运行效率。
  • 体积减小:通过更精细的模块化设计和Tree Shaking支持,Vue3的初始加载时间更快,最终包体积更小。
  • TypeScript支持:Vue3原生支持TypeScript,使得类型安全性和开发体验得到了极大的提升。
  • Composition API:Vue3引入了一种全新的API设计模式——Composition API,它允许开发者更灵活地组织和复用逻辑代码。
  • 更好的测试支持:Vue3提供了一系列工具和库,使得单元测试和端到端测试更加便捷。

二、安装与创建Vue3项目

使用Vue CLI创建项目

Vue CLI 是Vue.js的官方脚手架工具,可以帮助开发者快速搭建项目。要创建一个Vue3项目,首先需要确保已安装最新版本的Vue CLI。可以通过以下命令检查或安装:

# 检查Vue CLI版本
vue --version# 如果版本低于4.5.0,请更新
npm install -g @vue/cli

然后,使用Vue CLI创建一个新的Vue3项目:

vue create my-vue3-project

在创建过程中,选择Vue 3预设或者手动选择特性,确保选择了Vue 3版本。

使用Vite创建项目

Vite 是由Vue.js作者尤雨溪开发的一款现代化的前端构建工具,它利用浏览器原生的ES模块导入功能,实现了快速启动和按需编译,非常适合Vue3项目。创建一个基于Vite的Vue3项目,只需几行命令:

npm init vite@latest my-vue3-project --template vue
cd my-vue3-project
npm install
npm run dev

三、Composition API详解

Setup函数

Composition API的核心是setup函数,它替代了Vue2中的data、methods、computed等选项。setup函数在组件实例初始化之前调用,可以接收组件的props和context作为参数,并且必须返回一个对象,该对象中的属性和方法可以在模板中直接使用。

export default {props: {message: String},setup(props, context) {// 组件逻辑...return {// 需要在模板中使用的属性和方法}}
}

ref与Reactive

Vue3中提供了两种方式来创建响应式数据:ref和reactive。

  • ref:用于创建一个响应式的引用对象,可以用来包裹任何类型的值。在模板中使用时,不需要.value后缀。
  • reactive:用于创建一个深层响应式的对象。对于对象类型的数据,推荐使用reactive。
import { ref, reactive } from 'vue'// 使用ref
let count = ref(0)// 使用reactive
let state = reactive({name: 'Vue',count: 0
})// 在setup函数中使用
export default {setup() {let count = ref(0)let state = reactive({name: 'Vue',count: 0})function increment() {count.value++state.count++}return {count,state,increment}}
}

生命周期钩子

Vue3中的生命周期钩子名称有所变化,但它们的功能和使用方式与Vue2相似。Vue3提供了新的生命周期钩子函数,如onMounted、onUnmounted等。

import { onMounted, onUnmounted } from 'vue'export default {setup() {onMounted(() => {console.log('组件已挂载')})onUnmounted(() => {console.log('组件已卸载')})// ...}
}

计算属性和监听器

Vue3中计算属性和监听器也有了新的API。

  • 计算属性:使用computed函数创建。
  • 监听器:使用watch函数创建。
import { ref, computed, watch } from 'vue'export default {setup() {let count = ref(0)// 计算属性let doubleCount = computed(() => count.value * 2)// 监听器watch(count, (newVal, oldVal) => {console.log(`count changed from ${oldVal} to ${newVal}`)})return {count,doubleCount}}
}

四、新特性与优化

响应式系统

Vue3的响应式系统基于ES6的Proxy对象,相比Vue2的Object.defineProperty方法,它能够更高效地处理对象属性的添加和删除操作,同时避免了数组索引更改不触发更新的问题。

更好的TypeScript支持

Vue3提供了更好的TypeScript支持,包括类型推断和类型检查,这使得使用TypeScript开发Vue应用变得更加容易。

类型定义

Vue3提供了详细的类型定义文件,可以通过安装@vue/runtime-dom来获取这些类型定义。

npm install @vue/runtime-dom

类型推断

Vue3中的ref和reactive函数会自动推断类型。

import { ref, reactive } from 'vue'let count = ref(0) // count的类型为Ref<number>
let state = reactive({ name: 'Vue' }) // state的类型为{ name: string }

新组件

Vue3引入了几个新的内置组件,如<Fragment><Teleport><Suspense>,它们分别解决了多根节点、DOM结构优化和异步组件加载的问题。

  • <Fragment>:允许在一个组件中返回多个根节点。
    <template><Fragment><h1>Title</h1><p>Content</p></Fragment>
    </template>
    
  • <Teleport>:允许将模态框或其他组件的内容渲染到DOM树的任意位置。
    <template><button @click="openModal">Open Modal</button><Teleport to="body"><div v-if="isModalOpen" class="modal"><p>This is a modal</p><button @click="closeModal">Close</button></div></Teleport>
    </template><script>
    import { ref } from 'vue'export default {
    setup() {let isModalOpen = ref(false)function openModal() {isModalOpen.value = true} function closeModal() {isModalOpen.value = false}return {isModalOpen,openModal,closeModal}}
    }
    </script>
    
  • <Suspense>:用于处理异步依赖,等待所有异步操作完成后再渲染组件。
    <template><Suspense><template #default><AsyncComponent /></template><template #fallback><div>Loading...</div></template></Suspense>
    </template><script>
    import { defineAsyncComponent } from 'vue'const AsyncComponent = defineAsyncComponent(() => import('./components/MyComponent.vue'))export default {components: {AsyncComponent}
    }
    </script>
    

全局API重构

Vue3对全局API进行了重构,将许多全局方法和属性移动到了app.config.globalProperties中,减少了全局污染,提高了模块化的程度。

import { createApp } from 'vue'
import App from './App.vue'const app = createApp(App)// 添加全局属性
app.config.globalProperties.$myGlobalMethod = () => {console.log('This is a global method')
}// 添加全局指令
app.directive('focus', {mounted(el) {el.focus()}
})app.mount('#app')

更好的测试支持

Vue3提供了一系列工具和库,使得单元测试和端到端测试更加便捷。

  • 单元测试:使用Vue Test Utils进行单元测试。
    npm install @vue/test-utils @vue/vue3-jest jest
    
    import { mount } from '@vue/test-utils'
    import MyComponent from '@/components/MyComponent.vue'describe('MyComponent.vue', () => {it('renders correctly', () => {const wrapper = mount(MyComponent, {props: {message: 'Hello, Vue3!'}})expect(wrapper.text()).toContain('Hello, Vue3!')})
    })
    
  • 端到端测试:使用Cypress进行端到端测试。
    npm install cypress
    
    describe('My App', () => {it('displays the correct title', () => {cy.visit('/')cy.get('h1').should('contain', 'Welcome to Vue3')})
    })
    

五、实战案例

示例项目:Todo List

我们将通过一个简单的Todo List应用来展示Vue3的一些核心特性和新特性。

项目结构

my-todo-app/
├── public/
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   │   └── TodoList.vue
│   ├── App.vue
│   └── main.js
├── package.json
└── vite.config.js

安装依赖

npm install vue

创建主应用文件
src/main.js

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

创建App组件
src/App.vue

<template><div id="app"><h1>Todo List</h1><TodoList /></div>
</template><script>
import TodoList from './components/TodoList.vue'export default {components: {TodoList}
}
</script>

创建TodoList组件
src/components/TodoList.vue

<template><div><input v-model="newTodo" @keyup.enter="addTodo" placeholder="Add a new todo" /><ul><li v-for="(todo, index) in todos" :key="index">{{ todo }}<button @click="removeTodo(index)">Remove</button></li></ul></div>
</template><script>
import { ref } from 'vue'export default {setup() {let newTodo = ref('')let todos = ref([])function addTodo() {if (newTodo.value.trim()) {todos.value.push(newTodo.value)newTodo.value = ''}}function removeTodo(index) {todos.value.splice(index, 1)}return {newTodo,todos,addTodo,removeTodo}}
}
</script>

结语

Vue3不仅继承了Vue2的优点,而且通过引入Composition API、优化响应式系统、增强TypeScript支持等一系列创新,为开发者提供了更加灵活、高效的开发体验。无论是对于新手还是经验丰富的开发者,Vue3都值得尝试和深入学习。希望本文能够帮助你更好地理解和掌握Vue3的核心概念和技术要点,开启你的Vue3之旅。


http://www.ppmy.cn/news/1545122.html

相关文章

如何在算家云搭建Aatrox-Bert-VITS2(音频生成)

一、模型介绍 ‌ Aatrox - Bert -VITS2 模型是一种基于深度学习的语音合成系统&#xff0c;结合了 BERT 的预训练能力和 VITS2 的微调技术&#xff0c;旨在实现高质量的个性化语音合成。 二、模型搭建流程 1. 创建容器实例 进入算家云的“应用社区”&#xff0c;点击搜索找到…

【物联网技术】ESP8266 WIFI模块STA、AP、STA+AP、TCP/UDP透传工作模式介绍与AT指令介绍

前言:本文对ESP8266 WIFI模块STA、AP、STA+AP、TCP/UDP透传工作模式进行介绍;以及AT指令介绍,包括基础AT指令,WIFI功能AT指令、TCP/IP相关AT指令、常用AT指令实例进行介绍。 ESP8266 WIFI模块的接线及固件烧写可参考我的这篇博客:正点原子ATK-ESP8266 WIFI模块接线及固件…

【go从零单排】go中的三种数据类型array、slices、maps

Don’t worry , just coding! 内耗与overthinking只会削弱你的精力&#xff0c;虚度你的光阴&#xff0c;每天迈出一小步&#xff0c;回头时发现已经走了很远。 array数组 package mainimport "fmt"func main() {var a [5]int //var关键字定义数组&#xff0c;[5]表…

51单片机教程(二)- 创建项目

1 创建项目 创建项目存储文件夹&#xff1a;C51Project 打开Keil5软件&#xff0c;选择 Project -> New uVision Project&#xff1a; 选择项目路径&#xff0c;即刚才创建的文件夹 选择芯片&#xff0c;选择 Microchip&#xff08;微型集成电路&#xff09;&#xff0…

《Java 实现选择排序:原理剖析与代码详解》

目录 一、引言 二、选择排序原理 三、代码分析 1. 代码整体结构 2. main方法 3. sort方法&#xff08;选择排序核心逻辑&#xff09; 四、测试结果 一、引言 排序算法在计算机科学领域中是非常重要的一部分&#xff0c;它能够帮助我们将无序的数据按照特定的顺序进行排列…

如何在AI时代突破程序员的瓶颈:从工具型思维到创新型开发20241107

&#x1f680; 如何在AI时代突破程序员的瓶颈&#xff1a;从工具型思维到创新型开发 随着技术的飞速发展&#xff0c;AI已经从科研实验室进入到开发者的日常工作中。对于许多程序员&#xff0c;尤其是那些工作多年的开发者而言&#xff0c;AI不仅仅是一个新兴的工具&#xff0…

渗透测试-快速获取目标中存在的漏洞(小白版)

《Java代码审计》http://mp.weixin.qq.com/s?__bizMzkwNjY1Mzc0Nw&mid2247484219&idx1&sn73564e316a4c9794019f15dd6b3ba9f6&chksmc0e47a67f793f371e9f6a4fbc06e7929cb1480b7320fae34c32563307df3a28aca49d1a4addd&scene21#wechat_redirect 《Web安全》h…

C++学习笔记----10、模块、头文件及各种主题(一)---- 模块(1)

在使用模块之前&#xff0c;头文件用于提供代码重用的接口。头文件确实有许多问题&#xff0c;比如避免同一头文件的多重包含以及确保头文件的包含顺序正确。还有&#xff0c;简单的#include&#xff0c;例如&#xff0c;<iostream>就添加了几千行代码&#xff0c;编译器…