ref와 computed의 차이를 잘 모르겠어요
안녕하세요.
이번 강의 실습하다가 수업 내용처럼 preview가 업데이트 안되길래 원인을 찾다보니 아래 부분이 문제였는데요.
// 강사님 코드
const url = computed(() => `/posts/${props.id}`);
const { error, loading, data: post } = useAxios(url);// 제 코드
const url = ref(`/posts/${props.id}`);
const { error, loading, data: post } = useAxios(url);지금까지 진행하고 너무 기초적인 질문인 것 같긴한데 computed는 반응형으로 동작하고 ref는 동작하지 않는 이유를 잘 모르겠습니다.
답변 1
2
안녕하세요 🙂
props.id 가 외부에서 변경되었을때
// 강사님 코드
const url = computed(() => `/posts/${props.id}`);
const { error, loading, data: post } = useAxios(url);위 코드는 computed로 url을 선언하였기 때문에 props.id 의 변화에 반응하여 url값은 변경(다시 계산)됩니다.
하지만
// 제 코드
const url = ref(`/posts/${props.id}`);
const { error, loading, data: post } = useAxios(url);위 코드는 단순히 초기값을 할당한 것이기 때문에 props.id 의 값에 url값은 변경(다시 계산)되지 않습니다.
위 설명을 듣고 이해가 어렵다면 computed 학습을 다시한번 살펴보시는 것을 권장드립니다. 💪
질문드립니다.
0
29
0
unplugin-vue-components 질문드립니다.
0
32
2
강의듣다가 헷갈려서 질문드립니다.
0
28
1
와 짐코딩님 강의 들으면서 느끼는게 많네요.
0
27
1
질문드립니다.
0
28
2
라우터 인스톨 후 실행안됨
1
47
2
코드 자동 포매팅 질문
0
67
2
필터 watchEffect 질문입니다.
0
50
1
json-server 오류가 다른게 뜨네요
0
111
1
미리보기가 안됩니당...
0
68
2
unplugin-vue-components
0
79
2
TypeError 질문
0
49
1
v-model="show" :show="show" 같이 사용?
1
53
1
hash 모드 배포의 필요성?
0
59
2
.eslintrc.cjs 가 없습니다
0
95
2
title,content값이 비어서 저장되는데 제가 혹시 어떤 부분을 잘못 작성했는지 ㅜㅜ 알고싶습니다.
0
97
3
_title_like: "", 문의드려요 해당 값을 설정하면 list가 아에 안나옵니다.
0
63
1
@click.prevent="params._page = pageNum"> 에 .value를 안쓰는 이유가 궁금합니다.
0
69
2
중첩된 컴포넌트 문제
0
74
2
교안에 있는 부분이 아닌가요?
0
109
2
useAxios Proxy(Object) RefImpl
0
113
1
axios timeout
0
324
3
강의와 상관은 없지만, 궁금한 점이 있어 질문드립니다.
0
121
2
컴포넌트 분리 부분에서 오류가 나요ㅠㅠ
0
167
2