首页 > 其他分享 >vue3——readonly 与 shallowReadonly

vue3——readonly 与 shallowReadonly

时间:2022-09-05 11:57:41浏览次数:68  
标签:shallowReadonly 只读 person readonly vue3 数据

  • readonly: 让一个响应式数据变为只读的(深只读)。

  • shallowReadonly:让一个响应式数据变为只读的(浅只读,只读第一层)。

  • isReadonly:判断一个数据是不是只读数据
  • 应用场景: 不希望数据被修改时,或者用到的数据是从外部传进的。

代码演示:

 

readonly:

上述代码中,先引入readonly,在界面中person中的数据全部都没有响应效果,因为readonly为只读

 

shallowReadonly:

上述代码中,先引入shallowReadonly,在界面中person中的数据只有第一层有响应效果

 

标签:shallowReadonly,只读,person,readonly,vue3,数据
From: https://www.cnblogs.com/MDRY/p/16657586.html

相关文章

  • vue3——shallowReactive 与 shallowRef
    shallowReactive:只处理对象最外层属性的响应式(浅响应式)。shallowRef:只处理基本数据类型的响应式,不进行对象的响应式处理。什么时候使用?如果有一个对象数据,结......
  • vue3——toRef
    一.ref与toRef的区别:ref:复制,修改响应式数据不会影响原始数据toRef引用,修改响应式数据会影响原始数据ref:数据发生改变,界面会自动更新toRef:数据发生改变,界面也不会自......
  • vue3项目-小兔鲜儿笔记-商品详情页01
    1.基础布局完成商品详情基础布局,路由配置,搭好页面架子  2.渲染面包屑编写一个钩子函数useGoods.js,将面包屑获取数据的逻辑抽取出来。//拿到商品信息import{......
  • vue3——hook函数
    什么是hook?——本质是一个函数,把setup函数中使用的CompositionAPI进行了封装。类似于vue2.x中的mixin。自定义hook的优势:复用代码,让setup中的逻辑更清楚易懂......
  • vue3——生命周期
    vue2.x的生命周期:  Vue3.0中可以继续使用Vue2.x中的生命周期钩子,但有有两个被更名:beforeDestroy改名为beforeUnmountdestroyed改名为unmountedVue3.0也提......
  • vue3——watchEffect函数
    watch的套路是:既要指明监视的属性,也要指明监视的回调。watchEffect的套路是:不用指明监视哪个属性,监视的回调中用到哪个属性,那就监视哪个属性watchEffect有点像comp......
  • vue3.0富文本编辑器vue-quill-editor
    1、安装npminstall@vueup/vue-quill@alpha--save2、引入main.js中全局引入import{QuillEditor}from'@vueup/vue-quill'import'@vueup/vue-quill/dist/vue......
  • vue3——计算属性与监视
    一.computed函数与Vue2.x中computed配置功能一致写法: 以上是两种写法:第一种简写形式:如果在显示界面更改了fullname,会有警告:计算属性不能更改,因为简写的形式是只读的......
  • vue3 基础-组件间传值及校验
    本篇讲基于对页面组件化拆分后,组件之间如何进行数据传递,通常是父组件如何给子组件进行传值,子组件接收并进行数据校验后再使用.父子组件传值<!DOCTYPEhtml><html......
  • Element Plus 在 vue3 中使用
    特殊情况下,解决方案:1、el-tree实现收缩的关键字:expanded【组件内部处理的树形数据格式中的关键字】定义树形组件:<el-treeref="treeRef">...</el-tree>获取组件......