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>
相关推荐
程序员韩立1 分钟前
现代全栈开发:Next.js与Node.js实战指南
前端·后端
航Hang*4 分钟前
WEBSTORM前端 —— 第2章:CSS —— 第2节:文字控制属性与CSS特性
前端·css·css3·html5·webstorm
小桥风满袖7 分钟前
Three.js-硬要自学系列18 (模型边界线、几何体顶点颜色、网格模型颜色渐变)
前端·css·three.js
JHC0000007 分钟前
DrissionPage 请求一次换一个代理(不重启chrome)
前端·chrome
David凉宸7 分钟前
视频融合 hls流如何对接
前端·音视频开发
萌萌哒草头将军8 分钟前
🚀🚀🚀 神了!RedwoodJS 轻松碾压 NextJS,成了我的最爱❤️
前端·react.js·全栈
CF14年老兵10 分钟前
当 JavaScript 遇上 Rust/Go:一场 “速度诱惑” 下的生态保卫战
前端·javascript·rust
David凉宸10 分钟前
vue手写日历
前端·javascript
itsOli16 分钟前
(25)性能优化和项目上线 | Vue.js 项目实战: 移动端“旅游网站”开发
前端·javascript·vue.js
梨啊梨b16 分钟前
使用CSS混合模式轻松实现Mp4视频透明背景
前端