vue3使用ref和reactive

Vue 3引入了两个新的API,refreactive,用于创建响应式对象。这两个方法都位于Vue.prototype上,因此可以在组件实例中直接使用。

  1. ref

ref函数用于创建一个响应式引用对象。这个函数可以接受一个普通的变量或对象作为参数,并返回一个响应式引用对象。要访问这个引用的值,需要使用.value属性。

例如:

const count = ref(0);
console.log(count.value); // 0count.value++; // 响应式更新
console.log(count.value); // 1

在上面的例子中,我们使用ref函数创建了一个响应式引用对象,并将其初始值设置为0。然后,我们可以通过.value属性来访问和修改这个引用的值。当修改这个值时,Vue会自动更新相关的视图。

  1. reactive

reactive函数用于创建一个响应式对象。这个函数可以接受一个普通的对象作为参数,并返回一个响应式代理对象。这个代理对象会拦截所有的属性访问和修改操作,并自动更新相关的视图。

例如:

const state = reactive({ count: 0 });
console.log(state.count); // 0state.count++; // 响应式更新
console.log(state.count); // 1

在上面的例子中,我们使用reactive函数创建了一个响应式对象,并将其初始值设置为一个包含count属性的对象。然后,我们可以通过直接访问和修改这个对象的属性来触发响应式更新。与ref不同的是,我们不需要使用.value属性来访问和修改这个对象的属性。

Vue 3 使用 refreactive 创建响应式对象的完整示例:

