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>           

結果：