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>