标签：shallowReadonly sum j1 --- person readonly

readonly函数

•  readonly 接收收一个对象或一个响应式对象
•  readonly 返回的对象的代理，该对象的属性是只读的(深层)

<template>
  <div>当前求和为 {{sum}}</div>
  <div>{{name}} --- {{age}} --- {{job.j1.salary}}</div>
  <div>
    <button @click="name+='~'">改名</button>
    <button @click="age++">增加年龄</button>
    <button @click="job.j1.salary+=10">增加工资</button>
  </div>
</template>

<script>
import {reactive, ref, toRefs, readonly, } from 'vue'
export default {
  setup() {
    let person = reactive({
      name: '张三',
      age: 18,
      job: {
        j1: {
          salary: 3000
        }
      }
    })
    person = readonly(person) // 现在person里面的所有属性都是只读的
    let sum = ref(0)
    return {
      sum,
      ...toRefs(person)
    }
  }
}
</script>

shallowReadonly函数

<template>
  <div>当前求和为 {{sum}}</div>
  <div>{{name}} --- {{age}} --- {{job.j1.salary}}</div>
  <div>
    <button @click="name+='~'">改名</button>
    <button @click="age++">增加年龄</button>
    <button @click="job.j1.salary+=10">增加工资</button>
  </div>
</template>

<script>
import {reactive, ref, toRefs, shallowReadonly} from 'vue'
export default {
  setup() {
    let person = reactive({
      name: '张三',
      age: 18,
      job: {
        j1: {
          salary: 3000
        }
      }
    })
    person = shallowReadonly(person) // 现在person对象里面的第一层属性是只读的
    let sum = ref(0)
    return {
      sum,
      ...toRefs(person)
    }
  }
}
</script>

•  shallowReadonly 返回的对象，仅第一层的属性是只读的

标签：shallowReadonly,sum,j1,---,person,readonly
来源： https://www.cnblogs.com/xiebenyin-/p/15857541.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。