给reactive对象重新赋值失去响应式的处理方案-vue3

首先用reactive定义一个响应式对象

<script lang="ts" setup name="Person">
import {  reactive } from 'vue'

// 数据
let car = reactive({ brand: '奔驰', price: 100 })


</script>

修改对象，如获取到接口数据后给对象赋值
错误写法1–car由原来的reactive对象变成普通对象了

function changeCar() {
  car = {brand:'奥拓',price:1} //这么写页面不更新的

}

错误写法2–虽然还是reactive对象，但这是一个全新的对象，已经不是当初的那个car了

function changeCar() {
  car = reactive({brand:'奥拓',price:1}) //这么写页面不更新的

}

正确写法1–给响应式对象里面的属性赋值

function changeCar() {
// 页面正常跟新，但是如果对象里面的属性特别多就不太适合
car.brand ='奥拓'
car.price = 1
}

正确写法2-用 Object.assign把原来的属性覆盖， Object.assign详解

function changeCar() {
  Object.assign(car, { brand: '奥拓', price: 1 })
}