<template>
<h2>姓名:{
{ name }}</h2>
<h2>年龄:{
{ age }}</h2>
<h2>薪资:{
{ job.j1.salary }}K</h2>
<h2 v-show="person.car">座驾信息:{
{ person.car }}</h2>
<hr>
<button @click="showRawPerson">输出最原始的person</button>
<button @click="addCar">给人添加一台车</button>
<button @click="person.car.name+='!'" v-show="person.car">换车名</button>
<button @click="changePrice" v-show="person.car">换价格</button>
</template>
<script>
import {
reactive, toRefs, toRaw, markRaw} from 'vue'
export default {
name: 'App',
setup() {
let person = reactive({
name: '张三',
age: 18,
job: {
j1: {
salary: 20
}
}
})
//展示原始的person
function showRawPerson() {
const p = toRaw(person) //p为普通对象
p.age++
console.log(p)
}
//给person添加car对象,标记这个car对象,使其永远不会再成为响应式对象
function addCar() {
let car = {
name: '奔驰', price: 40}
person.car = markRaw(car)
}
//改变车的价格,数据更改了,但是没有响应式
function changePrice() {
person.car.price++
console.log(person.car.price)
}
return {
person,
...toRefs(person),
showRawPerson,
addCar,
changePrice
}
}
}
</script>
VUE3-toRaw函数与markRaw函数(16)
猜你喜欢
转载自blog.csdn.net/gty204625782/article/details/123454792
今日推荐
周排行