Vue readonly()简介
readonly()
说明: 接受一个对象 (不论是响应式还是普通的) 或是一个 ref,返回一个原值的只读代理。
细节:它是深层的。即不管原值是多少子节点、孙节点,都是只读。
用途:保护某些数据不让它意外的被修改。
示例:
const original = reactive({ count: 0 })
// 常量copy是只读的,original值发生变化时,copy也会变化。 const copy = readonly(original) // 常量:original 我们称为原值。 watchEffect(() => { // 用来做响应性追踪 console.log(copy.count) }) // 更改源属性会触发其依赖的侦听器 original.count++ // 更改该只读副本将会失败,并会得到一个警告 copy.count++ // warning!
注意:readonly()返回的对象是否响应视图,与他接收到参数有关。接收响应式参数时,返回的是响应式对象,示例:
<template> {{ab}} </template> <script setup> import { ref, readonly } from 'vue' const counter = ref(2) const ab = readonly(counter) // 接收响应式的参数时,它返回的也是响应式,会更新到视图 setTimeout(() => { counter.value = 44 console.log(ab.value); }, 5000) </script>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 百万级群聊的设计实践
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期