【Vue3 组合式 API: reactive 和 ref 函数】

文章目录

    • [1. 什么是组合式 API?](#1. 什么是组合式 API?)
    • [2. reactive 函数](#2. reactive 函数)
    • [3. ref 函数](#3. ref 函数)
    • [4. reactive vs ref](#4. reactive vs ref)

1. 什么是组合式 API?

组合式 API 是 Vue 3 中的一种新特性,它允许我们通过函数来组织组件的逻辑,而不是依赖于选项式 API 中的选项对象。这使得代码更易于组织和重用,并且可以提高开发效率。


2. reactive 函数

reactive 函数用于创建一个响应式的对象,当对象的属性发生变化时,相关的视图将会自动更新。

javascript 复制代码
import { reactive } from 'vue';

const state = reactive({
  count: 0
});

// 在模板中使用
{{ state.count }}

// 修改状态
state.count++

在上面的示例中,state 对象是响应式的,因此当 state.count 发生变化时,相关的视图将会自动更新。


3. ref 函数

ref 函数用于创建一个包装过的响应式对象,它返回一个带有 value 属性的对象,该属性的值可以被修改。下面是一个示例:

javascript 复制代码
import { ref } from 'vue';

const count = ref(0);

// 在模板中使用
{{ count.value }}

// 修改状态
count.value++

在上面的示例中,count 是一个包装过的响应式对象,我们通过 count.value 来访问和修改其值。


4. reactive vs ref

  • reactive 用于创建一个包含多个属性的响应式对象,适合于复杂的数据结构。
  • ref 用于创建一个单一的响应式对象,适合于单个值的情况。

在选择使用哪个函数时,需要根据具体的需求来决定。

相关推荐
知识分享小能手1 小时前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程
demi_meng2 小时前
reactNative 遇到的问题记录
javascript·react native·react.js
MC丶科3 小时前
【SpringBoot 快速上手实战系列】5 分钟用 Spring Boot 搭建一个用户管理系统(含前后端分离)!新手也能一次跑通!
java·vue.js·spring boot·后端
千码君20163 小时前
React Native:从react的解构看编程众多语言中的解构
java·javascript·python·react native·react.js·解包·解构
lijun_xiao20095 小时前
前端最新Vue2+Vue3基础入门到实战项目全套教程
前端
90后的晨仔5 小时前
Pinia 状态管理原理与实战全解析
前端·vue.js
杰克尼5 小时前
JavaWeb_p165部门管理
java·开发语言·前端
EndingCoder5 小时前
WebSocket实时通信:Socket.io
服务器·javascript·网络·websocket·网络协议·node.js
90后的晨仔5 小时前
Vue3 状态管理完全指南:从响应式 API 到 Pinia
前端·vue.js
90后的晨仔5 小时前
Vue 内置组件全解析:提升开发效率的五大神器
前端·vue.js