带你看懂Vue3的组合式Api

最新推荐文章于 2025-05-05 16:41:04 发布

原创最新推荐文章于 2025-05-05 16:41:04 发布

· 1.3k 阅读

24 ·

版权

文章标签：

#vue.js

本文介绍了Vue3中的新插件Volar，它是Vue2Vetur的升级版，支持Vue3的特性。同时讨论了Vue3的兼容性问题，包括版本限制，以及如何使用vue-cli和vite创建Vue3项目。文章还涵盖了双向数据绑定原理的变化、支持Fragments、CompositionAPI的使用以及ref和reactive的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、新插件Volar

使用vscode开发vue2项目的小伙伴肯定都认识Vetur这个神级插件。但是在vue3中这个插件就显得捉襟见肘了，比如vue3的多片段这个插件就会报错。

这个时候就需要使用Volar，Volar可以理解为Vue3版本的Vetur，代码高亮，语法提示，基本上Vetur有的它都有。

在vue2中我们一直使用Vue 2 Snippets，在vue3我们推荐使用Vue 3 Snippets，因为它支持vue3的同时完全向前兼容vue2

二、兼容性

vue3固然好用但是我们还是不能盲目追求新东西，在使用vue3开发之前我们需清楚的知道它的兼容性。

vue2 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

vue3 不支持 IE11 及以下版本。

三、创建vue3工程

1、使用vue-cli创建

先安装@vue/cli : npm install -g @vue/cli

创建：vue create vue_test

运行：npm run serve

2、使用vite创建

vite是新一代前端构建工具；

优势：无需打包操作，可快速的冷启动；轻量快速的热重载；真正的按需编译；

步骤：

创建工程：npm init vite-app <project-name>

安装依赖：npm install ...

运行：npm run dev

补充：分析Vue3的工程结构

在main.js中引入的不再是Vue构造函数，引入的是一个名为createApp的工厂函数：

import { createApp } from 'vue'

创建实例对象-app（类似于Vue2中的vm，但app比vm更“轻”：

createApp(App).mount('#app')

四、vue3双向数据绑定原理的改变

vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持结合发布订阅模式的方式来实现的。

vue3 中使用了 es6 的 ProxyAPI 对数据代理。

相比于vue2.x，使用proxy的优势如下

defineProperty只能监听某个属性，不能对全对象监听
可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）
可以监听数组，不用再去单独的对数组做特异性操作 vue3.x可以检测到数组内部数据的变化

五、Vue3支持碎片(Fragments)

就是说在组件可以拥有多个根节点。

vue2

<template>
<div class='form-element'>
<h2> {{ title }} </h2>
</div>
</template>

vue3

<template>
<div class='form-element'>
</div>
<h2> {{ title }} </h2>
</template>

六、Composition API（组合式 API）

Vue2与Vue3 最大的区别 — Vue2使用选项类型API（Options API）对比Vue3合成型API（Composition API）

1.为什么使用组合式api

旧的选项型API在代码里分割了不同的属性: data,computed属性，methods，等等。新的合成型API能让我们用方法（function）来分割，相比于旧的API使用属性来分组，这样代码会更加简便和整洁。

这个组件最原始的版本是由选项式 API 写成的。如果我们为相同的逻辑关注点标上一种颜色，那将会是这样：

处理相同逻辑关注点的代码被强制拆分在了不同的选项中，位于文件的不同部分。在一个几百行的大组件中，要读懂代码中的一个逻辑关注点，需要在文件中反复上下滚动，这并不理想。另外，如果我们想要将一个逻辑关注点抽取重构到一个可复用的工具函数中，需要从文件的多个不同部分找到所需的正确片段。

而如果用组合式 API 重构这个组件，将会变成下面右边这样：

现在与同一个逻辑关注点相关的代码被归为了一组：我们无需再为了一个逻辑关注点在不同的选项块间来回滚动切换。此外，我们现在可以很轻松地将这一组代码移动到一个外部文件中，不再需要为了抽象而重新组织代码，大大降低了重构成本。

2.具体选择式api与组合式api的代码对比

vue2

export default {
props: {
title: String
},
data () {
return {
username: '',
password: ''
}
},
methods: {
login () {
// 登陆方法
}
},
components:{
"buttonComponent":btnComponent
},
computed:{
   fullName(){
   return this.firstName+" "+this.lastName;
   }
}
}

vue3

export default {
props: {
title: String
},

setup () {
const state = reactive({ //数据
username: '',
password: '',
lowerCaseUsername: computed(() => state.username.toLowerCase()) //计算属性
})
//方法
const login = () => {
// 登陆方法
}
return {
login,
state
}
}
}