vueJs函数readonly与shallowReadonly使用对比详解

目录
  • 前言
  • readonly
  • shallowreadonly
  • 总结

前言

在使用vue3开发项目时,对于一些特殊的需求,针对有些数据字段,在前端,只允许读取,不允许修改,比如:有的网站用户名,一旦注册了,就不允许修改

当然,有时候,我们从别的地方引用数据过来,用作信息的展示,但是却不允许修改,不希望影响源数据

那么readonly与shallowReadonly这两个API就很有用了的

readonly

让一个响应式数据变为只读的,接收一个响应式数据,经过readonly加工处理一下,那么新赋值的数据都不允许修改

接受一个对象 (不论是响应式还是普通的) 或是一个 ref，返回一个原值的只读代理

页面没有更新有两种情况

[1]. 数据修改了,但数据不是响应式,vue监测不到

[2]. 数据压根就没有更改

const original = reactive({ count: 0 })
const copy = readonly(original)
// 更改源属性会触发其依赖的侦听器
original.count++
// 更改该只读副本将会失败，并会得到一个警告,页面数据不会更新
copy.count++ // warning!

使用readonly对响应式数据包裹处理一下后,则再次修改数据时,页面数据不会更新

shallowreadonly

接收一个响应式数据,经过shallowreadonly的处理,变成一个只读的,只考虑对象的第一层数据,不可以修改,但是第一层嵌套里的深层数据却支持修改

让一个响应式数据变为只读能力(浅只读)

应用场景: 不希望数据被修改,当数据是从别的地方取过来,不希望影响源数据

const state = shallowReadonly({
  foo: 1,
  nested: {
    bar: 2
  }
})
// 更改状态自身的属性会失败,不可以修改
state.foo++
// ...但可以更改下层嵌套对象
isReadonly(state.nested) // false
// 这是可以通过的
state.nested.bar++

总结

readonly与shallowReadonly都是让响应式数据只具备读的能力,后者是浅层次的只读,也就是只对数据对象第一层起作用,深层次的嵌套,当时用shallowReadonl()处理时,深层次数据支持被修改

在不希望数据被修改,或当数据是从别的地方取过来,不希望影响源数据时,使用readonly()或shallowReadonly()就很有用

至于数据能不能修改是由写代码的开发者决定的,也是由产品功能决定的,支不支持修改,可以控制数据是否能读写能力

