傑森前端

理解

把響應式的數據不讓人修改差別在於

shallowReadonly只有限制複雜型數據物件第一層屬性不能修改

<script >
import { shallowReadonly, readonly, ref, reactive } from "vue"
export default {
  setup() {
    // 不能修改
    let sum = readonly(ref(0))
    // 只有第一層不能改
    let person = shallowReadonly(reactive({
      name: 'jason',
      job: {
        salary: 100 //只有這個能改
      }
    }))
    function changePerson() {
      person.name = 'jack'
      person.job.salary = 90
    }
    return {
      sum,
      person,
      changePerson
    }
  }
}
</script>

<template>
  {{ sum }}
  <br />
  {{ person }}
  <button @click="sum++">++</button>
  <button @click="changePerson">changePerson</button>
</template>

使用場景

接別人的數據時做個限制，感覺比較安全。