vue3.0学习笔记 (readonly深只读和shallowReadonly浅只读)

许你满眼星辰

于 2022-07-09 12:08:05 发布

阅读量420

点赞数 1

文章标签： vue3.0

本文链接：https://blog.youkuaiyun.com/m0_58849641/article/details/125691754

版权

本文详细介绍了Vue3.0中`readonly`和`shallowReadonly`的用法。`readonly`确保了数据的全面深只读，不允许任何修改；而`shallowReadonly`则允许修改外层数据，仅对对象的顶层属性进行只读保护。这两种特性在防止数据意外修改的场景中非常有用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.readonly深只读 (全部深只读不具备改的能力)

<template>
  <p>姓名:{
  { workObj.nameObj.names }}</p>

  <p>职业:{
  { workObj.work }}</p>

  <p>工资:{
  { workObj.wage }}</p>

  <button @click="changeClick">点击改变数据</button>
</template>

<script>
import { reactive, readonly} from "vue";

export default {

  setup() {
    //相当于vue2.0中的data  ref准备进行响应式
    let workObj = reactive({
      work: "前端工程师",
      wage: "30K",
      nameObj: { names: "张三" },
    });

    //点击改变数据的方法
    function changeClick() {
      workObj.work = "UI设计师";
      workObj.wage = "8K";
      workObj.nameObj.names = "李四";
    }

    //readonly深只读   重新赋值
    workObj = readonly(workObj);

    //最后return出去
    return {
      workObj,
      changeClick,
    };
  },
};
</script>