Vue3：readonly与shallowReadonly以及toRaw与markRaw

本文主要是介绍Vue3：readonly与shallowReadonly以及toRaw与markRaw，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

readonly与shallowReadonly

readonly与shallowReadonly
1. readonly：让一个响应式数据变为只读的（深只读）
2. shallowReadonly：让一个响应式数据变为只读的（浅只读）
3. 应用场景：不希望数据被修改时具体案例代码如下：
<template><div>{{ sum }}</div><button @click="sum++">sum按钮</button><div>{{ name }}</div><button @click="name += '~'">按钮name</button><div>{{ job.j1.salary }}</div><button @click="job.j1.salary++">按钮salary</button>
</template><script>
import { reactive, ref, toRefs, shallowReadonly } from 'vue'export default {name: 'DemoComponent',setup() {let sum = ref(0);let person = reactive({name: '张三',job: {j1: {salary: 20}}})// 深只读，对象层次深也能检测不能改变数据// person = readonly(person);// 浅只读，只能控制第一层person = shallowReadonly(person);return {sum,...toRefs(person),}}
}
</script>

toRaw与markRaw

toRaw:
1. 作用：将一个由reactive（不能是ref）生成的响应式对象转为普通对象
2. 使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新markRaw(性能优化用得更多)：
1. 作用：标记一个对象，使其永远不会再成为响应式对象
2. 应用场景：当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能具体案例代码如下：
<template><div>{{ sum }}</div><button @click="sum++">sum按钮</button><div>{{ name }}</div><button @click="name += '~'">按钮name</button><div>{{ job.j1.salary }}</div><button @click="job.j1.salary++">按钮salary</button><button @click="showRawPerson">输出最原始的对象person</button><button @click="addCar">给人添加一个车</button><div v-if="person.car">{{ person.car }}</div><div v-if="person.car">{{ person.car.price }}</div><button @click="person.car.price++">price按钮</button>
</template><script>
import { reactive, ref, toRefs, markRaw } from 'vue'export default {name: 'DemoComponent',setup() {let sum = ref(0);let person = reactive({name: '张三',job: {j1: {salary: 20}}})function showRawPerson() {// // 将person响应式数据转换成原始的对象// const p = toRaw(person)// console.log(p);// 不行，toRaw只能处理reactive而不能处理ref// const s = toRaw(sum)// console.log(s);}function addCar() {// // 这样写，person的car也会变成响应式数据，因为reactive的Proxy处理了。// let car = {name: '奔驰', price: '40W'}// person.car = car;// 这样写，经过markRaw操作后就不会变成响应式数据let car = {name: '奔驰', price: 40}person.car = markRaw(car);}return {sum,showRawPerson,addCar,person,...toRefs(person),}}
}
</script>

这篇关于Vue3：readonly与shallowReadonly以及toRaw与markRaw的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---