📚 Reference

• 공식 문서 1

📜 Chapter

shallowRef()

triggerRef()

• triggerRef()
• shallowRef에 종속된 반응형 효과(effects)를 강제로 실행하도록 만드는 함수이다. 이는 주로 shallowRef의 내부 값이 깊게 변경되었을 때 사용된다.

역할

• shallowRef는 .value 자체가 새로운 값으로 대체될 때만 변경을 감지하고 반응한다.
• shallowRef의 .value가 객체일 때, 그 객체의 내부 속성을 변경하는 것은 감지하지 못한다.
• triggerRef는 감지하지 못한 변경 사항에 대해 Vue에게 "이 shallowRef가 바뀌었으니, 이 ref에 의존하는 모든 곳(예: watchEffect, 컴포넌트 렌더링)을 업데이트해야 한다"고 수동으로 알려주는 역할을 한다.

예시

• 예시 1

import { shallowRef, watchEffect, triggerRef } from 'vue';

const shallow = shallowRef({ greet: 'Hello, world' });

watchEffect(() => {
  // shallow.value에 의존하는 효과
  console.log(shallow.value.greet);
}); // 실행 시 "Hello, world" 출력

// 1. 내부 값 깊게 변경
shallow.value.greet = 'Hello, universe'; 
// shallowRef는 내부 변경을 감지하지 못하므로, watchEffect가 다시 실행되지 않음.

// 2. triggerRef로 강제 업데이트
triggerRef(shallow); 
// watchEffect가 강제로 다시 실행되어 "Hello, universe" 출력