Vue3.0学习 - 第十一节，readonly递归只读数据，isReadonly判断只读数据，shallowReadonly非递归只读数据

柔情只为你懂 2023-01-18 05:29 17阅读 0赞

有的的时候我们需要创建一个只读的数据，vue3也提供了api  **readonly**递归只读数据，**isReadonly**判断只读数据，**shallowReadonly**非递归只读数据

**readonly:**

<template>
      <div>
        <p>{
       { state.name }}</p>
        <p>{
       { state.attr.age }}</p>
        <p>{
       { state.attr.height }}</p>
    
        <button @click="fn">click</button>
      </div>
    </template>
    
    <script>
    import { readonly, isReadonly, shallowReadonly } from "vue";
    
    export default {
      setup() {
        //   readonly:用于创建一个只读的数据，并且是递归只读
        let state = readonly({name:"我是你爸",attr:{age:18,height:1.88}})
        function fn() {
          state.name = "张二毛";
          state.attr.age = 888;
          state.attr.height = 1.66;
          console.log("ssttststa", state);
        }
        return { state, fn };
      },
      methods: {},
    };
    </script>

点击click：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70][]

我们可以看到点击按钮重新赋值，数据没有发生变化，**readonly:用于创建一个只读的数据，并且是递归只读**

如果我们只想第一层只读，可以使用**shallowReadonly**

<template>
      <div>
        <p>{
       { state.name }}</p>
        <p>{
       { state.attr.age }}</p>
        <p>{
       { state.attr.height }}</p>
    
        <button @click="fn">click</button>
      </div>
    </template>
    
    <script>
    import { readonly, isReadonly, shallowReadonly } from "vue";
    
    export default {
      setup() {
        let state = shallowReadonly({
          name: "我是你爸",
          attr: { age: 18, height: 1.88 },
        });
        // shallowReadonly: 用于创建一个只读的数据，但是不是递归只读
     
        function fn() {
          state.name = "张二毛";
          state.attr.age = 888;
          state.attr.height = 1.66;
          console.log("ssttststa", state);
        }
        return { state, fn };
      },
      methods: {},
    };
    </script>

点击按钮：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 1][]

我们班可以看到第一层数据没有发生变化，第二层数据发生变化了

**shallowReadonly: 用于创建一个只读的数据，但是不是递归只读**

**isReadonly：用来判断数据是否是只读数据**

function fn() {
          state.name = "张二毛";
          state.attr.age = 888;
          state.attr.height = 1.66;
          //   value = 456;
          //   console.log(value);
          console.log("state1", isReadonly(state1));
          console.log("state", isReadonly(state));
    
        }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 2][]

我们之前可以使用const 创建只读数据：

const value = 123;
        function fn() {
          state.name = "张二毛";
          state.attr.age = 888;
          state.attr.height = 1.66;
            value = 456;
            console.log(value);
          console.log("state1", isReadonly(state1));
          console.log("state", isReadonly(state));
    
        }

点击按钮：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 3][]

点击按钮直接报错，因为const不能直接修改

我们把const创建一个对象：

const value = { name: "123", age: 666 };
        function fn() {
          value.name = "儿子";
          value.age = 456;
          console.log(value);
          
        }

点击按钮：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 4][]

我们可以看到数据发生变化

> **const和readonly区别：**
> 
> ** const:赋值保护，不能给变量重新赋值**
> 
> ** readonly:属性保护，不能给属性重新赋值**

### **总结：** ###

*  ### **readonly:用于创建一个只读的数据，并且是递归只读** ###
 *  ### **shallowReadonly: 用于创建一个只读的数据，但是不是递归只读** ###
 *  ### **isReadonly：判断数据是否是只读数据** ###

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70]: /images/20221021/07070c6e565e468d9364952edf414a10.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 1]: /images/20221021/ef58bb8c26434913980ff826f8a106cd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 2]: /images/20221021/a3c18912ce5147f0ac6c8aaf35116fe8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 3]: /images/20221021/b222a702efd849c380ad0513624c97eb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 4]: /images/20221021/cb6489d1c8ed43cea808aa8b7cf378b5.png