readonly 讓一個響應式數據變為 **深層次的只讀數據**。

isReadonly 判斷一個數據是不是只讀數據。

應用場景：不希望數據被修改時使用。
?

?readonly 深層次只讀：

<template><h1>reactive數據</h1><p>姓名：{{ info.name }}</p><p>年齡：{{ info.age }}</p><button @click="editInfo">修改reactive數據</button><hr /><h1>readonly數據</h1><p>姓名：{{ readInfo.name }}</p><p>年齡：{{ readInfo.age }}</p><button @click="editReadInfo">修改readonly數據</button>
</template><script>
// 引入 readonly 與 reactive 函數
import { readonly, reactive } from 'vue'
export default {name: "Home",setup() {// 使用 reactive 創建數據const info = reactive({name: "張三",age: 20});// 使用 readonly 創建只讀數據const readInfo = readonly(info);// 修改 reactive 數據const editInfo = () => {info.name = "李四";info.age = 22;console.log(info);console.log(readInfo);}// 修改 readonly 數據（警告,不會被修改）const editReadInfo = () => {readInfo.name = "李四";readInfo.age = 22;console.log(info);console.log(readInfo);}// 返回數據return {info,readInfo,editInfo,editReadInfo}}
}
</script>

注：修改原數據時，只讀的數據也會發生改變。

注：修改只讀的數據時，會觸發警告提示數據不允許被修改。?

?

注：readonly 返回的數據是不允許被修改的，但是可以修改原來的數據。并且原來的數據發生改變時，readonly 返回的數據也會發生改變。

原創作者：吳小糖

創作時間：2023.11.22