经历了几年的VUE2的开发，VUE3的官方文档终于同大家见面了。一个全新的时代又到来了，如果不抓紧时间学习只有被淘汰的份。国庆7天假期正是一个恶补的黄金时期。下面是VUE3官网截图。

那问题来了，VUE3如何学习呢？

1，如何学习VUE

1-1，小白如何学习

如果你是一个前端小白，可能在学习VUE3之前需要有下列知识基础：

1. HTML基础
2. CSS基础
3. Javascript基础
4. TypeScript基础

1-2，老手快速入门

如果你是一个前端老手，那你就可以开始了。按照VUE3的官方文档描述，官网提供了2种风格的书写方式：选项式 API 和组合式 API。对于刚入门VUE3的同学或者之前有VUE2开发经验的同学，可以选择选项式 API风格阅读。组合API方式，更适合复杂项目的开发。

不管是新手还是老手都是可以通过网络视频学习，如*课网，*讯课堂，*度课堂，**3课堂等等……

1-3，官网对API风格和组合API方式做了下面的描述：

1-3-1，选项式 API (Options API)

使用选项式 API，我们可以用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。

1-3-2，组合式 API (Composition API)

通过组合式 API，我们可以使用导入的 API 函数来描述组件逻辑。在单文件组件中，组合式 API 通常会与 <script setup> 搭配使用。这个 setup attribute 是一个标识，告诉 Vue 需要在编译时进行一些处理，让我们可以更简洁地使用组合式 API。比如，<script setup> 中的导入和顶层变量/函数都能够在模板中直接使用。

下面我们以官方文档组合式API文档分析VUE3细节的变化。

2，VUE3细节变化

2-1，创建应用的方式变了

使用createApp()方式创建。

import { createApp } from 'vue'
// 从一个单文件组件中导入根组件
import App from './App.vue'

const app = createApp(App)

2-2，模板可以有多个“根”元素。

VUE2的template中只有一个“根”标签，但是VUE3中可以有多个“根”标签。

<template>
  	<div>root1</div>
  	<div>root2</div>
  	<div>root3</div>
  </template>

2-3，VUE3的响应式设计发生变化

在 Vue 3 中，数据是基于 JavaScript Proxy（代理） 实现响应式的。我们看官网的描述，如下图：

详细信息可以点击链接下面的地址：

https://cn.vuejs.org/guide/extras/reactivity-in-depth.html#runtime-vs-compile-time-reactivity

官方给我提供了一个非常重要的信息：在 JavaScript 中有两种劫持 property 访问的方式：getter / setters 和 Proxies。

getter/setters对于VUE2 的同学应该非常清楚。Proxies大家可以到MDN上恶补。

2-4，生命周期发生了变化

将VUE2中的beforeDistroy和distoryed变成了beforeUnmount和unmounted。

下图是VUE3的生命周期图：

2-5，可以使用组合式API开发

可以是setup()方式或者<script setup></script>形式。

2-6，侦听器方式了变化

VUE2中可以使用watch和计算属性，在vue3中watch和计算属性都可以使用，同时增加了watchEffect这api。

2-7，多个v-model绑定

下面是官方的代码，足以说明问题：

<UserName
  v-model:first-name="first"
  v-model:last-name="last"
/>
    
<script setup>
defineProps({
  firstName: String,
  lastName: String
})

defineEmits(['update:firstName', 'update:lastName'])
</script>

<template>
  <input
    type="text"
    :value="firstName"
    @input="$emit('update:firstName', $event.target.value)"
  />
  <input
    type="text"
    :value="lastName"
    @input="$emit('update:lastName', $event.target.value)"
  />
</template>

2-8，引入组合式函数

引入组合式函数，可以为复杂应用简化代码做好基础。关于组合式函数官方的描述：

什么是“组合式函数”？

在 Vue 应用的概念中，“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。

当构建前端应用时，我们常常需要复用公共任务的逻辑。例如为了在不同地方格式化时间，我们可能会抽取一个可复用的日期格式化函数。这个函数封装了无状态的逻辑：它在接收一些输入后立刻返回所期望的输出。复用无状态逻辑的库有很多，比如你可能已经用过的 lodash 或是 date-fns。

相比之下，有状态逻辑负责管理会随时间而变化的状态。一个简单的例子是跟踪当前鼠标在页面中的位置。在实际应用中，也可能是像触摸手势或与数据库的连接状态这样的更复杂的逻辑。

2-9，引入了内置组件

Transition，TransitionGroup，KeepAlive，Teleport，Suspense

上面是初次看VUE3中的官方文档中很容易看到的与vue2 的不同点。那么大家觉得VUE3以后能成为大型项目的首选吗？你会使用VUE3开发项目吗？你会持续学习VUE3吗？