以上就是vueJs函数readonly与shallowReadonly使用对比详解的详细内容，更多关于vue readonly shallowReadonly的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Vue2 Dialog弹窗函数式调用实践示例

    目录 前言 Vue2 的弹窗常用的使用方式 第一种:将弹窗写在上下文中 第二种:原型上注入全局方法 第三种:通过依赖注入的方式 合理的使用方式 功能实现 结语 前言 Dialog 对话框组件几乎是每个前端项目必不可少的组件,通常是在保留当前页面状态并屏蔽其他用户输入的情况下,与用户交互并承载相关操作. 在 BOM 的方法中,alert.prompt 都是以前用来做类似功能的方法,但是这些浏览器内置方法会完全停止网页代码执行,对于贫乏的前端线程资源来说实在是过于僵硬.于是便产生了各种各样的 Js

  • VueJs中toRef与toRefs函数对比详解

    目录 正文 toRef()函数 与ref的不同 toRefs()函数 为啥需要toRef()与toRefs()函数 总结 正文 ref是处理基本数据类型响应式API函数,在setup中声明定义的变量,可以直接在模板中使用 没有被响应式API包裹处理的变量数据,是不具备响应式能力的 也就是往往在逻辑中修改了数据,但是页面不会更新,那怎么样将一个非响应式数据变成响应式数据 就需要用到toRef()与toRefs()这两个componsition API的 单纯的去看概念,往往比较抽象,是难以理解的,

  • Vue 2中实现CustomRef方式防抖节流

    目录 前言 背景 撸代码 防抖(debounce) 代码 使用 节流(throttle) 代码 使用 总结 前言 今天给大家带来的是Vue 2 中的实现 CustomRef 方式防抖/节流这篇文章,前几天利用 customRef 实现了在 vue 3 中的极致防抖/节流的新方式.感兴趣的朋友可以点击 Vue 3 中的极致防抖/节流(含常见方式防抖/节流) 进行查看. 在前端的开发过程中,在涉及到与用户交互的过程中是基本上都是需要处理的,常规操作就是在对应位置加上防抖或者节流. 加上防抖或者节流的

  • vueJs函数toRaw markRaw使用对比详解

    目录 前言 toRaw()函数 markRaw()函数 总结 前言 针对一些特殊的需求,在项目里,需要将响应式数据变为普通原始类型数据,这种情况是有的 在Vue里,能够将普通数据类型的数据变为响应式数据,同时,也能将响应式类型数据变为普通类型数据 可以用于提升数据的性能 toRaw()函数 接收一个reactive响应式数据,将一个响应式的数据变为普通类型的数据,转化为非响应式数据,相当于还原对象,reactive相当于制作,但对于ref响应式数据不起作用 将一个由reactive生成的响应式对

  • 一文搞懂VueJs中customRef函数使用

    目录 前言 示例-延迟显示 总结 前言 ref是Vue官方提供的componsition API,将一个非响应式数据转变为响应式数据的函数,至于底层怎么实现数据的收集与响应式 使用者无需去关注,相当于就是精装电脑,然而有时候,针对一些复杂特殊的需求,我们需要自己造轮子,自己手动原生的去实现内部结构 实现基础的功能的同时,还要进行额外的拓展,那么这时候就需要自定义ref了的,它就相当于是组装式的电脑,内部结构需要自己去组装,实现 而非直接从商城里购买,用一些现成的零部件组装一个类似精装的电脑,甚至

  • Python 内置函数globals()和locals()对比详解

    这篇文章主要介绍了Python globals()和locals()对比详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 Python的两个内置函数,globals()和locals() ,它们提供了基于字典的访问局部和全局变量的方式. globals()是可写的,即,可修改该字典中的键值,可新增和删除键值对. 而locals()是不可修改字典中已存在的键值的,也不能pop移除键值对,但是可以新增键值对. Demo: a = 1 # 定义一个

  • lambda表达式与传统接口函数实现方式对比详解

    lambda表达式与传统接口函数实现方式对比详解

    目录 在本号之前写过的一些文章中,笔者使用了lambda表达式语法,一些读者反映说代码看不懂.本以为java 13都已经出了,java 8中最重要特性lambda表达式大家应该都掌握了,实际上还是存在大量的程序员没有使用java8,还有的使用了java8也不会使用lambda表达式.所以,写这篇文章还是有必要的,如果您觉得我的文章对您有帮助,期待您的关注. Lambda表达式是Java 8最流行最常用的功能特性.它将函数式编程概念引入Java,函数式编程的好处在于可以帮助我们节省大量的代码,非常

  • 关于Django ForeignKey 反向查询中filter和_set的效率对比详解

    前言 大家使用 Django 创建模型的时候一定会经常使用 ForeignKey 来创建两个表格之间多对一的外键关系,例如B中有一个 models.ForeignKey(A) .而当我们需要反向查询 A 中某个具体实例所关联的 B 时,可能会用到 A.B_set.all() 或 B.objects.filter(A) 这两种不同的方法. 不知道大家有没有也想过一个问题:当网站实际上线后,SEO强调页面加载速度,而当面对不断增大的请求量,这两种方法的哪一种速度更快? 馆主我产生了这个疑问,所以就打

  • Python图像运算之图像灰度直方图对比详解

    Python图像运算之图像灰度直方图对比详解

    目录 一.灰度增强直方图对比 二.灰度减弱直方图对比 三.图像反色直方图对比 四.图像对数变换直方图对比 五.图像阈值化处理直方图对比 六.总结 一.灰度增强直方图对比 图像灰度上移变换使用的表达式为: DB=DA+50 该算法将实现图像灰度值的上移,从而提升图像的亮度,结合直方图对比的实现代码如下所示. # -*- coding: utf-8 -*- # By:Eastmount import cv2 import numpy as np import matplotlib.pyplot as

  • react性能优化useMemo与useCallback使用对比详解

    react性能优化useMemo与useCallback使用对比详解

    目录 引言 对比 useMemo useCallback 引言 在介绍一下这两个hooks的作用之前,我们先来回顾一下react中的性能优化.在hooks诞生之前,如果组件包含内部state,我们都是基于class的形式来创建组件.当时我们也知道,react中,性能的优化点在于: 调用setState,就会触发组件的重新渲染,无论前后的state是否不同 父组件更新,子组件也会自动的更新 基于上面的两点,我们通常的解决方案是:使用immutable进行比较,在不相等的时候调用setState:在

  • python中函数总结之装饰器闭包详解

    1.前言 函数也是一个对象,从而可以增加属性,使用句点来表示属性. 如果内部函数的定义包含了在外部函数中定义的对象的引用(外部对象可以是在外部函数之外),那么内部函数被称之为闭包. 2.装饰器 装饰器就是包装原来的函数,从而在不需要修改原来代码的基础之上,可以做更多的事情. 装饰器语法如下: @deco2 @deco1 def func(arg1,arg2...): pass 这个表示了有两个装饰器的函数,那么表示的含义为:func = deco2(deco1(func)) 无参装饰器语法如下:

  • C#中const 和 readonly 修饰符的用法详解

    1. 只有C#内置类型(int,double,long等)可以声明为const;结果.类和数组不能声明为const. 2. readonly 是在字段上使用的修饰符,直接以类名.字段访问. 3. const 必须在申明中初始化.之后不能再修改. 4. readonly可以在申明中初始化,也可以在构造函数中初始化,其它情况不能修改. namespace const_and_readonly { class Program { static void Main(string[] args) { Co

  • C++子类父类成员函数的覆盖和隐藏实例详解

    C++子类父类成员函数的覆盖和隐藏实例详解

    C++子类父类成员函数的覆盖和隐藏实例详解 函数的覆盖 覆盖发生的条件: (1) 基类必须是虚函数(使用virtual 关键字来进行声明) (2)发生覆盖的两个函数分别位于派生类和基类 (3)函数名和参数列表必须完全相同 函数的隐藏 隐藏发生的条件: (1)子类和父类的函数名相同,参数列表可以不一样 看完下面的例子就明白了 #include "iostream" using namespace std; class CBase{ public: virtual void xfn(int

  • C++ 中函数重载、覆盖与隐藏详解

    C++ 中函数重载.覆盖与隐藏详解 在C++语言中,函数扮演着很重要的角色,不管面向过程设计,还是基于对象设计:不管是面向对象编程,还是基于泛型编程,函数都可以随处而见.在谈论C++中的函数重载.覆盖和隐藏之前,先回顾下函数的基础知识. 函数的声明包括函数的返回值类型,函数名称,参数列表(参数的类型.参数的个数.参数的顺序).例如,声明一个两个整数之和的函数,int iAdd(int iNum1,int iNum2);而函数的定义可以理解为对函数功能的详尽而准确的解说,通俗点,就是实现函数"ho

  • python中函数默认值使用注意点详解

    当在函数中定义默认值时,值初始化只会进行一次,就是执行到def methodname时执行.看下面代码: from datetime import datetime def test(t=datetime.today()): print t if __name__ == "__main__": test() test() 两次方法调用输出的时间都为同一个值,而不是我们预想当前执行时间.对于上面这种情况,建议用下面的方式实现: from datetime import datetime

随机推荐