Vue 定义只读数据 readonly

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