App.vuetemplate div classapp h2求和为{{ sum }}/h2 h2名字为{{ person.name }}/h2 h2年龄为{{ person.age }}/h2 h2骑车为{{ car }}/h2 button clickchangeSumsum1/button button clickchangeName修改名字/button button clickchangeAge修改年龄/button button clickchangePerson修改整个人/button span||/span button clickchangeBrand修改品牌/button button clickchangeColor修改颜色/button button clickchangeEngine修改发动机/button button clickchangeCar修改整个车/button /div /template script setup langts nameApp /* shallowRef, shallowReactive 创建浅层次响应式数据 */ import { ref, reactive, shallowRef, shallowReactive } from vue; let sum ref(0); let person shallowRef({ name: zhangsan, age: 18, }); let car shallowReactive({ brand: 奔驰, options: { color: 黑色, engine: V8, }, }); function changeSum() { sum.value 1; } function changeName() { person.value.name lisi; } function changeAge() { person.value.age 20; } function changePerson() { person.value { name: wangwu, age: 30, }; } function changeBrand() { car.brand 宝马; } function changeColor() { car.options.color 白色; } function changeEngine() { car.options.engine V6; } function changeCar() { Object.assign(car, { brand: 奥迪, options: { color: 红色, engine: V8, }, }); } /script style scoped .app { color: red; background-color: #ddd; border-radius: 10px; box-shadow: 0 0 10px; padding: 10px; } /style