【Vue3.0】Vue3.0组合式API的使用

最新推荐文章于 2025-03-10 11:40:27 发布

一笑程序猴

最新推荐文章于 2025-03-10 11:40:27 发布

阅读量2.1k

点赞数

分类专栏：前端 VUE 文章标签： javascript 前端 vue

本文链接：https://blog.youkuaiyun.com/lixiaosenlin/article/details/121363756

版权

本文介绍了Vue3.0相较于2.0的重大变化，重点讲解了组合式API的概念和优势，包括setup函数的使用，以及ref和reactive两个响应式工具的详细解释，帮助开发者理解并掌握Vue3.0的新特性。

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

【千字长文，熬夜更新，原创不易，多多支持，感谢大家】

前言

小伙伴们大家好。为期近半个月的TypeScript分享到这里就结束了，当然了前面关于TypeScript的分享都是一些表面的基础知识，想要更深入的了解还需要多学多练多看源码，本猴就不再做过多分享了。
从今天开始将为小伙伴们奉上关于Vue3.0相关知识的一些分享。vue3.0相较于vue2.0还是有很大的改变的，个人感觉vue3.0的用法更接近于react的了。至于一些语法指令啥的相较于2.0没有什么变化，这里就不再分享了。那么我们要学习的是3.0中的一些变化和新的技术点，下面我们先从vue3.0的使用开始。

vue3.0的使用

vue3.0中从vue的初始化开始就已经发生了改变。我们都知道在2.0中是通过 new Vue() 的形式来创建一个vue实例的，而在3.0中则是借助一个方法createApp() 来实现的。3.0中最直观的变化就是采用了函数式编程，几乎所有的操作都是基于函数的。因此我们在使用时要先从Vue中导入它们，然后再去使用。接下来我们就从利用createApp函数创建vue的实例开始。

createApp函数接收一个对象参数，对象中可以包含数据模型等信息

createApp函数的返回值就是一个vue的实例，然后就可以通过vue的实例进行一些相关操作，比如注册全局组件，注册全局指令等

// main.js
import {
   createApp} from 'vue';

const app = createApp({
   
	data(){
   
		return {
   
			message:'hello vue3.0'
		}
	}
});
app.component('xxx',xxx);//注册全局组件
app.directive('xxx',xxx);//注册全局指令
app.