W250511/17.Vue3/project4/src/view/shallowReadonly.vue

<template>
  <div>
    <h1>shallowReadonly</h1>
    <h3>
        {{ obj.name }} -- {{ obj.age }}
    </h3>
    <h3>
        {{ obj1.name }} -- {{ obj1.age }}--{{ obj1.address.city }}
    </h3>
    <button @click="changeMain">修改</button>
  </div>
</template>

<script lang="ts" setup>
import {shallowReadonly,reactive} from "vue" 
let obj = reactive({
    name: '张三',
    age: 18,
    address:{
        city:"北京"
    }
})
let obj1 = shallowReadonly(obj);
const changeMain = () => {
    // Object.assign(obj1,{
    //     name: '李四',
    //     age: 20
    // })

    // obj1.name = '李四'
    // obj1.address = {
    //     city:"天津"
    // }
    obj1.address.city = '上海'
}
console.log(obj);
console.log(obj1)
</script>

<style lang="scss" scoped>
</style>