shallowRef：浅层响应->整体重新赋新值才会触发更新，只改变单个属性不会触发更新
shallowReactive：浅层响应->第一层属性变化会触发更新，不是第一层属性不会触发更新
<template>
<div>
<h2>{
{ person }}</h2>
<button @click="change">改变</button>
</div>
</template>
<script setup>
import {
shallowRef,
ref,
shallowReactive
} from 'vue'
/* 浅层响应->整体重新赋新值才会触发更新
let person = shallowRef({
name: '青阳子',
age: 28,
job: {
j1: {
sex: 20,
},
},
})
const change = () => {
person.value.age = 30
// person.value = {
// age: 30,
// }
}
*/
// 浅层响应->第一层属性变化会触发更新
let person = shallowReactive({
name: '青阳子',
age: 28,
job: {
j1: {
sex: 20
}
}
})
const change = () => {
// person.age = 30
//person.name = 'lisi'
// person.job = {}
//person.job.j1 = {a:100}
person = {
age: 30,
}
}
</script>
<style scoped></style>
