readonly: 让一个响应式数据变为只读的(深只读)。
shallowReadonly:让一个响应式数据变为只读的(浅只读)。
应用场景: 不希望数据被修改时。
<template>
<h4>当前求和为:{{sum}}</h4>
<button @click="sum++">点我++</button>
<hr>
<h2>姓名:{{name}}</h2>
<h2>年龄:{{age}}</h2>
<h2>薪资:{{job.j1.salary}}K</h2>
<button @click="name+='~'">修改姓名</button>
<button @click="age++">增长年龄</button>
<button @click="job.j1.salary++">涨薪</button>
</template>
import {ref,reactive,toRefs} from 'vue'
export default {
name: 'Demo',
setup(){
//数据
let sum = ref(0)
let person = reactive({
name:'张三',
age:18,
job:{
j1:{
salary:20
}
}
})
//返回一个对象(常用)
return {
sum,
...toRefs(person)
}
}
}
目前实现了响应式
readonly:但是你不允许改数据,reactivity.esm-bundler.js?89dc:4 [Vue warn] Set operation on key "name" failed: target is readonly. Proxy(Object) {name: '张三', age: 18, job: {…}}
import {ref,reactive,toRefs,readonly,shallowReadonly} from 'vue'
export default {
name: 'Demo',
setup(){
//数据
let sum = ref(0)
let person = reactive({
name:'张三',
age:18,
job:{
j1:{
salary:20
}
}
})
person = readonly(person)//覆盖了原先的响应式数据
//返回一个对象(常用)
return {
sum,
...toRefs(person)
}
}
}
shallowReadonly:当前层不可以改,深层的可以
import {ref,reactive,toRefs,readonly,shallowReadonly} from 'vue'
export default {
name: 'Demo',
setup(){
//数据
let sum = ref(0)
let person = reactive({
name:'张三',
age:18,
job:{
j1:{
salary:20
}
}
})
person = shallowReadonly(person)
//返回一个对象(常用)
return {
sum,
...toRefs(person)
}
}
}
也可以对基本类型数据操作
sum = readonly(sum)
sum = shallowReadonly(sum)//没必要 基本类型数据就是浅层的
应用场景: 不希望数据被修改时,接收别人传染给你的数据