甜品店网站开发背景,长春做网站,高端大气的科技网站,自助快速建站readonly 让一个响应式数据变为 **深层次的只读数据**。
isReadonly 判断一个数据是不是只读数据。
应用场景#xff1a;不希望数据被修改时使用。 readonly 深层次只读#xff1a;
templateh1reactive数据/h1p姓名#xff1a;{{ info…readonly 让一个响应式数据变为 **深层次的只读数据**。
isReadonly 判断一个数据是不是只读数据。
应用场景不希望数据被修改时使用。 readonly 深层次只读
templateh1reactive数据/h1p姓名{{ info.name }}/pp年龄{{ info.age }}/pbutton clickeditInfo修改reactive数据/buttonhr /h1readonly数据/h1p姓名{{ readInfo.name }}/pp年龄{{ readInfo.age }}/pbutton clickeditReadInfo修改readonly数据/button
/templatescript
// 引入 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
