web250825/vue3/project6/src/shallowRef_shallowReactive.vue

<template>
  <div>
    <h1>shallowRef_shallowReactive</h1>
    <h3>Ref:{{ sum }}</h3>
    <h3>shallowRef:{{ sum1 }}</h3>
    <button @click="changeMain1">修改1</button>
    <button @click="changeMain2">修改2</button>
    <hr>
    <hr>
    <h3>Ref:我叫{{ person.name }}今年{{ person.age }}岁</h3>
    <button @click="changeMain3">修改姓名</button>
    <button @click="changeMain4">修改整体</button>
    <br><br>
    <h3>shallowRef:我叫{{ person1.name }}今年{{ person1.age }}岁</h3>
    <button @click="changeMain5">修改姓名</button>
    <button @click="changeMain6">修改整体</button>
    <hr>
    <hr>
    <h3>Reactive:我叫{{ person2.name }}今年{{ person2.age }}岁,我家在{{ person2.address.a1 }}有时候回去{{ person2.address.a2 }}泡澡</h3>
        
    <button  @click="changeMain7">修改姓名</button>
    <button @click="changeMain8">修改整体</button>
    <button @click="changeMain11">修改第一个地址</button>
    <button @click="changeMain13">修改整体地址</button>
    <hr>
    <hr>
    <hr>
    <h3>shallowReactive:我叫{{ person3.name }}今年{{ person3.age }}岁, 我家在{{ person3.address.a1 }}有时候回去{{ person3.address.a2 }}泡澡</h3>
    <button  @click="changeMain9">修改姓名</button>
    <button @click="changeMain10">修改整体</button>
    <button @click="changeMain12">修改第一个地址</button>
    <button @click="changeMain14">修改整体地址</button>
  </div>
</template>

<script lang="ts" setup>
import {ref,reactive, shallowRef, shallowReactive} from "vue" 
let sum = ref<number>(10);
let sum1 = shallowRef(20)
function changeMain1() {
    sum.value = 12
}
function changeMain2() {
    sum1.value = 22
}
let person = ref({
    name:"图图",
    age:3
})
function changeMain3() {
    person.value.name = '蜡笔小新'
}
function changeMain4() {
    person.value = {
        name:'喜羊羊',
        age:4,
    }
}
let person1 = shallowRef({
    name:'懒羊羊',
    age:3
})
function changeMain5() {
    person1.value.name = '蜡笔小新'
}
function changeMain6() {
    person1.value = {
        name:'喜羊羊',
        age:4
    }
}

let person2 = reactive({
    name:'懒羊羊',
    age:3,
    address:{
        a1:"青青草原",
        a2:"铁锅"
    }
})
let person3 = shallowReactive({
    name:'懒羊羊',
    age:3,
    address:{
        a1:"青青草原",
        a2:"铁锅"
    }
})
function changeMain7() {
    person2.name = '喜羊羊'
}
function changeMain8() {
    Object.assign(person2,{
        name:"蜡笔小新",
        age:3,
        address:{
            a1:'你好',
            a2:'haha'
        }
    })
}
function changeMain9() {
    person3.name = '喜羊羊'
}
function changeMain10() {
    Object.assign(person3,{
        name:"蜡笔小新",
        age:4,
        address:{
            a1:'你好',
            a2:'haha'
        }
    })
}
function changeMain11() {
    person2.address.a1 = 'aaa'
}
function changeMain12() {
    person3.address.a1 = 'aaa'
}
function changeMain13() {
    person2.address = {
        a1:'12',
        a2:'1222'
    }
}
function changeMain14() {
    person3.address = {
        a1:'12',
        a2:'1222'
    }
}
</script>

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