<template>
<div>
<p>{{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template><script>
import { ref, reactive } from 'vue';export default {
setup() {
// 使用 ref 创建响应式引用对象
const count = ref(1);// 使用 reactive 创建响应式对象
const state = reactive({
count: 0,
});// 使用 increment 方法修改引用对象的值和响应式对象的属性值
const increment = () => {
count.value++; // 修改引用对象的值
state.count++; // 修改响应式对象的属性值
};return {
count,
state,
increment,
};
},
};
</script>

在上面的示例中,我们使用 ref 创建了一个名为 count 的响应式引用对象,初始值为 1。我们还使用 reactive 创建了一个名为 state 的响应式对象,其中包含一个名为 count 的属性,初始值为 0。在 increment 方法中,我们通过调用 count.value++state.count++ 来修改引用对象的值和响应式对象的属性值。由于这些变量都是响应式的,因此当它们的值发生变化时,相关的视图也会自动更新。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/122633.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Qt中实现页面切换的两种方式

文章目录 方式一 &#xff1a;使用QStackedWidget讲解代码结构main.cpp完整代码运行结果&#xff1a; 方式二 &#xff1a;代码结构完整代码mainwindow.hnewmainwindow.hmain.cppmainwindow.cppnewmainwindow.cppmainwindow.uinewmainwindow.ui 效果 方式一 &#xff1a;使用QS…

docker 部署 若依 Ruoyi springboot+vue分离版 dockerCompose

本篇从已有虚拟机/服务器 安装好dokcer为基础开始讲解 1.部署mysql 创建conf data init三个文件夹 conf目录存放在mysql配置文件 init目录存放着若依数据库sql文件&#xff08;从navicat导出的并非若依框架自带sql&#xff09; 创建一个属于本次若依部署的网段&#xff08;只…

探秘JVM虚拟机中的堆、栈和方法区:内存世界的三位重要角色

在Java编程中&#xff0c;我们经常听到关于JVM&#xff08;Java虚拟机&#xff09;的概念。JVM是Java程序运行的核心&#xff0c;负责将Java源代码翻译成机器语言并执行。而JVM中的堆、栈和方法区则是内存管理的重要组成部分。本文将带您深入了解JVM虚拟机中这三个角色的关系&a…

Redis快速上手篇七(集群-分布式锁)

分布式锁 随着业务发展的需要&#xff0c;原单体单机部署的系统被演化成分布式集群系统后&#xff0c;由于分布式系统多线程、多进程并且分布在不同机器上&#xff0c;这将使原单机部署情况下的并发控制锁策略失效。 单纯的Java API并不能提供分布式锁的能力。为了解决这个问…

设置GIT代理

前言 很多同学在使用Git拉取代码被网络限制&#xff0c;速度很慢&#xff0c;本文给大家介绍如何给Git设置代理访问。 大家先自行准备好该有的代理 注意&#xff1a; 以下示例代码的端口要根据自己实际代理端口。 设置全局代理 git config --global http.proxy socks5://127…

sql-50练习题6-10

sql练习题6-10题 前言数据库表结构介绍学生表课程表成绩表教师表 0-6 查询"李"姓老师的数量0-7 查询学过"李四"老师授课的同学的信息0-8 查询没学过"李四"老师授课的同学的信息0-9 查询学过编号为"01"并且也学过编号为"02"的…

前端性别判断

<input type"radio" v-model"users.sex" value"1">男 <input type"radio" v-model"users.sex" value"0">女 这是一段HTML代码&#xff0c;用于创建两个单选按钮。这些单选按钮使用了Vue.js的v-mode…

外部中断0边沿触发

/*----------------------------------------------- 内容&#xff1a;通过中断接口P3.2连接的独立按键测试&#xff0c;按一次P1口的LED灯反向&#xff0c; 这里使用边沿触发&#xff0c;所以一直按键不松开和一次按键效果相同&#xff0c;区 别于电平触发 --…

Redis(09)| Reactor模式

我们在使用Redis的时候&#xff0c;通常是多个客户端连接Redis服务器&#xff0c;然后各自发送命令请求(例如Get、Set)到Redis服务器&#xff0c;最后Redis处理这些请求返回结果。 从上一篇博文《Redis&#xff08;08&#xff09;| 线程模型》中知道Redis是单线程。Redis除了处…

数据结构——栈与队列

目录 1. 中缀表达式转换为后缀表达式 2. 括号匹配问题 3. 栈实现队列 4. 约瑟夫环 1. 中缀表达式转换为后缀表达式 【问题描述】 输入一个中缀表达式&#xff0c;表达式中有、-、*、/四种运算以及&#xff08;、&#xff09;&#xff0c;表达式中的其他符号为大写的字母。实…

持续集成部署-k8s-服务发现-Ingress

持续集成部署-k8s-服务发现-Ingress 1. Ingress 是什么2. Ingress 控制器3. 安装 Ingress-Nginx3.1 添加 Helm 仓库3.2 更新 Helm 仓库3.3 下载 Ingress-Nginx 安装包3.4 配置 Ingress-Nginx 配置文件参数3.5 安装 Ingress-Nginx1. Ingress 是什么 Ingress是 Kubernetes 中的一…

力扣1047删除字符串中的所有相邻重复项(java,栈解法)

Problem: 1047. 删除字符串中的所有相邻重复项 文章目录 思路解题方法复杂度Code 思路 最直观的思路就是比较当前字的字符和相邻&#xff08;也包含删除后再相邻&#xff09;的上一字符是否相同&#xff0c;若相同则想办法去除两相同的字符&#xff0c;而关键就在如何较为便捷的…

QT webengine显示HTML简单示例

文章目录 参考示例1TestWebenqine.promainwindow.hmainwindow.cppmain.cpp效果 示例2 (使用setDevToolsPage函数)main.cpp效果 参考 QT webengine显示HTML简单示例 示例1 编译器 : Desktop Qt 5.15.2 MSVC2019 64bit编辑器: QtCreator代码: TestWebenqine.pro # TestWeben…

C#列表List的创建与使用

文章目录 C#列表List的创建与使用创建空列表方式一方式二 初始化创建插入数据逐个添加批量添加 访问列表遍历for循环foreach循环 C#列表List的创建与使用 创建空列表 方式一 List<string> pkValues new List<string>();方式二 var pkValues new List<stri…

pycharm运行R语言脚本(win10环境下安装)

文章目录 简介1. pycharm安装插件2. 安装R语言解释器2.1下载安装包2.2具体安装过程 3.编辑环境变量4 检验是否安装成功&#xff1a;5.安装需要的library6.pycharm中配置安装好的R语言解释器 简介 pycharm 安装 R language for Intellij R language for Intellij 是一个插件&am…

06-Flask-蓝图的使用

蓝图的使用 前言蓝图使用方式 前言 本篇来学习下Flask中蓝图的使用 蓝图 在Flask中使用蓝图(Blurprint)来分模块组织管理蓝图可以理解为存储一组视图方法的容器对象&#xff0c;特点如下&#xff1a; 一个应用可以具有多个Blueprint可以将一个Blueprint注册到任何一个未使用…

震惊!原来BUG是这么理解的!什么是BUG?软件错误(BUG)的概念

较为官方的概念&#xff1a; 当且仅当规格说明是存在的并且正确&#xff0c;程序与规格说明之间的 不匹配才是错误。 当需求规格说明书没有提到的功能&#xff0c;判断标准以最终用户为准&#xff1a;当程序没有实现其最终用户合理预期的 功能要求时&#xff0c;就是软…

【Python 零基础入门】常用内置函数 初探

【Python 零基础入门】内容补充 1 常用内置函数 Python 简介为什么要学习内置函数数据类型和转换int(): 转为整数float(): 转为浮点数list(): 转为列表tuple(): 转换为元组set():转换为集合dict(): 创建字典: 数学运算abs(): 绝对值pow(): 幂运算round(): 四舍五入min(): 最小值…

NPM【问题 01】npm i node-sass@4.14.1报错not found: python2及Cannot download问题处理

node-sass安装问题处理 1.问题2.处理2.1 方案一【我的环境失败】2.2 方案二【成功】2.3 方案三【成功】 1.问题 gyp verb which failed Error: not found: python2 # 1.添加Python27的安装路径到环境变量 gyp verb check python checking for Python executable "python…

leetcode:1154. 一年中的第几天(python3解法)

难度&#xff1a;简单 给你一个字符串 date &#xff0c;按 YYYY-MM-DD 格式表示一个 现行公元纪年法 日期。返回该日期是当年的第几天。 示例 1&#xff1a; 输入&#xff1a;date "2019-01-09" 输出&#xff1a;9 解释&#xff1a;给定日期是2019年的第九天。 示例…