vue3.0 readonly

女爷i 2021-07-24 19:53 318阅读 0赞

传入ref或reactive对象,并返回一个原始对象的只读代理,对象内部任何嵌套的属性也都是只读的。
    传入普通对象等也返回只读代理
    传入普通数值或字符串不能变成只读
    
    
    使用:
    	import {readonly } from 'vue'
    
    	setup()
    	{
    		const xx=readonly(参数);
    	}

代码示例:

<template>
      <div>
          <img src="./logo.png">
        <h1>Hello Vue 3!</h1>
        { { name}}{ { obj.sex}}
        <button @click="inc">Clicked { {  count }} times.</button>
      </div>
    
    </template>
    
    <script>
    import {  ref,reactive,computed,readonly } from 'vue'
    
    export default { 
      setup() { 
        let count = readonly(ref(0))
        let name = ref('jeff')
        const obj=reactive({ sex:'male'})
        const robj=readonly(obj); 
    
        let r=readonly('aa') //不具有只读的能力
    
    
        const inc = () => { 
    
          count.value++;
          robj.sex='tom'
    
          r='vv';
          console.log(r);
    
        }
    
        return { 
          count,
          inc,
          name, //在setup返回对象中自动解套
          obj
        }
      }
    }
    </script>
    
    <style scoped>
    img { 
      width: 200px;
    }
    h1 { 
      font-family: Arial, Helvetica, sans-serif;
    }
    </style>

发表评论取消回复

表情：

评论列表（有 0 条评论，318人围观）

还没有评论，来说两句吧...

相关阅读

相关 odoo onchange readonly

onchange 中只可以获取form中给的值其他值都为False onchange 默认不可在其中修改readonly字段, 修改方法, 添加force\_sav

素颜马尾好姑娘i/ 2023年08月17日 17:10/ 0 赞/ 89 阅读

相关 C#——关键字：readonly

C\——关键字：readonly readonly 关键字是一个可在四个上下文中使用的修饰符：在字段声明中，readonly 指示只能在声明期间或在同一个类的构

淩亂°似流年/ 2023年01月05日 04:00/ 0 赞/ 187 阅读

相关 Vue3 readonly,shallowReadonly,isReadonly,isProxy,toRaw,markRaw

isProxy：用于检查一个对象是否由reactive或者readonly(shallowReadonly)方法创建的代理 readonly：用于创建一个只读的数据，并且是递

た入场券/ 2022年10月05日 11:48/ 0 赞/ 182 阅读

相关 const和static readonly 区别

[const和static readonly 区别][const_static readonly] 我们都知道，const和static readonly的确很像：通过

痛定思痛。/ 2022年07月16日 00:16/ 0 赞/ 218 阅读

相关 const,static和readonly区别

首先说一下static。static实际和两者区别很大，甚至可以不用放在一起进行比较，它表示静态，用于在声明类时实例化方法或者字段，不能通过实例化的类调用静态方法或字段，静态方

爱被打了一巴掌/ 2022年06月15日 08:47/ 0 赞/ 239 阅读

相关 input readOnly和readonly区别

1.input readOnly和readonly都是网络代码语言 2.disabled 属性的作用是禁用 3.readonly 属性为只读，但没有禁用 4.通过表单提交

左手的ㄟ右手/ 2022年04月22日 21:12/ 0 赞/ 250 阅读

相关 Shell: readonly介绍

1. 概念 `readonly`在shell脚本中，用来标记变量是只读的，后续执行过程中就不能对其值进行改变，这个用来定义一些常量类的变量. 如果对其进行重新赋值，会提示

红太狼/ 2021年12月02日 00:02/ 0 赞/ 290 阅读

相关 readonly 和 disable 区别

readonly 和 disable的区别 Readonly和Disabled它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别，总结如下

比眉伴天荒/ 2021年10月08日 06:54/ 0 赞/ 408 阅读

相关 vue3.0 readonly

传入ref或reactive对象,并返回一个原始对象的只读代理,对象内部任何嵌套的属性也都是只读的。传入普通对象等也返回只读代理传入普通数值或字符串

女爷i/ 2021年07月24日 19:53/ 0 赞/ 319 阅读

相关 vue3.0 shallowReadonly和readonly响应式源码实现

在处理器中只需要取消掉set和deleteProperty的功能即可效果图: ![在这里插入图片描述][20210411163104163.png] ![在

旧城等待，/ 2021年07月24日 14:07/ 0 赞/ 691 阅读