Vue3:readonly与shallowReadonly以及toRaw与markRaw

2023-12-14 21:44:55

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>

文章来源:https://blog.csdn.net/weixin_50236973/article/details/135003711
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。