code前端网Vue3难学吗？零基础能不能直接上手？完整入门指南看这篇就够了
很多前端新手刚接触框架，都会在Vue2和Vue3之间纠结，最常问的就是上面这两个问题，其实不用太纠结，Vue3是基于Vue2的核心设计思路重构的，学习曲线反而因为API的优化更平滑，零基础完全可以直接从Vue3开始，甚至还能少走不少学完Vue2再转Vue3要改习惯的弯路，接下来就用问答的方式，把Vue3入门的核心内容给大家理清楚，包括为什么选Vue3、环境怎么搭、核心语法怎么用、怎么上手做小项目,还有入门后可以怎么提升。
Vue3比Vue2好在哪里？新手直接学会不会吃亏？
首先说会不会吃亏——不会，现在Vue官方已经把Vue3作为默认推荐的版本了，不管是文档、社区资源还是新出的UI组件库，都优先支持Vue3，未来的新特性也只会更新在Vue3里,所以直接学Vue3才是紧跟潮流的选择。
那它比Vue2好在哪里呢？新手虽然暂时用不上所有新特性，但有几个点对你入门后的体验和学习进阶非常重要： 第一，性能更快，Vue3的底层用Proxy替换了Vue2的Object.defineProperty来做响应式，监听数据的范围从“对象的已存在属性”扩展到了“整个对象、数组的索引和长度变化、新增删除属性”，不用再像Vue2那样要手动用$set、$delete这些方法，而且整体渲染速度和内存占用都有20%-50%的提升，具体的优化细节后面如果用到深一点的东西再提，但对新手来说，“不用管响应式边界情况”这一点就省了很多麻烦。 第二，API更灵活，代码组织更清晰，Vue2的Options API虽然上手简单，但代码量大了之后，逻辑会分散在data、methods、computed、watch这些选项里，找一个功能的相关代码要上下翻半天；Vue3新增了Composition API，可以把同一个功能的代码逻辑（比如获取数据、处理分页、监听搜索词）都放在一起，复用性也更强，不用再靠mixin搞容易冲突的逻辑复用，这对后期做稍复杂的项目帮助很大，而且你入门的时候可以先学简单的写法，等习惯了再慢慢用Composition API。 第三，TypeScript支持更原生，虽然JavaScript足够入门，但现在大厂招聘前端基本都要求会TypeScript了，Vue3从底层就是用TypeScript写的，类型提示非常完善，用起来不会像Vue2加TS那样要写很多额外的配置和声明，入门后期如果想转TS，会轻松很多。 第四，生态更完善，像新出的Element Plus、Ant Design Vue 3.x、Vant 4.x这些主流UI组件库，都只支持Vue3了；还有Vite这个新一代的构建工具，和Vue3的配合非常丝滑，开发环境启动速度能快几十倍甚至上百倍，不用像用Webpack搭Vue2那样等半天才能看到效果,对新手调试来说体验特别好。
零基础学Vue3，需要先掌握哪些前置知识？
不用太担心，Vue3的门槛其实不高，但你得先有一点点前端基础，不然连基本的HTML、CSS、JS都看不懂，肯定没法上手，具体需要掌握的前置知识有这几个： HTML：知道常用的标签（比如div、p、span、button、input这些）怎么用，能写出简单的页面结构就行。 CSS：知道基本的选择器（类选择器、id选择器、标签选择器），能写简单的布局（比如flex布局、盒子模型），不需要会太复杂的动画或者兼容性处理，这些可以后面慢慢补。 JavaScript：这部分稍微重要一点，但也不用学得太深入，掌握ES5的基本语法（变量、函数、数组、对象），ES6的核心语法（箭头函数、let/const、模板字符串、解构赋值、数组的map/filter/find这些方法、Promise的基本用法）就行，更高级的ES6+或者ESNext语法可以在学Vue3的过程中遇到了再查。
零基础学Vue3，具体的学习顺序是什么？
很多新手一开始就去啃官方文档或者厚厚的书，结果越看越晕，其实入门Vue3不用那么复杂，按照下面的顺序一步步来，效果会好很多： 第一步，搭一个最简单的本地开发环境，先跑起来一个Hello World页面，建立信心。 第二步，学Vue3的基础语法，比如模板语法、数据绑定、事件处理、计算属性、侦听器这些。 第三步，学Vue3的组件系统，因为Vue是组件化开发的框架，组件是核心，要知道怎么定义组件、怎么传参、怎么处理父子组件的通信。 第四步，学Vue3的路由Vue Router和状态管理Pinia（注意，官方现在推荐用Pinia代替Vuex，因为Pinia更简单、更符合Vue3的Composition API风格，而且TypeScript支持更好）。 第五步，结合前面学的所有内容，做一个小项目，Todo List（待办事项清单）、个人博客首页、简易的电商商品展示页这些，不用太复杂，但要把核心知识点都用上。 第六步，入门之后，可以学一些进阶的内容，比如TypeScript、Vite的高级配置、Vue3的响应式原理、自定义指令、插槽、Teleport、Suspense这些新特性，还有单元测试、打包部署这些工程化的东西。
我们就先把前四步里最关键的内容讲清楚,让你看完就能动手写代码。
第一步：怎么搭Vue3的最简单开发环境？
新手入门的时候，不建议一开始就用CLI或者Vite搭复杂的项目，先用CDN引入的方式跑起来一个Hello World页面，熟悉一下Vue3的基本结构，这样不会被配置文件搞晕。 具体的做法很简单：
- 新建一个HTML文件，比如叫index.html。
- 在文件里引入Vue3的CDN链接，现在最新的稳定版可以直接找官方CDN或者UNPKG、jsdelivr的链接，注意要选带ESM的或者UMD的，UMD的更兼容旧浏览器,CDN引入的话用UMD的就行。
- 在body里写一个挂载点，比如,Vue的内容都会渲染到这个div里。
- 写一个简单的Vue应用实例，挂载到刚才的div上，然后在模板里写Hello World,或者用数据绑定写一个动态的内容。
等你用CDN引入的方式熟悉了基本语法之后，再用Vite搭一个正式的项目，因为Vite的开发体验真的太好了，用Vite搭Vue3项目也很简单,只需要执行几个命令就行：
- 首先要确保你电脑上装了Node.js，而且版本要大于等于16，不然可能会报错，怎么装Node.js呢？直接去官网下载对应的安装包，一路下一步就行，装完之后打开终端（Windows用cmd或者PowerShell，Mac用终端），输入node -v和npm -v，如果能显示版本号,就说明装成功了。
- 然后在终端里进入你想存项目的文件夹，比如cd Desktop/vue3-project（注意路径要改成你自己的）。
- 执行npm create vite@latest，然后按照提示输入项目名称，选择Vue，再选择JavaScript或者TypeScript（新手选JavaScript就行），等待几秒钟,项目就创建好了。
- 进入项目文件夹，执行npm install安装依赖，然后执行npm run dev启动开发服务器，终端里会显示一个本地地址，比如http://localhost:5173，在浏览器里打开这个地址,就能看到Vite创建的默认Vue3页面了。
第二步：Vue3的核心基础语法有哪些？
接下来讲核心基础语法，这些都是写Vue3项目必须掌握的，不管是用CDN还是用Vite,语法都是一样的。
模板语法
Vue的模板语法是基于HTML的，你可以在HTML标签里直接写Vue的指令和插值表达式，来动态渲染页面。 插值表达式就是用双大括号{{ }}包裹的内容,它会把数据绑定到页面上，
<div id="app">
<h1>{{ message }}</h1>
</div>
const app = Vue.createApp({
data() {
return {
message: 'Hello Vue3!'
}
}
})
app.mount('#app')
这里的{{ message }}会被替换成data里的'Hello Vue3!'，而且如果data里的message变了，页面上的内容也会自动更新,这就是Vue的响应式。
除了插值表达式，Vue还有很多常用的指令，指令都是以v-开头的，
- v-bind：用来动态绑定HTML属性，比如class、style、src、href这些，v-bind可以简写为冒号:，
<div id="app"> <h1 v-bind:class="isRed ? 'red' : 'blue'">{{ message }}</h1> <!-- 或者简写为 --> <h1 :class="isRed ? 'red' : 'blue'">{{ message }}</h1> <img :src="imgSrc" alt="图片"> </div>const app = Vue.createApp({ data() { return { message: 'Hello Vue3!', isRed: true, imgSrc: 'https://example.com/image.jpg' } } }) app.mount('#app') - v-on：用来绑定事件，比如点击事件、输入事件这些，v-on可以简写为@，
<div id="app"> <h1>{{ count }}</h1> <button v-on:click="increment">点击加1</button> <!-- 或者简写为 --> <button @click="increment">点击加1</button> <input @input="handleInput" :value="inputValue"> </div>const app = Vue.createApp({ data() { return { count: 0, inputValue: '' } }, methods: { increment() { this.count++ }, handleInput(e) { this.inputValue = e.target.value } } }) app.mount('#app') - v-model：用来做表单的双向数据绑定，其实就是v-bind:value和v-on:input的语法糖，比如上面的input可以改成：
<input v-model="inputValue">
这样就不用自己写handleInput方法了，input里的内容变化时，data里的inputValue会自动更新，data里的inputValue变化时,input里的内容也会自动更新。
- v-if和v-show：用来控制元素的显示和隐藏，v-if是直接删除或添加DOM元素，v-show是通过CSS的display属性来控制元素的显示和隐藏，切换频繁的话用v-show，切换不频繁的话用v-if，
<div id="app"> <p v-if="isVisible">我是v-if控制的</p> <p v-show="isVisible">我是v-show控制的</p> <button @click="toggleVisible">切换显示</button> </div>
const app = Vue.createApp({ data() { return { isVisible: true } }, methods: { toggleVisible() { this.isVisible = !this.isVisible } } }) app.mount('#app') - v-for：用来渲染列表，比如数组或者对象，v-for需要配合key属性使用，key属性可以让Vue更高效地更新DOM，key最好是唯一的，比如id，
<div id="app"> <ul> <li v-for="(item, index) in todos" :key="item.id"> {{ index + 1 }}. {{ item.text }} </li> </ul> </div>const app = Vue.createApp({ data() { return { todos: [ { id: 1, text: '学Vue3的模板语法' }, { id: 2, text: '学Vue3的组件系统' }, { id: 3, text: '做一个小项目' } ] } } }) app.mount('#app')
计算属性和侦听器
有时候我们需要对数据进行一些处理再渲染到页面上，比如把名字拼接成全称、把数组过滤一下、把日期格式化一下，这时候可以用计算属性computed；有时候我们需要监听某个数据的变化，然后执行一些异步操作或者复杂的逻辑，比如搜索词变化的时候去请求接口,这时候可以用侦听器watch。
先讲计算属性：计算属性是基于它们的响应式依赖进行缓存的，只有当它的响应式依赖变化时，才会重新计算，否则直接返回缓存的结果,这样性能会更好，
<div id="app">
<input v-model="firstName" placeholder="姓">
<input v-model="lastName" placeholder="名">
<p>全称：{{ fullName }}</p>
</div>
const app = Vue.createApp({
data() {
return {
firstName: '',
lastName: ''
}
},
computed: {
fullName() {
return this.firstName + this.lastName
}
}
})
app.mount('#app')
这里的fullName就是一个计算属性，只有当firstName或者lastName变化时，它才会重新计算,否则直接返回之前的结果。
再讲侦听器：侦听器没有缓存，只要监听的数据变化,就会执行对应的回调函数，
<div id="app">
<input v-model="searchText" placeholder="搜索">
<p>搜索结果：{{ searchResult }}</p>
</div>
const app = Vue.createApp({
data() {
return {
searchText: '',
searchResult: ''
}
},
watch: {
searchText(newVal, oldVal) {
// 模拟异步请求接口
setTimeout(() => {
this.searchResult = `搜索“${newVal}”的结果`
}, 500)
}
}
})
app.mount('#app')
这里的watch监听了searchText的变化，每次searchText变化，都会延迟500毫秒再显示搜索结果,模拟真实的搜索场景。
第三步：Vue3的组件系统怎么用？
组件是Vue的核心，你可以把一个大的页面拆成很多小的组件，每个组件负责一个独立的功能，比如导航栏组件、侧边栏组件、商品卡片组件、表单组件这些,这样代码的复用性和可维护性都会大大提高。
怎么定义和使用组件？
在Vue3里，定义组件的方式有两种，一种是用全局组件，一种是用局部组件，全局组件可以在整个应用里使用,局部组件只能在父组件里使用。
先讲用CDN引入的方式定义和使用组件：
<div id="app">
<!-- 使用局部组件 -->
<my-button></my-button>
<!-- 使用全局组件 -->
<my-card></my-card>
</div>
<!-- 定义组件的模板 -->
<template id="my-button-template">
<button @click="increment">点击次数：{{ count }}</button>
</template>
<template id="my-card-template">
<div class="card">
<h3>我是全局组件</h3>
</div>
</template>
// 定义全局组件
const MyCard = {
template: '#my-card-template'
}
const app = Vue.createApp({
// 定义局部组件
components: {
'my-button': {
template: '#my-button-template',
data() {
return {
count: 0
}
},
methods: {
increment() {
this.count++
}
}
}
}
})
// 注册全局组件
app.component('my-card', MyCard)
app.mount('#app')
再讲用Vite搭的项目里定义和使用组件，因为Vite的项目里用的是单文件组件（SFC，Single File Component），也就是.vue文件，这是Vue最常用的组件定义方式，单文件组件分为三个部分：（模板）、
```
```vue
子组件的点击次数：{{ childCount }} 当你做的项目有多个页面的时候，就需要用Vue Router来管理路由；当你做的项目有很多组件需要共享数据的时候,就需要用Pinia来管理状态。 先讲Vue Router的基本用法，用Vite搭的项目里，默认没有安装Vue Router,需要先安装： // 定义路由规则
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
] // 创建路由实例
const router = createRouter({
history: createWebHistory(), // 使用HTML5的history模式，URL里没有#
routes
}) // 导出路由实例
export default router const app = createApp(App)
// 使用路由实例
app.use(router)
app.mount('#app') 再讲Pinia的基本用法,Pinia的安装和配置也很简单： const app = createApp(App)
// 创建Pinia实例并使用
const pinia = createPinia()
app.use(router)
app.use(pinia)
app.mount('#app') 等你掌握了上面的内容，做了一个小项目之后，就可以开始学进阶的内容了，进阶的内容有很多，这里给大家推荐几个方向：
第一，学Composition API的完整用法，比如ref、reactive、computed、watch、watchEffect、provide/inject这些函数，Composition API的代码组织更清晰，复用性更强，是Vue3的核心优势。
第二，学TypeScript，把之前用JavaScript写的项目改成TypeScript，TypeScript可以帮你提前发现很多错误，提高代码的可维护性，现在大厂招聘前端基本都要求会TypeScript。
第三，学Vite的高级配置，比如按需引入UI组件库、配置代理、配置打包优化、配置环境变量这些，这些都是工程化的内容，对做正式的项目很重要。
第四，学Vue3的新特性，比如Teleport（传送门，可以把组件渲染到DOM树的任意位置）、Suspense（处理异步组件的加载状态）、自定义指令、插槽（尤其是作用域插槽）这些。
第五，学单元测试和端到端测试，比如用Vitest做单元测试，用Cypress做端到端测试，测试可以保证代码的质量，避免修改代码时引入新的bug。
第六，学打包部署，比如怎么把项目打包成静态文件，怎么部署到GitHub Pages、Netlify、Vercel这些平台,或者怎么部署到自己的服务器上。 学框架最重要的就是动手实践，不要只看不练，看完一篇文章或者一段视频之后，一定要自己动手写代码，遇到问题的时候，先自己查官方文档，官方文档是最权威的资料，如果官方文档解决不了，再去社区提问，比如Stack Overflow、掘金、CSDN这些平台，多和其他开发者交流,这样才能进步得更快。 本文仅代表作者观点，不代表Code前端网立场。{{ title }}
Hello Vue3 with Vite!
Hello Vue3 with Vite!
第四步：Vue Router和Pinia怎么用？
// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
// 引入页面组件
import Home from '../views/Home.vue'
import About from '../views/About.vue'
然后在src/views文件夹里新建Home.vue和About.vue两个页面组件：
```vue
<!-- src/views/Home.vue -->
<template>
<div class="home">
<h1>首页</h1>
</div>
</template>
<style scoped>
.home {
text-align: center;
padding: 20px;
}
</style><!-- src/views/About.vue -->
<template>
<div class="about">
<h1>关于我们</h1>
</div>
</template>
<style scoped>
.about {
text-align: center;
padding: 20px;
}
</style>
// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
// 引入路由实例
import router from './router'
最后在App.vue里用<router-link>组件来导航，用<router-view>组件来渲染当前路由对应的页面：
```vue
<!-- src/App.vue -->
<template>
<div class="app">
<div class="nav">
<!-- router-link组件会被渲染成a标签，to属性对应路由的path -->
<router-link to="/">首页</router-link>
<router-link to="/about">关于我们</router-link>
</div>
<!-- router-view组件会渲染当前路由对应的页面 -->
<router-view />
</div>
</template>
<style>
.app {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.nav {
margin-bottom: 20px;
}
.nav a {
margin-right: 20px;
text-decoration: none;
color: #333;
}
.nav a.router-link-active {
color: #409eff;
font-weight: bold;
}
</style>
// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
// 引入Pinia
import { createPinia } from 'pinia'
然后在src文件夹里新建一个stores文件夹，里面新建一个counter.js文件，用来定义状态：
```javascript
// src/stores/counter.js
import { defineStore } from 'pinia'
// 定义counter store
export const useCounterStore = defineStore('counter', {
// state：定义状态，相当于Vue组件里的data
state: () => {
return {
count: 0
}
},
// getters：定义计算属性，相当于Vue组件里的computed
getters: {
doubleCount: (state) => state.count * 2
},
// actions：定义方法，相当于Vue组件里的methods，可以处理同步和异步操作
actions: {
increment() {
this.count++
},
decrement() {
this.count--
},
// 异步操作
async incrementAsync() {
setTimeout(() => {
this.count++
}, 1000)
}
}
})
```
这里用到了Vue3的setup函数，setup函数是Composition API的入口，后面我们可以慢慢学Composition API的更多内容，比如ref、reactive、computed、watch这些函数，现在先知道setup函数可以用来引入和使用store就行。
<!-- src/views/Home.vue -->
<template>
<div class="home">
<h1>首页</h1>
<p>count: {{ counterStore.count }}</p>
<p>doubleCount: {{ counterStore.doubleCount }}</p>
<button @click="counterStore.increment">加1</button>
<button @click="counterStore.decrement">减1</button>
<button @click="counterStore.incrementAsync">异步加1</button>
</div>
</template>
入门后可以怎么提升？
版权声明
本文系作者Code前端网发表，如需转载，请注明页面地址。
