readonly

Read-only agents that get an object (reactive or pure) or ref and return the original agent cannot reassign the property. A read-only proxy is recursive: any nested property accessed is also read-only.

<template>
  <div>
    <div ref="state">{{ state.name }}</div>
    <div ref="state">{{ state.attr.age }}</div>
    <div ref="state">{{ state.attr.height }}</div>
    <button @click="handelClick">button</button>
  </div>
</template>

<script>
import { readonly } from "vue";
export default {
  setup() {
    let state = readonly({ name: "Shanzhu".attr: { age: 18.height: 1.88}});// Reactive ({value:null})
    function handelClick() {
      state.name = "Sessheng pill";
      state.attr.age = 19;
      state.attr.height = 1.99;
      console.log(state);
    }
    return{ state, handelClick }; }};</script>

Copy the code

The effect, there is no change

shallowReadonly

Makes its own property read-only, but does not perform deep read-only conversions of nested objects (exposing raw values).

isReadonly

Check whether the object is a read-only proxy created by ReadOnly.