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

<template>
  <div>
    <h1>shallowReactive</h1>
    <h3>reactive:{{ obj.name }} -- {{ obj.age }}</h3>
    <h3>shallowReactive:{{ obj1.name }} -- {{ obj1.age }}--{{ obj1.address.city }}--{{ obj1.address.area }}</h3>
    <button @click="changeObj">修改</button>
  </div>
</template>

<script lang="ts" setup>
import {ref,reactive,shallowReactive} from "vue" 
let obj = reactive({
    name: '孙悟空',
    age: 18
})
let obj1 = shallowReactive({
    name: '唐僧',
    age: 20,
    address:{
        city: '北京',
        area: '朝阳'
    }
})
function changeObj() {
    // Object.assign(obj1,{
    //     name: '猪八戒',
    //     age: 28
    // })
    // obj1.name = '猪八戒'
    // obj1.address = {
    //     city: '上海',
    //     area: '浦东'
    // }
    obj1.address.city = '上海'
}
console.log(obj,obj1);
</script>

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