Vue3 readonly,shallowReadonly,isReadonly,isProxy,toRaw,markRaw

た入场券 2022-10-05 11:48 143阅读 0赞

**isProxy：用于检查一个对象是否由reactive或者readonly(shallowReadonly)方法创建的代理**

**readonly：用于创建一个只读的数据，并且是递归只读，无论多少层都是只读**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NzIxMTY4MDQ_size_16_color_FFFFFF_t_70][]

**shallowReadonly：用于创建一个只读的数据，但是不是递归只读，只有第一层只读**

![20210608220648612.png][]

<template>
    <div>
        <p>{
       {state.name}}</p>
        <p>{
       {state.attr.age}}</p>
         <p>{
       {state.attr.height}}</p>
    </div>
      <button @click="fn">点击</button>
    
    </template>
    <script>
    import { readonly,shallowReadonly,isReadonly } from 'vue'
    export default {
      setup() {
        //readonly:用于创建一个只读的数据，并且是递归只读，无论多少层都是只读
        // let state = readonly({
        //     name:'du',
        //     attr:{age:18,height:1.80}
        // })
        //shallowReadonly:用于创建一个只读的数据，但是不是递归只读，只有第一层只读
        let state = shallowReadonly({
            name:'du',
            attr:{age:18,height:1.80}
        })
        // const与readonly的区别：
        /*
        const:赋值保护，不能给变量重新赋值
        readonly：属性保护，不能给属性重新赋值
        */
        const fn =()=>{
            state.name="anij"
            state.attr.age=20
            state.attr.height=2.0
            console.log(state)
            console.log(isReadonly(state))// true 判断是否是只读的
            console.log(isProxy(state)) //true 判断是否是否由reactive或者readonly方法创建的代理
        }
        return{
            state,
            fn
        }
      },
    
    }
    </script>
    
    <style module lang="scss">
         
    </style>

**toRaw:把reactive生成的响应式对象变成普通对象 （场景：用于读取响应式对象对应的普通对象，并且操作不会引起页面更新）**

**markRaw：标记一个对象使其永远不会成为响应式对象 （场景：有些值不应该是响应式的）**

import {
      toRaw
    } from "vue";
    
    export default {
      setup() {
        let person = reactive({
            name:'du'
        })
          const showraw = ()=>{
              const person2 = toRaw(person)
              console.log(person2) // name: "du" Obj
          }
          const addCar = ()=>{
            let car = {name:'奔驰',price:'40w'}
            //person.car = car; //往定义的响应式数据上面，追加数据(期初定义的响应式数据上面是没有这个属性的 不过需要重新rerun一下person)
            person.car = markRaw(car) //不是响应式数据
            console.log(person)
          }
        return {
          showraw,
          addCar
        };
      },
    };

![20210822212831192.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NzIxMTY4MDQ_size_16_color_FFFFFF_t_70]: /images/20221005/5d0078c9751b447d8e03c7da3de731b3.png
[20210608220648612.png]: /images/20221005/5f3ca1e0915643099b7b4e1ff70f28bc.png
[20210822212831192.png]: /images/20221005/7f9af59e16084c7791acee3fcd305e23.png