Vue3快速上手指南

最新推荐文章于 2025-07-07 16:47:26 发布

手速400花式debug

最新推荐文章于 2025-07-07 16:47:26 发布

阅读量1.5k

点赞数 17

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.csdn.net/2301_78085386/article/details/144859465

Vue3快速上手指南

Vue3简介

官⽹地址： https://vuejs.org/ 。

中⽂官⽹ https://cn.vuejs.org/

Vue是什么？

易学易⽤，性能出⾊，适⽤场景丰富的 Web 前端框架。

Vue2已经于2023年12⽉31⽇停⽌维护。建议升级到Vue.js3.0版本。打包更⼩，内存更少，渲染更快。好消息是，vue3向下兼容vue2的语法

Vue3于2020年9⽉18⽇发布, 久经磨砺 Vue3新特性：组合式API(重点)，更好的⽀持TypeScript(熟悉)，状态存储框架Pinia(重点)，新组件(了解)

⼀、整体认识Vue3项⽬

1、创建Vue3⼯程

前置：安装NodeJS。NodeJS版本18.0以上。

使⽤官⽅脚⼿架创建Vue⼯程[推荐]。

# 使⽤官⽅脚⼿架
npm create vue@latest
 # 按照脚⼿架要求选择是否启⽤相关组件
Vue.js - The Progressive JavaScript Framework
 ✔ 请输⼊项⽬名称： … myVue3
 ✔ 请输⼊包名称： … myvue3
 ✔ 是否使⽤ TypeScript 语法？ … 否 / 是  # 选是
✔ 是否启⽤ JSX ⽀持？ … 否 / 是
✔ 是否引⼊ Vue Router 进⾏单⻚⾯应⽤开发？ … 否 / 是
✔ 是否引⼊ Pinia ⽤于状态管理？ … 否 / 是
✔ 是否引⼊ Vitest ⽤于单元测试？ … 否 / 是
✔ 是否要引⼊⼀款端到端（End to End）测试⼯具？ › 不需要
✔ 是否引⼊ ESLint ⽤于代码质量检测？ … 否 / 是 # 选是
✔ 是否引⼊ Prettier ⽤于代码格式化？ … 否 / 是
✔ Add Vue DevTools extension for debugging? (experimental) … 否 / 是

# 启动项⽬
npm install
 npm run dev
#  
#  
#  VITE v5.1.6  ready in 315 ms
	➜  Local: http://localhost:5173/
 	➜  Network: use --host to expose
 	➜  press h + enter to show help

1、所有功能组件都可以后续⼿动添加。

关于TypeScript，在Vue中的TypeScript可以认为是在JS的基础上，增加⾯向对象的能⼒。可以定义接⼝、类、抽象类等。

2、npm install过程中会去node仓库下载很多依赖库，放到项⽬本地node_modules⽬录。建议将npm源设定为淘宝提供的国内镜像，可以下载快⼀点。

npm config get registry https://registry.npmmirror.com

补充：vue2时提供了另外⼀个脚⼿架vue-cli，也可以⽤来创建vue3项⽬。但是vue-cli已经处于停⽌维护状态。

# 安装或者升级脚⼿架
npm install -g @vue/cli
 # 查看脚⼿架版本，确保版本在4.5.0以上
vue --version
 # 创建应⽤
vue create vue_test
  2.x
 # 启动
cd vue_test
 npm run serve

另外，官⽅还有其他⼀些集成vue的⽅法，⾃⾏参考。

2、主要⼯程结构

官⽅建议开发IDE： vscode。提供了辅助开发插件 vue-official。主要代码结构如下图在这之前有个插件叫volar，现在已经停⽤

在这里插入图片描述

典型的Vue项⽬，都是在index.html这⼀个单⻚⾯⾥形成各种交互，这也就是所谓的SPA(Single Page Application)

Vue3的核⼼是通过createApp函数创建⼀个应⽤实例，在这个实例中构建各种应⽤。(main.ts中)

每个vue⽂件就是⼀个⻚⾯上的组件，组件可以嵌套使⽤。 vue中的组件分为

vue中的组件分为<template>⻚⾯模板，<script>脚本和<style>样式三个部分。Vue2中要求<template>下必
须有⼀个唯⼀的根元素，Vue3中则没有了这个限制。

⼆、数据双向绑定

双向绑定是Vue最为核⼼的功能。简单理解就是<template>中的⻚⾯数据和<script>中的脚本数据进⾏绑定，其
中任何⼀个数据发⽣了变化，另⼀个数据也随之发⽣变化。

1、vue2语法的双向绑定

<template>
 <div>
姓名：<input v-model="userName" /> {
   
   {
   
    userName }} <br />
薪⽔：<input type="number" v-model="salary" /> <button @click="addSalary">薪⽔加
1000</button> {
   
   {
   
    salary }}
 </div>
 </template>
 <script lang="ts">
 export default{
   
   
	 //数据
	data() {
   
   
	 return {
   
   
		 userName:"王⼀",
 		salary:15000
 	 }
  },
 	//⽅法
methods:{
   
   
 addSalary(){
   
   
 	this.salary += 1000
 		 }
  	 }
  }
 </script>
 <style scoped>
 </style>

数据双向绑定可以说是整个Vue的核⼼。例如，我们可以⽤数据双向绑定实现⼀些更为复杂的表单。

<template>
 <div>
姓名：<input v-model="userName"/> {
   
   {
   
    userName }}<br />
