1.readonly 深度只读数据 - 获取一个对象 (响应式或纯对象) 或 ref 并返回原始代理的只读代理。 - 只读代理是深层的：访问的任何嵌套 property 也是只读的。

2.shallowReadonly - 浅只读数据 - 创建一个代理，使其自身的 property 为只读，但不执行嵌套对象的深度只读转换

应用场景: 在某些特定情况下, 我们可能不希望对数据进行更新的操作, 那就可以包装生成一个只读代理对象来读取数据, 而不能修改或删除。

实例：

<template>
    <h2>App</h2>
    <h3>m1: {{m}}</h3>

    <button @click="update">更新</button>
</template>

<script lang="ts">
    import {reactive, ref, shallowReactive, shallowRef, readonly, shallowReadonly} from 'vue'

    export default {
        setup() {
            const m1 = reactive({name: 'zhangsan', age: 20, car: {brand: 'BMW'}})
            //深度只读
            //const m = readonly(m1);
            //浅只读
            const m = shallowReadonly(m1);
            const update = () => {
                //m.name = 'lisi'; //error,readonly;
                //m.car.brand = 'TOYOTA';
                m.car.brand = 'TOYTOTA';
            }
            return {
                m1,
                m,
                update,
            }
        }
    }
</script>