Vue readonly()简介

readonly() 

说明： 接受一个对象 (不论是响应式还是普通的) 或是一个 ref，返回一个原值的只读代理。

细节：它是深层的。即不管原值是多少子节点、孙节点，都是只读。

用途：保护某些数据不让它意外的被修改。

示例：

const original = reactive({ count: 0 }) 

// 常量copy是只读的，original值发生变化时，copy也会变化。
const copy = readonly(original) // 常量：original 我们称为原值。

watchEffect(() => {
  // 用来做响应性追踪
  console.log(copy.count)
})

// 更改源属性会触发其依赖的侦听器
original.count++

// 更改该只读副本将会失败，并会得到一个警告
copy.count++ // warning!

 

注意：readonly()返回的对象是否响应视图，与他接收到参数有关。接收响应式参数时，返回的是响应式对象，示例：

<template>
    {{ab}}
</template>

<script setup>
    import {
        ref,
        readonly
    } from 'vue'

    const counter = ref(2)
    const ab = readonly(counter) // 接收响应式的参数时，它返回的也是响应式，会更新到视图
    
    setTimeout(() => {
        counter.value = 44 
        console.log(ab.value);
    }, 5000)
</script>