setup 함수내 문자열 관련 질문입니다.
아래 코드를 실행하고
Add Message1 버튼을 4번 클릭하고 Add Message 버튼을 클릭하면 {{ normalMessage }} 값은 !가 4개 붙은 값이 나옵니다. 그리고 Add Message2 버튼을 클릭하면 콘솔창에는 !가 한개 붙은 값이 나옵니다.
normalMessage 가 addNormalMesssage 함수 안에서 선언한 지역 변수도 아닌데 왜 값의 공유가 안 되는 건가요?
<template>
<h2>setup 함수내 반응형 메시지</h2>
<p>{{ reactiveMessage }}</p>
<button v-on:click="reactiveMessage += '!'">Add Message</button>
<h2>setup 함수내 일반 메시지</h2>
<p>{{ normalMessage }}</p>
<button v-on:click="normalMessage += '!'">Add Message1</button>
<button v-on:click="addNormalMesssage">Add Message2</button>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const reactiveMessage = ref('Hello Reactive Message');
let normalMessage = 'Hello Normal Message';
const addNormalMesssage = () => {
normalMessage = normalMessage + '!';
console.log(normalMessage);
};
return {
reactiveMessage,
normalMessage,
addNormalMesssage,
};
},
};
</script>回答 2
2
let num = 5;
let test = function () {
num++
console.log(num);
};
// a.num이 가리키는 주소와 num이 가리키는 주소는 다름
let a = { num: num, test: test };
a.num++
a.num++
a.num++
console.log(a) // {num: 8, test: test()}
a.test() // 6
console.log(num) // 6
a = (function () {
let normalMessage = 'Hello Normal Message';
// 클로저
const addNormalMesssage = () => {
normalMessage = normalMessage + '!';
console.log(normalMessage);
};
return {
normalMessage,
addNormalMesssage,
};
})();
console.log(a) // {normalMessage : "Hello Normal Message" , addNormalMessage : ƒ }
// normalMessage 프로퍼티 값을 변경
a.normalMessage = a.normalMessage + '!'
a.normalMessage = a.normalMessage + '!'
a.normalMessage = a.normalMessage + '!'
a.normalMessage = a.normalMessage + '!'
console.log(a.normalMessage) // Hello Normal Message!!!!
a.addNormalMesssage() // Hello Normal Message!
console.log(a) // {normalMessage : "Hello Normal Message!!!!" , addNormalMessage : ƒ }
0
안녕하세요.
값이 반응형으로 동작하기 위해서는 반응형 API(ref, reactive 등)을 사용해야 합니다.
어떻게 보면 당연한 결과 입니다. 자바스크립트 문법 특성상 프리미티브 타입의 normalMessage는 값이 계속 더해지는 것처럼 보이지만 값을 할당할 때마다 매번 새로운 메모리로 값이 할당되기 때문입니다.
반응형으로 동작하기 위해서는 Composition API - 반응형 API를 사용해야 한다는 것에 초점을 두시면 될 것 같고요.
만약 원론적으로 조금 더 궁금하시다면 자바스크립트 Call By Reference vs Call By Value 와 같은 것을 생각해보시면 도움이 되실 것 같습니다.
props로 함수를 전달했을 때의 질문입니다!
0
632
1
eslint 세팅 질문 드립니다.
0
1711
2
컴포넌트 이벤트 전파 관련 질문입니다
0
498
1
app-level의 provide한 값을 새로고침시 정상적으로 inject하지 못함.
1
526
1
this.$refs에 값이 들어가는 시점이 언제인가요?
0
830
1
npm run dev 설치중
0
617
2
reactive vs ref... 굳이 reactive를 사용하는 이유가 뭔가요?
1
1945
1
dummy api axios 호출시 cors 에러
0
534
1
19:17 emit 관련 질문
0
568
1
reactive로 선언한 반응형 객체 자체를 바꿨는데 watch 콜백함수가 실행이 안되요
0
568
1
자식 컴포넌트에 input 태그, checkbox 같은 form 태그가 없으면 v-model 안 쓰는건가요?
0
577
1
template내 자바스크립트 표현식 평가 시점은 언제인가요?
0
344
1
App.vue 물결 표시 제거 방법
0
374
1
v-if 질문입니다!
0
555
1
ref vs reactive vs shallowRef
0
652
1
script 태그는 컴포넌트를 처음 가져올때 한번만 실행된다는 게 잘 이해가 안됩니다
1
668
1
이벤트 핸들러로 왜 일반 함수로는 작동이 안 되나요? + console.log도 인식이 안되요
0
343
1
Vue3 Composition API - computed
0
458
1
v-on:click ="" 질문입니다
0
349
1
v-on:click="" 질문입니다
0
234
1
v-for에서 style을 사용하려 할 때
0
373
1
reactive와 computed 차이 질문
0
1108
1
emits사용 이유
1
449
1
eslint 오류표시 질문
0
500
1