当前位置：首页 > news >正文

Vue3学习（组合式API——reactive()和ref()函数详解）

news 来源：原创 2025/5/16 10:13:30

目录

一、reactive()函数。

（1）介绍与使用。

（2）简单案例演示。

二、ref()函数。

（1）介绍与使用。

（2）简单案例演示。

<1>ref()函数获取响应式对象的本质与底层。

<2>基于简单类型或对象类型数据ref()构建响应式对象演示。

三、reactive()与ref()函数小结。

一、reactive()函数。

（1）介绍与使用。

官方解释：返回一个对象的响应式代理。

基本作用：接收对象类型数据的参数传入并返回一个响应式对象。之所以学这个函数是因为在Vue中默认的数据并不是响应式的。希望得到的是响应式的数据就需要通过函数reactive()或ref()进行处理。

核心使用步骤：
1、导入reactive()函数。
2、执行reactive()函数并传入类型为对象的初始值，并使用变量接收返回值。

（2）简单案例演示。

代码。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><div>{{state}}</div><div>-----------------------</div><div>{{state.count}}</div><button @click="changeCount">count++</button></div><script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {//reactive接收一个对象类型的数据，返回一个响应式的对象const state = reactive({count: 100})const changeCount = () => {state.count++}return {state,changeCount}}}).mount('#app')</script>
</body></html>

效果。

reactive()必须接收对象类型的数据！
如果接收简单类型数据又希望它是响应式，就需要使用函数ref()。

二、ref()函数。

（1）介绍与使用。

官方解释：接受一个内部值，返回一个响应式的、可更改的 ref 对象。此对象只有一个指向其内部值的属性 .value。

基本作用：接收简单类型或对象类型的数据传入，并返回一个响应式的对象。

核心使用步骤：
1、导入ref()函数。
2、执行ref()函数并传入初始值（简单类型或对象类型），并使用变量接收ref()函数的返回值。

（2）简单案例演示。

<1>ref()函数获取响应式对象的本质与底层。

本质：在原有传入数据的基础上，外层包了一层对象，包成复杂类型。
底层：包成复杂类型之后，再借助reactive()函数实现了响应式！
脚本中访问数据，需要通过.value。

代码示例。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><div>{{state}}</div> <!-- 插值表达式中不需要使用.value --></div><script type="module">import { createApp, ref } from './vue.esm-browser.js'createApp({setup() {//ref接收简单类型或对象类型的数据，返回一个响应式的对象//本质：在原有传入的数据基础上包了一层对象const state = ref(0)console.log(state)console.log(state.value)return {state}}}).mount('#app')</script>
</body></html>

效果。

<2>基于简单类型或对象类型数据ref()构建响应式对象演示。

代码。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><!-- 插值表达式中不需要使用.value --><div>{{state}}</div><button @click="changeCount">count++</button><div>-----------------------</div><div>{{userInfo}}</div></div><script type="module">import { createApp, ref } from './vue.esm-browser.js'createApp({setup() {//ref接收简单类型或对象类型的数据，返回一个响应式的对象const userInfo = ref({name: 'zs',age: 18})//本质：在原有传入的数据基础上包了一层对象const state = ref(0)console.log(state)const changeCount = () => {state.value++  //脚本中使用.value访问值console.log(state.value)}return {state,userInfo,changeCount}}}).mount('#app')</script>
</body></html>