vue3 readonly使用详情

最新推荐文章于 2024-01-18 14:20:37 发布
最新推荐文章于 2024-01-18 14:20:37 发布
阅读量2.9k 收藏
点赞数
分类专栏： Vue3 文章标签： 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43876728/article/details/119143586
版权
  • readonly 是将通过ref 或reactive定义好的数据进行拷贝后变为仅可读的数据，不可进行修改，即无响应
  • 如强制修改 控制台将会报错警告

代码使用如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    Vue.createApp({
        setup(props, context) {
            const {
                reactive,
                readonly
            } = Vue
            let content = reactive(['aa'])
            let content2 = readonly(content)
            setTimeout(() => {
                content[0] = 'bb'
                content2[0] = 'cc'
            }, 2000)
            return {
                content,
                content2
            }
        },
        template: '<div>{{content[0]}}</div>'
    }).mount('#root')
</script>

</html>

前端-小鑫
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用Vue自定义指令实现Select组件
01-19
本篇文章教大家写一个非常简单的Select组件，想必很多人都写过Select，毕竟它太常用了，但是本篇文章的示例使用到了Vue的自定义指令，如果你对Vue自定义指令不怎么熟悉的话，本篇文章或许会让您有所收获！ 完成的效果图如下：   一、首先，我们简单布局一下： <template> <div class=select> <div class=inner> <div class=inputWrapper> <input type=text readonly placeholder=请选择菜品> <span class=iconfont ico
手撸vue3核心源码——响应式原理(readonly以及stop函数)
qq_63204040的博客
07-19 159
实现readonly以及stop
Vue3：readonly与shallowReadonly以及toRaw与markRaw
weixin_50236973的博客
12-14 357
Vue3：readonly与shallowReadonly以及toRaw与markRaw
Vue3 readonly
且听风吟的博客
05-05 2486
readonly 接收一个 ref 或者 reactive 包装对象，返回一个只读的响应式对象。
vue3.0 readonly
weixin_43294560的博客
07-25 3520
传入ref或reactive对象,并返回一个原始对象的只读代理,对象内部任何嵌套的属性也都是只读的。 传入普通对象等也返回只读代理 传入普通数值或字符串不能变成只读 使用: import {readonly } from 'vue' setup() { const xx=readonly(参数); } 代码示例: <template> <div> <img src="./logo.png"> <h1>Hello Vu
Vue 定义只读数据 readonly
xiaowude_boke的博客
11-22 704
Vue 定义只读数据 readonly
VUE3语法-(readonly的用法)将数据设置成只读模式
雾林小妖的博客
12-01 1499
vue中通过readonly设置数据只读
vue3中的readonly
qq_38677540的博客
12-13 1175
接受一个对象 (不论是响应式还是普通的) 或是一个，返回一个原值的只读代理。只读代理是深层的：对任何嵌套属性的访问都将是只读的。它的 ref 解包行为与reactive()相同，但解包得到的值是只读的。
Vue仿支付宝支付功能
12-29
先给大家上个效果图：   ... 确认支付 <span>{{password}}</span> ...input class=psd-input type=password readonly v-for=(value,index) in passwordGroup :key=index :value=value.valu
详解Vue 动态添加模板的几种方法
12-29
以下方法只适用于 Vue1.0 版本，推荐系数由高到低排列。 通常我们会在组件里的 template 属性定义模板，或者是在 *.vue 文件里的 template 标签里写模板。...input :value=value readonly /> <div
HTML中Select不用Disabled实现ReadOnly的效果
09-06
Disabled ReadOnly之家的联系
vue-store:具有内置undoredo功能的轻量级Vue 3 composition API兼容存储模式库
05-26
轻量级Vue 3组成API兼容的商店模式库。 提供了一个在功能方面与VueX相当的简单替代方案： 简单的API学习； 只有1个功能来创建商店 在本地和全局商店实例之间选择 公开状态为readonly以防止通过意外引用进行修改 ...
【Vue3源码】第三章 readonly详解 从零实现Vue3 readonly API
m0_68324632的博客
02-18 628
上一章节我们实现了effect函数的stop和onstop功能，至此effect函数源码的编写就暂时告一段落了，这一章我们继续解读Vue3源码，开始实现Vue3Reactivity：core 中的readonlyAPI，并且优化之前写的reactiveAPI。
一文讲清楚vue中的readonly、shallowReadonly、isReadonly
最新发布
m0_57202548的博客
01-18 902
在Vue 3中，readonly是一个用于创建只读响应式对象的函数。它可以应用于普通对象或响应式对象，将其转换为只读对象，这意味着不能对这个对象进行修改操作。这个函数返回一个代理对象，该代理对象与原始对象具有相同的结构，但所有的属性都变成了只读的。这样一来，任何尝试修改代理对象的操作都会触发警告，并且不会真正地修改原始对象。这是很有用的，它可以被传递给那些只需要读取数据而不需要修改的组件或函数。这样做有助于确保它们不会在意外的情况下修改数据。
vue3之readonly函数的使用(setup的使用)
weixin_47039303的博客
12-03 538
如果修改vue会提示(),只读,不可以修改 value cannot be made reactive: xxxx <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> {{msg}} </
一起学Vue3源码，实现最简Vue3【06】 - 实现 readonly 功能
Aybuai的博客
08-20 471
实现 readonly 功能
Vue3 之 readonly
喵
11-22 4706
Vue3 之 readonly readonly 官网的例子 取得一个对象（反应性或普通）或ref并返回一个只读代理。访问的任何嵌套属性也将是只读的。 传入普通对象等返回只读代理。 传入普通数值或字符串不能变成只读，例如 readonly(‘abc’) const original = reactive({ count: 0 }) const copy = readonly(original) watchEffect(() => { // 反应性跟踪 console.log(copy.
vue3中readonly和shallowReadonly
头条:俊哥前端工程师，真正的大师永远怀揣着一颗学徒的心。
11-25 782
· readonly: 深度只读数据 获取一个对象 (响应式或纯对象) 或 ref 并返回原始代理的只读代理。 只读代理是深层的：访问的任何嵌套 property 也是只读的。 · shallowReadonly 浅只读数据 创建一个代理，使其自身的 property 为只读，但不执行嵌套对象的深度只读转换
vue3store使用
07-29
Vue 3中的状态管理有一个新的特性叫做Vue 3 Composition API。您可以使用Composition API来创建和管理您的Vue 3应用程序中的状态。下面是一个简单的示例，演示了如何在Vue 3中使用Composition API来创建和使用一个简单的store： 首先，您需要创建一个新的JavaScript文件（例如store.js），并在其中导入Vue和createStore函数： ```javascript import { reactive, readonly } from 'vue'; // 创建一个可变的状态对象 const state = reactive({ count: 0, }); // 创建一个修改状态的方法 function increment() { state.count++; } // 导出一个只读的状态对象和修改状态的方法 export const store = readonly({ state, increment, }); ``` 然后，在您的Vue组件中导入并使用store： ```javascript <template> <div> <p>Count: {{ count }}</p> <button @click="increment">Increment</button> </div> </template> <script> import { store } from './store.js'; export default { computed: { count() { return store.state.count; }, }, methods: { increment() { store.increment(); }, }, }; </script> ``` 在上面的示例中，我们创建了一个可变的状态对象`state`，并将其包装在`reactive`函数中以实现响应式。然后，我们创建了一个`increment`方法来修改状态对象中的`count`属性。最后，我们通过`readonly`函数将状态对象和修改方法包装在一个只读的store对象中进行导出。 在Vue组件中，我们可以使用computed属性来获取状态对象中的属性值，并在方法中调用store对象中的修改方法来更新状态。这样，我们就可以在Vue 3应用程序中使用Composition API来创建和使用一个简单的store了。 请注意，上述示例只是一个简单的演示，您可以根据您的实际需求扩展和修改store对象和组件。希望对您有帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值