vue3.0 readonly

传入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>