vue3_readonly和shallowReadonly

readonly,深度只读数据,对象的所有不能被修改

shallowReadonly,潜只读,对象只有第一层不能修改,其他可以修改

<template>
    <h2>readonly和shallowReadonly</h2>
    <h3>state:{{state2}}</h3>
    <hr>
    <button @click="update">更新数据</button>
</template>

<script >
import { reactive, defineComponent, readonly, shallowReadonly } from 'vue'
export default defineComponent({
    name: 'App',
    setup() {
        const state = reactive({
            name: '吴彦祖',
            age: 20,
            car: {
                name: 'bmw',
                color: 'yellow'
            }
        })

        // readonly,深度只读数据,对象的所有不能被修改
        // const state2 = readonly(state)
        // shallowReadonly,潜只读,对象只有第一层不能修改,其他可以修改
        const state2 = shallowReadonly(state)
        const update = () => {
            state2.name += '='
            state2.car.name += '='
        }

        return { state2, update }
    }
})
</script>