Vue学习笔记-Vue3中的readonly和shallowReadonly

最新推荐文章于 2024-06-04 14:11:26 发布
最新推荐文章于 2024-06-04 14:11:26 发布
阅读量196 收藏
点赞数
分类专栏： Vue 文章标签： vue.js 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/theLuckyLong/article/details/134991340
版权

readonly

  • 导入：import {readonly} from 'vue'
  • 作用：让一个响应式数据变为只读的（深只读）
  • 用法： let data = readonly(data)

shallowReadonly

  • 导入：import {shallowReadonly} from 'vue'
  • 作用：让一个响应式数据变为只读的（浅只读）
  • 用法：let data = shallowReadonly(data)

[备注]：上述应用场景一般用在不希望响应式数据被修改时（例如，某个响应式数据来自于别的模块，而自己负责的模块只是需要读取使用，而不用修改）

theLuckyLong
关注
专栏目录
vue3笔记----记录自天禹老师的vue2+vue3全套教程（vue3部分）
weixin_55935744的博客
01-26 948
vue3笔记一、Vue3简介1、性能的提升2、源码的升级3、Vue3可以更好的支持TypeScript4、新的特性二、创建vue3工程1、使用vue-cli创建2、使用vite创建三、常用Composition API四、其他Composition API五、Composition API的优势六、新的组件七、其他 一、Vue3简介 1、性能的提升 打包大小减少了41% 初次渲染快55%，更新渲染快144% 内存减少54% … 2、源码的升级 使用Proxy代替defineProperty实现响应式
Vue3-readonly(深只读) 与 shallowReadonly（浅只读）
weixin_47957908的博客
11-19 845
- readonly(深只读)：具有响应式对象中所有的属性，其所有值都是只读且不可修改的。 - shallowReadonly(浅只读)：具有响应式对象的第一层属性值是只读且不可修改的，其他属性值不设为只读。
vue2和vue3自定义指令实现只读模式，禁止用户编辑
最新发布
weixin_43601701的博客
06-04 714
你在工作时，是否遇到产品要求添加只读模式，需要大片的配置项都需要只读，代码层级深，改动内容多，全加上disable费事费力，期望简单的实现只读本文实现了一个只读指令，只需要在需要的地方加上v-read-only即可达到只读效果，快捷方便当前代码已经在使用中，效果良好。
vue动态判断input readonly属性
热门推荐
每天学习一点点
12-10 2万+
1.如果isReadOnly等于true时，input只读，否则可以编辑 <input v-bind:readonly="isReadOnly">   2.如果TravelType等于1时，input只读，否则可以编辑 <input v-bind:readonly="TravelType==1" />  ...
Vue学习笔记-Vue3对响应式数据的判断
theLuckyLong的博客
12-15 163
【代码】Vue学习笔记-Vue3对响应式数据的判断。
Vue3 学习笔记 —— readonly 和 shallowReadonly
叹之
05-05 537
readonly 使用 readonly 函数包装过的对象，内部是深层次只读的 shallowReadonly 使用 shallowReadonly 函数包装过的对象，只有最外层属性是只读的，内层仍然可以改写 示例： <template> <button @click="change">改变</button> </template> <script lang="ts"> import { defineComponent, reado
Vue 学习笔记 -- 6. Vue3 快速上手
lingchen1120的博客
12-30 331
Vue 学习笔记 – 6. Vue3 快速上手 6. Vue3 快速上手 6.1 创建 Vue3 工程 6.1.1 使用 vue-cli 创建 官方文档 ## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上 vue --version vue -V ## 安装或者升级你的@vue/cli npm install -g @vue/cli ## 创建 vue create vue_test ## 启动 cd vue_test npm run serve 6.1.2 使用 vite 创建
Vue 3 学习笔记
qq_46735055的博客
05-23 3131
禹神最新Vue3教程学习笔记
尚硅谷vue3学习笔记
2302_77862232的博客
01-07 2341
setup`是`Vue3`中一个新的配置项，值是一个函数，它是 `Composition API` ，组件中所用到的：数据、方法、计算属性、监视......等等，均配置在`setup`中。特点如下：- `setup`函数返回的对象中的内容，可直接在模板中使用。- `setup`中访问`this`是`undefined`。- `setup`函数会在`beforeCreate`之前调用，它是“领先”所有钩子执行的。姓名：{{ name }}
Vue3学习笔记
qq_62476499的博客
07-23 1545
Vue3学习笔记
vue3.0学习笔记 (readonly深只读和shallowReadonly浅只读)
m0_58849641的博客
07-09 383
readonly全部没改变数据 这就是深只读 2.shallowReadonly浅只读 最后你会发现改变数据的只有workObj.nameObj.names这个数据 其他的没变 因为其他的在外层应用场景:不希望数据被修改的时候
Vue3 学习笔记--组合式 API
qq_42530623的博客
08-11 1249
组合式 API
Vue3学习笔记-masaikk
qq_45324648的博客
04-03 3051
Vue3学习笔记-masaikk 学习vue3及其相关组件的笔记。代码位于myvue: vue前端学习 (gitee.com)的vue3分支。笔记源文件位于masaikk/interviewAccess - 码云 - 开源中国 (gitee.com) vue项目基础 Vue-cli相关知识 vue-cli-service封装了webpack 例如demo1/node_modules/@vue/cli-service/package.json中，指定了bin所指向的二进制文件的位置。 { "bin"
学习笔记-Vue3基础
weixin_56658592的博客
08-05 191
vue3的 优点 最火框架 \ 性能提升 \ 体积更小 \ 类型推断 \ 高级给予 \ 组合API: 能够以更好的组织逻辑, 封装逻辑, 复用逻辑 项目出口文件 vue2 导入app组件,导入构造函数,使用Vue舒适化vue实例,使用render使用App组件,挂载#app容器下 基于Vue构造函数可以扩展vue功能 vue3 导入App组件,按需从vue导入createApp的函数,使用这个函数创建实例,挂载到#app容器中 基于创建好的App实例扩展功能 import { createApp }
Vue学习笔记-路由的基本使用
theLuckyLong的博客
11-30 1419
实现组件切换，在App.vue中编写如下内容(active-class类用于动态地为选中的标签添加样式)在src路径下创建router文件夹，并创建index.js文件，该文件用于配置路由规则。在main.js中导入vue-router模块，并且使用vue-router插件。vue2 要下载vue-router3。vue3 要下载vue-router4。指定展示切换的组件的位置。
Vue学习--插槽slot 自定义事件内容分发
theLuckyLong的博客
03-31 561
什么是插槽 在Vue.js中，使用<slot>元素，作为承载内容分发的出口`。即，在模板中开一个口，用于拼接其他模板。 案例 <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Slot</title> <script s
Vue学习笔记-配置代理服务器（用于解决跨域问题）
theLuckyLong的博客
11-16 461
跨域问题指的是在 Web 应用程序中，由于同源策略的限制，导致浏览器无法发送跨域请求，也无法获取跨域响应的问题。同源策略是浏览器的一种安全策略，它要求 Web 应用程序只能访问与当前页面具有相同协议、主机名和端口号的资源。如果不同源的 Web 应用程序需要通信，就需要进行跨域请求。但由于同源策略的限制，浏览器不允许跨域请求。在此情况下，如果前端需要访问其他域名下的资源，就会出现跨域问题。为解决跨域问题，可以由前端（或者后端）来进行相应配置。这里来介绍前端Vue项目配置代理服务器来解决跨域问题的方法。
Vue学习笔记-Vue3中ref和reactive函数的使用
theLuckyLong的博客
12-07 457
为了让vue3中的数据变成响应式，需要使用ref函数。
Vue学习笔记-Vue3中的shallowReactive和shallowRef
theLuckyLong的博客
12-14 410
reactive。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值