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>
相关推荐
腾讯TNTWeb前端团队7 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰10 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪10 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪10 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy11 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom12 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom12 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom12 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom12 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom12 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试