从Vue2快速上手Vue3，超详细,看这一篇就够了!

01 前言

随着Vue3版本的不断发展，越来越多小伙伴也正式加入了Vue3的开发阵营，最近尤大也公开说明了Vue3也将是以后开始Vue的默认版本。如果有小伙伴还对此不太熟悉，请查阅一下我上一篇文章有具体的介绍。

虽然Vue3不断成熟稳定，但是一此小伙伴还停留在Vue2中，对Vue3也只是大体的了解，没有进行深入的学习。有的是没有时间去学，有的是觉得没必要去学，有时不知道如何去学，等等一系列原因。但是不管怎么说还要是尽快的加入到Vue3的学习中来，Vue2谁也不知道以后会不会被停更。

所以我为大家整理了一份如何Vue2过渡到Vue3，希望可以帮大家节约一点点的学习成本。让大家少走点弯路。

本文不会涉及到具体的变化，如 watch 有什么样的新用法，官网介绍的比我要好很多，本方会重点介绍一下如何快速上手Vue3。

02 如何学Vue3

其实对于Vue3来说，变化也是比较大的，还好他兼容Vue2的写法。你可以尝试在Vue3中先用Vue2的写法去写一下项目，感受一下Vue3，这可以可以慢慢的在工作中去学习，在学习中去工作，也是掌握Vue3很快的一种方式。

很多小伙伴喜欢看视频去学习，这种方式比较直观，但是唯一的不足就是学习成本有点长，需要花大量的时间去学重复的知识。

所以我更建议你去官网先把Vue3的文档都看一下，很多知识和Vue2是相通的，所以这些知识你不需要再去学了。只需要学习那些没有学过的知识就好。

03 相比于Vue2，Vue3有哪些重大的变化

相比于Vue2，Vue3主要有以下方面的变化：

数据的响应式底层原理
对 Typescript 语言的支持程度更加友好
setup 的引入，让项目可以更好的维护
setup 语法糖功能，真是让人觉得很香
如果有可能，学习一下Vite2
基于Vue周边的组件库都进行了升级和适配，如vue-router、vuex（pinia）、一些基于Vue3开发组件库(naive-ui、antd) 等
use（钩子）概念的引入，很是方便
开发工具vscode 的新插件 volar 代替 vetur
devtools 的升级适配
一些具体的细节等变化（watch、compute新的用法等）

个人觉得比较重要，需要去掌握的知识有：

Vue3 数据响应式原理，ref、 reactive等api的使用
setup、setup语法糖的使用
vite2 的基本使用
Vue3周边库升级使用
watch、compute、生命周期函数在 setup的使用

迁移指南

这部分呢在vue3官方网站上有很清楚的描述。这里截图给大家看看：

新增特性

组合式API

组合式API其实从字面上能够看出一些端倪，说白了就是把各种方式组合起来，像搭积木那样的。组合式API我们需要知道以下几个知识点：

setup组件选项

setup就是组合式API的入口，和之前的vue2中data、computed、watch、methods一样，定义了一个组合式API的入口。大致的setup组合式API如下：

<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  setup(props,context){
    console.log(props,context)
  }
}
</script>

上面的setup里面就是组合式API。既然叫组合式，那么包括以前vue2中的data中的变量、生命周期函数、watch监听、computed计算属性、methods等都可以全部放到setup中。相信到这里大部分人应该都明白了，其实就是把之前分散到data、生命周期、watch、computed、methods中的部分现在全部整合到一起，这样的好处就是我们可以把一些业务或者逻辑抽离出来，然后那个地方需要就直接引入，比vue2中的方便了一些。那么接下来就来具体看看每一个部分到底怎么做就ok了。

带ref的响应式变量

这一部分说白了就是将之前放到data里面的变量整合到setup中，当然既然是响应式的变量，肯定不会是像js那样直接用var、let等定义了，所以呢就引入一个ref函数来声明响应式变量。具体用法如下：

import { ref } from 'vue'

const counter = ref(0)

console.log(counter) // { value: 0 }
console.log(counter.value) // 0

counter.value++
console.log(counter.value) // 1

注意两点：

1、ref必须在vue中引入；2、ref函数使任何响应式变量在任何地方起作用；3、获取值时需获取属性value

其实这里官方也说明了本质就是使用了值传递中的引用传递，ref函数中是定义时的默认值，这里可以定义为字符串、数组、对象、布尔等类型数据。

在setup内注册生命周期钩子

我们知道vue2中还有各种生命周期的各种钩子函数，那么作为vue3肯定也会包含在setup中，如下：

setup(props,context){
  console.log(props,context)
  onMounted(()=>{
    console.log('666')
  })
}

watch响应式更改

同样的watch也是可以放到setup中，在setup中watch作为一个函数接受三个参数：监听的值、回调、可选的配置。实例如下：

import { ref, watch } from 'vue'

setup(){
  const counter = ref(0)
  watch(counter, (newValue, oldValue) => {
    console.log(counter.value)
  })
}

全局API

全局API就是之前vue2中在main.js中定义的一些全局的API如：component全局组件、directive全局指令、mixin全局混入、use全局插件使用、config全局配置等。这些全局API在vue3中发生了很大改变，首先要说的就是vue的实例了，vue2中我们是通过new来获得vue的实例，现在vue3中有一个新的全局API来获取vue的实例：createApp。所以main.js文件中就发生了变化，如下：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

const app = createApp(App)

app.component('my-component', {}) // 全局组件注册
app.directive('my-directive', {}) // 全局指令
app.mixin({}) // 全局混入

app.use(store).use(router).mount('#app')

其他

生命周期函数更改

destroyed 生命周期选项被重命名为 unmounted
beforeDestroy 生命周期选项被重命名为 beforeUnmount

过度class重命名

过渡类名 v-enter 修改为 v-enter-from、过渡类名 v-leave 修改为 v-leave-from

template没有特殊指令标记渲染原生

没有特殊指令的标记 (v-if/else-if/else、v-for 或 v-slot)