Vue3 readonly()

readonly()函数的作用是接收一个对象，其可以是普通对象，也可以是响应式对象，然后返回接收对象的只读代理对象。

通俗地讲，即如果想要一个对象是只读的，就使用readonly()函数。

 

<template>
	<span>
		<p>{{obj}}</p>
		<p>{{newobj}}</p>
	</span>
</template>

<script setup>
    import {reactive, readonly} from "vue"

    var obj = reactive({num: 10})
    var newobj = readonly(obj)
	console.log(obj.num)
	console.log(newobj.num)
	obj.num++
	newobj.num++ // 控制台会报警告(Set operation on key "num" failed: target is readonly)且不会生效
	console.log(obj.num)
	console.log(newobj.num)

</script>