Vue 3.0 - provide/inject 학습

props와 차이점

• 직계 부모보다 더 상위의 부모로부터도 데이터를 주입을 받을 수 있다.
• 따라서 템플릿에 속성으로 데이터 전달을 명시하는 props와는 달리 provide/inject는 데이터 흐름을 직관적으로 알 수 없고, devtools 에서도 확인할 수 없다.

Vue.js 공식 가이드 문서에서는 아래와 같이 언급하고 있다.

provide와 inject는 주로 고급 플러그인/컴포넌트 라이브러리를 위해 제공됩니다. 일반 애플리케이션 코드에서는 사용하지 않는 것이 좋습니다.

사용을 자제해야 하는 이유

provide 키워드는 기본적으로 반응성을 제공할 수 없음 그렇기 때문에 provide는 데이터를 전달해서 출력하는 용도로만 사용하는 정도로만 사용.