Vue3 API之getCurrentInstance、reactive、ref

吴维炜

于 2023-01-04 10:05:44 发布

阅读量913

点赞数 3

CC 4.0 BY-SA版权

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

本文链接：https://blog.csdn.net/qq_38209578/article/details/128542375

VUE 3.0 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了Vue3中的三个重要API：getCurrentInstance用于获取当前组件实例，reactive利用Proxy实现响应式数据，而ref则在Vue3中不仅用于DOM元素，还能定义数据响应式，支持基本数据类型和对象类型。在不同版本间，这些API的使用方式和机制有所差异，如Vue2中的this与Vue3的getCurrentInstance，以及响应式数据的实现方式变化。

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

前言

本文主要介绍 Vue3 API之getCurrentInstance、reactive、ref的语法及版本差异。
在这里插入图片描述

一、 getCurrentInstance

getCurrentInstance这个函数来返回当前组件的实例对象,也就是当前vue这个实例对象。

1.1 版本差异

Vue2中，可以通过this来获取当前组件实例；
Vue3中，在setup中无法通过this获取组件实例，console.log(this)打印出来的值是undefined。在Vue3中，getCurrentInstance()可以用来获取当前组件实例

1.2 语法

import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance()

二、reactive

reactive是Vue3中提供实现响应式数据的方法。

2.1 版本差异

在Vue2中响应式数据是通过defineProperty来实现的。
在Vue3响应式数据是通过ES6的Proxy来实现的。reactive参数必须是对象(json/arr)，如果给reactive传递了其他对象,默认情况下修改对象,界面不会自动更新,如果想更新,可以通过重新赋值的方式。

2.2 语法

import { reactive } from "vue";
const loginFormState = reactive({
    	name: "",
     	pwd: "",
     	loading: false,
 });

三、ref

3.1 版本差异

在vue2中，ref 获取一个 dom 元素和实例对象。
在vue3中，ref 是用来定义数据响应式。ref 可以接收基本数据类型，也可以是对象类型。

3.2 语法

// 基本数据类型：基本数据类型 ref 的处理方式还是 Object.defineProPerty() 的get()和set() 完成
import { ref} from "vue";
let loginFormRef = ref('vitian') // => console.log(loginFormRef.value) => vitian
loginFormRef.value = 'prince' // => console.log(loginFormRef.value) => prince

// 对象类型：对象类型的 ref 处理借助了 reactive函数（reactive函数的内部实现通过ES6的代理对象 Proxy ）
let loginFormRef = ref({
		name: "vitian",
     	pwd: ""
    }) // => console.log(loginFormRef.value.name) => vitian
loginFormRef.value.name = 'prince' // => console.log(loginFormRef.value.name) => prince