薪⽔：<input type="number" v-model="salary"/> {
   
   {
   
    salary }}<br />
 <button v-on:click="addSalary">提交</button> <button @click="changeUserInfo">查看个⼈信
息</button>
 </div>
 <hr />
 <div class="userInfo" v-if="showUserInfo">
 <h2>个⼈信息</h2>
年龄：<input type="number" v-model="userInfo.age" /><br />
性别：<input type="radio" value="1" v-model="userInfo.sex">男<input type="radio" 
value="2" v-model="userInfo.sex">⼥<br/>
岗位：<select v-model="userInfo.department">
 <option value="dev">开发</option>
 <option value="test">测试</option>
 <option value="maintain">运维</option>
 </select><br />
技术: <span v-for="skill in userInfo.skills" :key="skill">{
   
   {
   
    skill }}</span><br />
学习新技术： <input v-model="newSkill" /> <button @click="learnSkill">学习</button><br 
/>
个⼈信息汇总：{
   
   {
   
    userInfo }}
 </div>
 </template>
<script lang="ts">
 export default{
   
   
	 data(){
   
   
		 return{
   
   
			 userName:'roy',
 			salary:15000,
 			userInfo:{
   
   
 				age:0,
 				sex:1,
				 skills:['java','vue','python'],
 				department:''
 			 },
		 newSkill:'',
 		 showUserInfo:false
  		}
  },
 methods:{
   
   
 	addSalary(){
   
   
		 this.salary +=1000 
  	},
 	learnSkill(){
   
   
		 if(this.newSkill)
 		 this.userInfo.skills.push(this.newSkill)
  	},
	 changeUserInfo(){
   
   
 		this.showUserInfo= !this.showUserInfo
  			}
  		}
  }
 </script>
 <style scoped>
 .userInfo{
   
   
 background-color: bisque;
 width: 80%;
 }
 .userInfo span{
   
   
 background-color: yellow;
 margin-left: 10px;
 border: 1px;
 border-radius: 5px;
 }
 </style>

这样的表单，如果要⽤纯JS实现，就会相当困难。但是，⽤双向绑定就简单很多。

2、OptionsAPI和CompositionAPI

Vue2中常⽤的这种编写⽅式称为OptionsAPI，配置式。其实现⽅式是⽤⼀个统⼀的配置对象来实现全部代码逻辑。在这个对象中，通过data、methods、computed等配置选项来控制逻辑。

OptionsAPI是Vue2时的标准API编写⽅式。Vue3向下兼容了Vue2的API。因此，Vue2的⽼项⽬，在Vue3中基本可以⽆缝迁移。实际上，OptionsAPI是在CompositionAPI的基础上实现的。关于Vue的基础概念和知识，在这两种API 之间是通⽤的。另外，官⽅建议，如果采⽤Vue构建完整的SPA应⽤，那么更建议使⽤CompositionAPI。

但是，OptionsAPI所有逻辑都混在⼀起，不便于维护和复⽤。 Vue3另外通过了⼀种更⽅便的API，Composition API，混合式API。

上⾯同样的示例，⽤Composition API的写法如下：

<template>
 <div>
姓名：<input v-model="userName" /> {
   
   {
   
    userName }} <br />
薪⽔：<input type="number" v-model="salary" /> <button @click="addSalary">薪⽔加
1000</button> {
   
   {
   
    salary }}
 </div>
 </template>

 <script lang="ts">
 	export default{
   
   
 		setup(){
   
   
 	//现在声明的变量还不具备双向绑定
	let userName="王⼀"
 	let salary=15000
 		function addSalary(){
   
   
 			salary += 1000
 			console.log("salary = " + salary)
  	}
 //模板要⽤哪些，就返回哪些
	return {
   
   userName,salary,addSalary}
 		}
  }
  
 </script>
 <style scoped>
 </style>

1、setup是Vue3中的⼀个⽣命周期函数，他会在组件加载时执⾏。后⾯会细讲⽣命周期。
2、setup可以返回对象或者函数。如果是⼀个对象，则对象中的属性、⽅法等，可以在模板中直接使⽤(常
⽤)。如果返回⼀个函数，则通过函数的返回值直接渲染⻚⾯，不经过模板。例如 setup(){
   
   return ()=>"直接渲染"}
3、setup是⼀个普通的函数，不能使⽤this。
OptionsAPI中可以通过this访问脚本本身的数据 同时setup中不处理this，意味着setup编写可以更灵活，不需要依赖当前⻚⾯上下⽂
4、此时声明的userName， salary等变量不具备双向绑定。Vue3对双向绑定做了重新设计，后⾯会详细分
享。
5、setup有⼀种简写的⽅式<script setup lang="ts">。这样就不需要写函数了，标签内部直接写函数体。在
标签内部声明的对象，函数等，都会直接return出去。项⽬中常⽤
<script setup lang="ts">
 //现在声明的变量还不具备双向绑定
	let userName="王⼀"
 	let salary=15000
 	function addSalary(){
   
   
		 salary += 1000
		 console.log("salary = " + salary)
	 }
 </script>

在CompositionAPI中，由于setup是⼀个不同的函数，不需要处理this。这也意味着setup函数编写可以更加灵活，不需要依赖当前⻚⾯上下⽂。例如：将示例中的脚本单独写到⼀个ts⽂件中。

	// MySalary.ts
 	import {
   
    onMounted, ref } from "vue"
 	export default function(){
   
   
 	//现在声明的变量还不具备双向绑定。添加ref函数才能具备响应式
	const userName=ref("王⼀")
 	const salary=ref(15000)
 		function addSalary