vue3中的reactive、readonly和shallowReactive

news/2024/9/24 13:42:09/

在 Vue 3 中,reactivereadonlyshallowReactive 是用于创建响应式对象的函数,它们可以帮助管理组件状态和数据流。下面是它们的详细介绍以及相应的代码示例:

  1. reactive:

    • reactive 函数用于创建一个完全响应式的对象,当对象的属性发生变化时,相关的视图会自动更新。
    javascript">import { reactive } from 'vue';const state = reactive({count: 0,message: 'Hello Vue!',
    });
    
  2. readonly:

    • readonly 函数用于创建一个只读的响应式对象,其属性不能被修改,但如果属性值是对象或数组,则对象内部的属性可以修改。
    javascript">import { readonly } from 'vue';const readOnlyState = readonly(state);
    
  3. shallowReactive:

    • shallowReactive 函数与 reactive 类似,但它只会使对象的顶层属性变为响应式,而不会递归地转换嵌套对象的属性。
    javascript">import { shallowReactive } from 'vue';const shallowState = shallowReactive({count: 0,nested: {message: 'Hello Vue!',}
    });
    

这些函数提供了不同级别的响应式对象,你可以根据需求选择合适的函数来创建对象。在实际应用中,你可以将这些响应式对象用于组件的状态管理、数据传递等场景,从而实现更加灵活和高效的 Vue 应用程序。


http://www.ppmy.cn/news/1453961.html

相关文章

SUSE Linux Rsync+inotify精准系统同步配置实战

配置不难,也可以说难,这完全取决于需求。一.服务器状况: NFS文件服务器,存储提交的附件和图片。希望搭建一个在线的备份文件服务器,实现主服务和备份服务器之间的文件的实时同步。 Filesserver:/tmp # lsb_release -a LSB Version: n/a Distributor ID: SUSE Descri…

【Leetcode】二叉树基础题思路

🔥个人主页:Quitecoder 🔥专栏:Leetcode刷题 目录 1.单值二叉树2.相同的树3.对称二叉树4.另一棵树的子树 1.单值二叉树 题目链接:965.单值二叉树 题目描述: 单值二叉树是所有节点的值都相同的二叉树。实现…

jvm 马士兵 01 JVM简介,class文件结构

01.JVM是什么 JVM是一个跨平台的标准 JVM只识别class文件,符合JVM规范的class文件都可以被识别 u1 是一个字节 u2是两个字节

QT5之事件——包含提升控件

事件概述 信号就是事件的一种,事件由用户触发; 鼠标点击窗口,也可以检测到事件;产生事件后,传给事件处理,判断事件类型,后执行事件相应函数; 类似单片机的中断(中断向量…

CMakeLists.txt语法规则:提供信息的变量说明一

一. 简介 前面几篇文章学习了 CMakeLists.txt语法中 部分常用命令。 接下来学习CMakeLists.txt语法中部分常用变量,变量也是 cmake 中的一个重头戏,cmake 提供了很多内置变量。每一个变量都有它自己的含义,可以通过如下链接地址查询到所有…

自注意力架构大成者_Transformer(Pytorch 17)

1 模型简介 在上节比较了 卷积神经网络(CNN)、循环神经网络(RNN)和 自注意力(self‐attention)。值得注意的是, 自注意力同时具有并行计算和最短的最大路径长度这两个优势。因此,使…

C语言中的goto语句

goto label; C 语言中的 goto 语句允许把控制无条件转移到同一函数内的被标记的语句。 #include <stdio.h> int main(){goto first;printf("我是你好\n");first:printf("nihao\n");second:printf("This is 2\n");return 0; } 使用goto会…

玩comfyui踩过的坑之使用ComfyUI_Custom_NODES_ALEKPET翻译组件问题

环境&#xff1a; 秋叶安装包&#xff0c;安装ComfyUI_Custom_NODES_ALEKPET组件或者直接下载网盘中的包&#xff0c;直接解压包到comfyui根目录/custom_nodes/&#xff0c;重启后&#xff0c;按指导文件操作。 注意&#xff1a;网盘指导包中有配置好的流程json文件&#xff0…