읽기 전용 기능은 무엇이며 Vue3에서 기능을 사용하는 방법

Vue3의 읽기 전용 기능에 대한 자세한 설명

readonly는 Vue3에서 제공되는 새로운 기능으로 반응형 개체를 읽기 전용 개체로 바꾸는 데 사용됩니다. 읽기 전용을 사용하면 객체를 읽을 수만 있고 수정할 수는 없도록 보장하여 애플리케이션의 안정성과 보안을 향상시킬 수 있습니다. readonly是Vue3中提供的一个新特性，用于将一个响应式对象变成只读对象。使用readonly可以确保一个对象只能被读取而不能被修改，从而提高应用的稳定性和安全性。

在Vue3中，可以使用readonly函数将一个对象转换为只读对象，例如：

import { readonly } from 'vue'
const state = readonly({
  count: 0
})

在上面的代码中，state对象被转换为只读对象，这意味着state.count属性只能被读取，而不能被修改。

需要注意的是，readonly函数是递归的，也就是说，如果一个对象包含其他对象，那么这些对象也会被转换为只读对象。例如：

import { readonly } from 'vue'
const state = readonly({
  user: {
    name: 'John',
    age: 30
  }
})

在上面的代码中，user对象也被转换为只读对象，这意味着state.user.name和state.user.age属性都只能被读取，而不能被修改。

需要注意的是，readonly函数只能将一个对象转换为只读对象，而不能将一个数组或Map等其他类型的数据结构转换为只读对象。如果需要将这些数据结构转换为只读对象，可以使用readonly函数和deepReadonly函数的组合。例如：

import { readonly, deepReadonly } from 'vue'
const state = readonly({
  items: deepReadonly([
    { id: 1, name: 'item 1' },
    { id: 2, name: 'item 2' },
    { id: 3, name: 'item 3' }
  ])
})

在上面的代码中，items

Vue3에서는 readonly 함수를 사용하여 객체를 읽기 전용 객체로 변환할 수 있습니다. 예:

<template>
  <div>
    <img src="/static/imghw/default1.png"  data-src="./assets/logo.png"  class="lazy"  alt="Vue logo"  />
    <h2 id="vue-nbsp-beta">vue3.0 beta</h2>
    <h2 id="nbsp-original-count-nbsp-nbsp-nbsp-nbsp-copy-count-nbsp">{{ original.count }} ----- {{ copy.count }}</h2>
    <button @click="add">add</button>
  </div>
</template>
<script>
import { reactive, readonly, watchEffect } from "vue";
export default {
  setup() {
    const original = reactive({ count: 0 });
    const copy = readonly(original);
    watchEffect(() => {
      // 依赖追踪
      console.log(copy.count);
    });
    // original 上的修改会触发 copy 上的侦听
    original.count++;
    // 无法修改 copy 并会被警告
    copy.count++; // warning!
    return {
      original,
      copy
    };
  }
};
</script>

위 코드에서 state 객체 읽기 전용 개체로 변환됩니다. 즉, state.count 속성은 읽을 수만 있고 수정할 수는 없습니다.

readonly 함수는 재귀적이라는 점에 유의해야 합니다. 즉, 개체에 다른 개체가 포함되어 있으면 이러한 개체도 읽기 전용 개체로 변환됩니다. 예:

<template>
  <div>
    <img src="/static/imghw/default1.png"  data-src="./assets/logo.png"  class="lazy"  alt="Vue logo"  />
    <h2 id="vue-nbsp-beta">vue3.0 beta</h2>
    <h2 id="nbsp-refData-nbsp-nbsp-nbsp-nbsp-copy-nbsp">{{ refData }} ----- {{ copy }}</h2>
  </div>
</template>
<script>
import { ref, readonly } from "vue";
export default {
  setup() {
    const refData = ref(0);
    const copy = readonly(refData);
    // 无法修改 copy 并会被警告
   copy.value++; // warning!
    return {
      refData,
      copy
    };
  }
};
</script>

위 코드에서 user 개체도 읽기 전용 개체로 변환됩니다. 이는 state.user.name 및 state를 의미합니다. .user .age 속성은 읽기만 가능하고 수정할 수 없습니다.

readonly 함수는 객체를 읽기 전용 객체로 변환만 할 수 있고 배열이나 맵과 같은 다른 유형의 데이터 구조를 읽기 전용 객체로 변환할 수 없다는 점에 유의하세요. 이러한 데이터 구조를 읽기 전용 개체로 변환해야 하는 경우 readonly 함수와 deepReadonly 함수를 조합하여 사용할 수 있습니다. 예:

<template>
  <div>
    <img src="/static/imghw/default1.png"  data-src="./assets/logo.png"  class="lazy"  alt="Vue logo"  />
    <h2 id="vue-nbsp-beta">vue3.0 beta</h2>
    <h2 id="nbsp-original-count-nbsp-nbsp-nbsp-nbsp-copy-count-nbsp">{{ original.count }} ----- {{ copy.count }}</h2>
    <button @click="add">add</button>
  </div>
</template>
<script>
import { readonly, watchEffect } from "vue";
export default {
  setup() {
    const original = { count: 0 };
    const copy = readonly(original);
    watchEffect(() => {
      // 依赖追踪
      console.log(copy.count);
    });
    // original 上的修改会触发 copy 上的侦听
    original.count++;
    // 无法修改 copy 并会被警告
    copy.count++; // warning!
    const add = () => {
      copy.count++;
    };
    return {
      original,
      copy,
      add
    };
  }
};
</script>

위 코드에서 items 배열은 읽기 전용 배열로 변환되고, 그 안의 객체도 읽기 전용 객체로 변환됩니다. 객체는 읽기만 가능하고 수정할 수 없습니다.

보충: vue3의 읽기 전용 단방향 데이터 흐름 함수(읽기 전용 함수 사용에 대한 자세한 설명)

undefine

vue3의 읽기 전용 단방향 데이터 흐름 함수는 객체(반응형 또는 일반) 또는 ref를 전달합니다. 원본 객체의 읽기 전용 프록시를 반환합니다. 읽기 전용 프록시는 "깊은" 프록시이며 개체 내의 모든 중첩 속성도 읽기 전용입니다.

1. 참고:

1. 읽기 전용 기능은 ref 또는 반응형으로 정의된 데이터를 수정할 수 없습니다. 즉, 콘솔이 강제로 실행되는 경우에는 없습니다. 수정하면 오류 경고가 보고됩니다

두 번째, 반응형 및 읽기 전용

rrreee

복사가 읽기 전용이므로 "watchEffect" 함수가 두 번만 실행되는 것을 볼 수 있습니다.

3.ref 및 readonly

rrreee

다음과 같이 콘솔 프롬프트를 볼 수 있습니다.

"설정 작업 실패: 대상은 읽기 전용입니다."

🎜🎜🎜4. and readonly🎜rrreee🎜 ++에서 작동하기 위해 버튼을 계속 클릭하면 콘솔에 오류 메시지가 표시되고 데이터 소스가 응답하지 않기 때문에 인터페이스가 업데이트되지 않는 것을 볼 수 있습니다. 🎜🎜🎜🎜

위 내용은 읽기 전용 기능은 무엇이며 Vue3에서 기능을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!