계산된 속성
기본 예제 템플릿에서 사용하는 표현식은 편리하지만 단순한 연산만 해야합니다.
<div id ="example" >
{{ message.split('').reverse().join('') }}
</div >
이렇게 복잡한 로직은 계산된 속성을 사용해야 합니다.
<div id ="example" >
<p > 원본 메시지: "{{ message }}"</p >
<p > 뒤집히도록 계산된 메시지: "{{ reversedMessage }}"</p >
</div >
var vm = new Vue({
el : '#example' ,
data : {
message : '안녕하세요'
},
computed : {
reversedMessage: function (
return this .message.split('' ).reverse().join('' )
}
}
})
이렇게요
reversedMessage 를 우리는 computed에서 선언했습니다.
vm.reversedMessage 는 getter 메세지로 반환된다.
계산된 캐싱 vs 메소드 <p > 뒤집힌 메시지: "{{ reverseMessage() }}"</p >
methods: {
reverseMessage : function (
return this .message.split('' ).reverse().join('' )
}
}
표현식에서 메소드를 호출하면 계산된 결과와 같은걸 알 수 있습니다.
계산된 속성은 종속성에 따라 캐시가 된다.
message가 변경되지 않는 한, reverseMessage는 바로 반환됩니다.
computed: {
now : function (
return Date .now()
}
}
이것도 Date.now가 변경되지 않으니 바로 반환됩니다.
캐싱이 왜 필요하냐면, 많은 연산을 하게되면, 서버에 무리가 가기 때문에 캐싱을 하는게 좋다.
계산된 속성 vs 감시된 속성 Vue 인스턴스는 속성을 감시하는게 가능하다.(데이터가 변경될때)
<div id ="demo" > {{ fullName }}</div >
var vm = new Vue({
el : '#demo' ,
data : {
firstName : 'Foo' ,
lastName : 'Bar' ,
fullName : 'Foo Bar'
},
watch : {
firstName : function (val )
this .fullName = val + ' ' + this .lastName
},
lastName : function (val )
this .fullName = this .firstName + ' ' + val
}
}
})
firstName의 값이 변경될 때 마다
firstName : function (val )
this .fullName = val + ' ' + this .lastName
},
val 파라매터로 값을 받고, this .fullName = val + ' ' + this .lastName
이걸 실행한다.
var vm = new Vue({
el : '#demo' ,
data : {
firstName : 'Foo' ,
lastName : 'Bar'
},
computed : {
fullName : function (
return this .firstName + ' ' + this .lastName
}
}
})
위 코드와 위 코드는 비슷합니다.
계산된 속성이 더 좋은거 같습니다.
계산된 Setter computed: {
fullName : {
get: function (
return this .firstName + ' ' + this .lastName
},
set: function (newValue )
var names = newValue.split(' ' )
this .firstName = names[0 ]
this .lastName = names[names.length - 1 ]
}
}
}
computed는 getterd와 setter를 만들어줄 수 있습니다.
감시자 대부분 계산된 속성이 필요하지만. 감시자가 더 좋을 때가 있습니다.
<div id ="watch-example" >
<p >
yes/no 질문을 물어보세요:
<input v-model ="question" >
</p >
<p > {{ answer }}</p >
</div >
에제입니다.
<script src ="https://unpkg.com/axios@0.12.0/dist/axios.min.js" > </script >
<script src ="https://unpkg.com/lodash@4.13.1/lodash.min.js" > </script >
<script >
var watchExampleVM = new Vue({
el : '#watch-example' ,
data : {
question : '' ,
answer : '질문을 하기 전까지는 대답할 수 없습니다.'
},
watch : {
question: function (newQuestion )
this .answer = '입력을 기다리는 중...'
this .getAnswer()
}
},
methods : {
getAnswer: _.debounce(
function (
if (this .question.indexOf('?' ) === -1 ) {
this .answer = '질문에는 일반적으로 물음표가 포함 됩니다. ;-)'
return
}
this .answer = '생각중...'
var vm = this
axios.get('https://yesno.wtf/api' )
.then(function (response )
vm.answer = _.capitalize(response.data.answer)
})
.catch(function (error )
vm.answer = '에러! API 요청에 오류가 있습니다. ' + error
})
},
500
)
}
})
</script >
이 예제는 question을 감시하고 methods에서 getAnswer을 실행해줍니다.
watch는 비동기 연산을 합니다.
