vue3.0 readonly
传入ref或reactive对象,并返回一个原始对象的只读代理,对象内部任何嵌套的属性也都是只读的。传入普通对象等也返回只读代理传入普通数值或字符串不能变成只读使用:import {readonly } from 'vue'setup(){const xx=readonly(参数);}代码示例:<template><div><img src="./logo.png"&
·
传入ref或reactive对象,并返回一个原始对象的只读代理,对象内部任何嵌套的属性也都是只读的。
传入普通对象等也返回只读代理
传入普通数值或字符串不能变成只读
使用:
import {readonly } from 'vue'
setup()
{
const xx=readonly(参数);
}
代码示例:
<template>
<div>
<img src="./logo.png">
<h1>Hello Vue 3!</h1>
{{name}}{{obj.sex}}
<button @click="inc">Clicked {{ count }} times.</button>
</div>
</template>
<script>
import { ref,reactive,computed,readonly } from 'vue'
export default {
setup() {
let count = readonly(ref(0))
let name = ref('jeff')
const obj=reactive({sex:'male'})
const robj=readonly(obj);
let r=readonly('aa') //不具有只读的能力
const inc = () => {
count.value++;
robj.sex='tom'
r='vv';
console.log(r);
}
return {
count,
inc,
name, //在setup返回对象中自动解套
obj
}
}
}
</script>
<style scoped>
img {
width: 200px;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
}
</style>
更多推荐
已为社区贡献20条内容
所有评论(0)