【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 用于创建一个单一的响应式对象,适合于单个值的情况。

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

相关推荐
只有干货7 分钟前
前端传字符串 后端比较date类型字段
前端
\光辉岁月/9 分钟前
Axios基本使用
javascript·axios
波波鱼દ ᵕ̈ ૩43 分钟前
学习:JS[6]环境对象+回调函数+事件流+事件委托+其他事件+元素尺寸位置
前端·javascript·学习
cypking1 小时前
解决electron+vue-router在history模式下打包后首页空白问题
javascript·vue.js·electron
climber11211 小时前
【Python Web】一文搞懂Flask框架:从入门到实战的完整指南
前端·python·flask
Watermelo6172 小时前
极致的灵活度满足工程美学:用Vue Flow绘制一个完美流程图
前端·javascript·vue.js·数据挖掘·数据分析·流程图·数据可视化
门前云梦2 小时前
ollama+open-webui本地部署自己的模型到d盘+两种open-webui部署方式(详细步骤+大量贴图)
前端·经验分享·笔记·语言模型·node.js·github·pip
Micro麦可乐2 小时前
前端拖拽排序实现详解:从原理到实践 - 附完整代码
前端·javascript·html5·拖拽排序·drop api·拖拽api
Watermelo6172 小时前
Web Worker:让前端飞起来的隐形引擎
前端·javascript·vue.js·数据挖掘·数据分析·node.js·es6
Micro麦可乐2 小时前
前端与 Spring Boot 后端无感 Token 刷新 - 从原理到全栈实践
前端·spring boot·后端·jwt·refresh token·无感token刷新