vue3中的reactive、readonly和shallowReactive

ops/2024/9/25 2:09:28/

在 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/ops/25131.html

相关文章

# IntelliJ IDEA 中 springboot 启动类 SpringApplication.run 报红分析

IntelliJ IDEA 中 springboot 启动类 SpringApplication.run 报红分析 一、原因分析:通常 SpringApplication.run 报红,可能是由以下几种原因造成的: 1、项目的主配置文件中 pom.xml 可能没有导入相关依赖。 2、方法参数错误:S…

table表格导出为excel文件并设置样式

table表格导出为excel文件并设置样式 安装xlsx、xlsx-style-medalsoft 的 npm 包: npm i xlsx xlsx-style-medalsoft设置全局: Vue.prototype.$XLSX XLSX; // 设置全局 Vue.prototype.$XLSXStyle XLSXStyle; // 设置全局具体代码实现: …

利用Python开发一个上传文件的服务

准备工作: 1、安装uvicorn,利用其来作为web服务器 2、安装Starlette,利用其来作为web开发框架 3、安装python-multipart,让其支持form表达形式的文件上传 4、postman:文件上传的发起者,这样我们就不用写…

Visual Studio C++ 示例

Visual Studio C++ 示例 项目2023/06/163 个参与者反馈 本文内容 GitHub 上的存档 C++ 示例ATL 示例CLR 和语言示例 - Windows 窗体COM 事件示例显示另外 13 个 Visual Studio C++ 示例可在 Web 上找到。 Microsoft 已生成许多 C++ 示例,这些示例演示了跨多种技术的不同功能…

React、React Router 和 Redux 常用Hooks 总结,提升您的开发效率!

Hooks 是 React 16.8 中引入的一种新特性,它使得函数组件可以使用 state 和其他 React 特性,从而大大提高了函数组件的灵活性和功能性。下面分别总结React、React Router 、Redux中常用的Hooks。 常用Hooks速记 React Hooks useState:用于…

MATLAB的几种边缘检测算子(Sobel、Prewitt、Laplacian)

MATLAB的几种边缘检测算子(Sobel、Prewitt、Laplacian) clc;close all;clear all;warning off;%清除变量 rand(seed, 100); randn(seed, 100); format long g;% 读取图像 image imread(lena.png); % 转换为灰度图像 gray_image rgb2gray(image); % 转换为double类型以进行计算…

ADB 命令获取Android 设备的屏幕分辨率和屏幕像素密度

1. 获取屏幕分辨率和像素密度 获取 Android 设备屏幕分辨率: adb shell wm size Physical size: 1440x3120 获取android设备屏幕密度(DPI): adb shell wm density Physical density: 560 打印屏幕相关的详细信息: adb shell dumpsys wi…

vue修改路由meta的标题

项目场景: vue脚手架项目根据不同的条件动态设置路由title 解决方案: javascript const layout [{path: /Detail,component: () > import(/index.vue),name: Detail,meta: {title: ,keepAlive: false,},beforeEnter: (to, from, next) > {if (t…