目录
159.readonly与shallowReadonly
- readonly: 让一个响应式数据变为只读的(深只读)。
- shallowReadonly:让一个响应式数据变为只读的(浅只读)。
- 应用场景: 不希望数据被修改时。
<template>
<h4>当前求和为:{
{sum}}</h4>
<button @click="sum++">点我++</button>
<hr>
<h2>姓名: {
{name}}</h2>
<h2>年龄: {
{age}}</h2>
<h2>薪水: {
{job.j1.salary}}k</h2>
<button @click="name+='~'">修改姓名</button>
<button @click="age++">年龄增长</button>
<button @click="job.j1.salary++">涨薪</button>
</template>
<script>
import { reactive, readonly, ref, shallowReadonly, toRefs } from '@vue/reactivity'
export default {
name: 'Demo',
setup(){
// 数据
let sum = ref(0)
let person =reactive({
name:'张三',
age:18,
job:{
j1:{
salary:20
}
}
})
// person = readonly(person)
person = shallowReadonly(person)
sum = readonly(sum)
// 返回一个对象(常用)
return{
sum,
...toRefs(person)
}
}
}
</script>
160.toRaw与markRaw
- toRaw:
- 作用:将一个由
reactive
生成的响应式对象转为普通对象。 - 使用场景:用于读取响应式对象对应的普通对象,对这个普通对象的所有操作,不会引起页面更新。
- 作用:将一个由
- markRaw:
- 作用:标记一个对象,使其永远不会再成为响应式对象。(数据可以改,页面不变化)
- 应用场景:
- 有些值不应被设置为响应式的,例如复杂的第三方类库等。
- 当渲染具有不可变数据源的大列表时,跳过响应式转换可以提高性能。
<template>
<h4>当前求和为:{
{sum}}</h4>
<button @click="sum++">点我++</button>
<hr>
<h2>姓名: {
{name}}</h2>
<h2>年龄: {
{age}}</h2>
<h2>薪水: {
{job.j1.salary}}k</h2>
<h3>座驾信息:{
{car}}</h3>
<button @click="name+='~'">修改姓名</button>
<button @click="age++">年龄增长</button>
<button @click="job.j1.salary++">涨薪</button>
<button @click="showRawPerson">输出最原始的person</button>
<button @click="addCar">给人添加一辆车</button>
<button @click="car.name+='!'">换车名</button>
<button @click="changePrice">换价格</button>
</template>
<script>
import { markRaw, reactive, ref, toRaw, toRefs } from '@vue/reactivity'
export default {
name: 'Demo',
setup(){
// 数据
let sum = ref(0)
let person =reactive({
name:'张三',
age:18,
job:{
j1:{
salary:20
}
},
car:{}
})
function showRawPerson(){
const p = toRaw(person)
console.log(p);
}
function addCar(){
let car =