- 直接上代码吧,里面的注释就解释上面两个属性,也可以直接将代码拷贝去实验
<template>
<button @click="rawPerson.age++">{{ rawPerson.age }}</button>
<button @click="rawNum.num++">{{ rawNum.num }}</button>
<!-- 这里有个奇怪现象 点击上面第一个按钮页面数据不会变因为是普通对象不具备响应式,
但是点击第二个因为是响应式数据会变并且第一次变的时候会将第一个按钮的数据也刷新成最新的,可能是与vue渲染有关 -->
<h2>{{ person.car }}</h2>
<button @click="addProp">增加person属性</button>
<button @click="addPrice">改变新增属性的值,记得先添加属性,不然报错</button>
</template>
<script>
import { reactive, ref, toRaw, markRaw } from 'vue';
export default {
name: 'toRef',
setup() {
let person = reactive({
name: "james",
age: 38,
salary: {
job: {
num: 11
},
}
});
let num = ref({ num: 0 });
console.log(person, num);
let rawPerson = toRaw(person);
let rawNum = toRaw(num);
function addProp() {
person.car = markRaw({ name: 'byd', price: 18 });
}
function addPrice(){
person.car.price++;
console.log(person.car.price);
}
return {
rawPerson,
rawNum,
rawNum,
person,
addProp,
addPrice
};
}
}
</script>
- toRaw
- 作用:将一个由reactive生成的响应式对象转换为普通对象
- 使用场景:用于读取响应式对象对应的普通对象,使其失去响应式
- markRaw
- 作用:标记一个对象,使其永远不会再成为响应式对象
- 应用场景:
- 有些值不适合设置成响应,如复杂的三方数据
- 数据量很大的列表,但是该列表不需要更改的数据,这样能跳过响应式转换提高性能