vue3的readonly、shallowReadonly、shallowReactive、shallowRef

Vue中新出现了很多方法，平时大多数时候用不上，但是特殊的情景下有奇效

readonly()

语法：readonly(响应式数据)

作用：将响应式数据变成只读的数据（深只读）

深只读：对象或者数组数据，全部都变成只读

使用场景：其他组件传递过来的信息，只希望展示或者使用，不希望修改（别人给你数据，只让你用，不让你改）

<template>
  <div>
     <button @click="change">按钮</button>
     <div>{{ obj.age }}</div>
  </div>
</template>

<script setup lang="ts">
import { reactive,readonly } from 'vue'

let obj =reactive({
  name: '张三',
  age: 18
})
obj = readonly(obj)
// 点击改变数据
const change = () => {
  // newAge.age.value++,
  obj.age++
  console.log(obj)
}
</script>           

结果：

shallowReadonly()

语法：shallowReadonly(响应式数据)

作用：将响应式数据变成只读的数据（浅只读）

浅只读：对象或者数组数据，只有第一层数据 变成只读

使用场景：其他组件传递过来的信息，第一层数据只希望展示或者使用，不希望修改（别人给你数据，只有第一层不让改，其他层数据不受影响）

<template>
  <div>
     <button @click="change">按钮</button>
     <div>浅层数据:{{ obj.age }}</div>
     <div>深层数据:{{ obj.data.data1.data2.abc }}</div>
  </div>
</template>

<script setup lang="ts">
import { reactive,shallowReadonly } from 'vue'

let obj =reactive({
  name: '张三',
  age: 18,
  data: {
    data1: {
      data2: {
        abc:0
      }
    }
  }
})

obj = shallowReadonly(obj)
// 点击改变数据
const change = () => {
  obj.age++
  obj.data.data1.data2.abc++
  console.log(obj.age)
  console.log(obj.data.data1.data2.abc)
}
</script>           

结果：

shallowReactive()

对象数据中的，浅层和深层数据都要做处理时，一定要慎用！！！

定义的数据，只有第一层是响应式的，深层数据不是响应式数据

<template>
  <div>
     <button @click="change">按钮</button>
     <hr>
     <button @click="obj.age++">浅层数据按钮</button>
     <div>浅层数据:{{ obj.age }}</div>
     <button @click="obj.data.data1.data2.abc++">深层数据按钮</button>
     <div>深层数据:{{ obj.data.data1.data2.abc }}</div>
  </div>
</template>

<script setup lang="ts">
import { shallowReactive } from 'vue'

const obj = shallowReactive({
  name: '张三',
  age: 0,
  data: {
    data1: {
      data2: {
        abc:0
      }
    }
  }
})

// 点击改变数据
const change = () => {
  console.log(obj.age)
  console.log(obj.data.data1.data2.abc)
  console.log('====================')
}
</script>           

结果：

想要的是只有第一层数据是响应式的，深层数据都不改变的效果，（用shallowReactive方法的现象是，只改变深层数据页面不变，但是深层和浅层数据一起改变时，浅层数据会影响深层数据）

shallowRef()

shallowRef定义的是基本数据，数据是响应式数据；定义是的对象，数据不是响应式数据

<template>
  <div>
     <button @click="change">按钮</button>
     <hr>
     <button @click="obj.age++">浅层数据按钮</button>
     <div>浅层数据:{{ obj.age }}</div>
     <button @click="obj.data.data1.data2.abc++">深层数据按钮</button>
     <div>深层数据:{{ obj.data.data1.data2.abc }}</div>
  </div>
</template>

<script setup lang="ts">
import { shallowRef } from 'vue'

const obj = shallowRef({
  name: '张三',
  age: 0,
  data: {
    data1: {
      data2: {
        abc:0
      }
    }
  }
})

// 点击改变数据
const change = () => {
  console.log(obj)
  console.log('====================')
}
</script>           

结果：