vue3 readonly

这是我参与11月更文挑战的第24天，活动详情查看：2021最后一次更文挑战

昨天在学习shallowAPI的时候遇到了一个问题：

修改shallowAPI定义的变量视图显示未改变，但是当同一个界面的其他reactive或ref定义的变量视图更新后用shallowAPI定义的变量的值也会跟着改变，其实是因为shallowAPI定义的变量在修改时里面的值已经修改了，只是在视图上没有更新，当其他响应式的变量的改变导致视图更新时，在同一个组件中的变量也会跟着刷新视图

readonly 与shallowReadonly

readonly:让一个响应式数据变为只读的（深只读）

shallowReadonly: 让一个响应式数据变为只读的（浅只读）

应用场景：不希望数据被修改时

示例：

readonly

<template>
  <h1>姓名：{{name}}</h1>
  <h1>年龄：{{age}}</h1>
  <h1>薪资：{{job.salary.value}}</h1>
  <button @click="name='sss'">修改name</button>
  <button @click="age++">age+1</button>
  <button @click="job.salary.value++">value++</button>
</template>

<script>
import {reactive ,readonly,shallowReadonly,toRefs} from 'vue'
export default {
  setup(){
    let a = reactive({
      name:'liudan',
      age:18,
      job:{
        salary:{
          value:70
        }
      }
    })
    a = readonly(a)
    return {
      ...toRefs(a)//将a变量解构
    }
  }
}

readonly是一个函数，他会接收一个响应式的数据，如上定义的a变量，将该变量加工一番后重新返回一个a，这个重新返回的a变量中的所有的东西都不允许修改，所以我们现在再点击上面的修改按钮 a变量也不会有任何改变（a变量中的数据也不会有改变，不止是视图没有更改），并且控制台会有警告，如下：

shallowReadonly

    a = shallowReadonly(a)    

shallowReadonly只限制对象中的第一层数据（不能改动，如：name，age），但是嵌套的深层次的salary,value属性值是可以更改的，我们点击更改按钮测试就能发现，只有name，age更改时控制台会报错，value值能改变：

以上数据只用reactive定义了变量，用ref定义的变量也是可以使用readonly和shallowReadonly的

应用场景：

比如，我们从别的组件接收了一个数据，但是该数据不希望被改动，这个时候我们就可以用上面的API