Computed
<div id="hello">
<p> 역순 : "{{reverseHello}}"</p?
var vm = new Vue({
el : '#hello'
data: {
hello: 'HEOLL'
},
coumputed: {
reverseHello() {
return this.hello.split('').reverse().join('') // LLOEH
}
}
})
hello 가 변경되지 않는 한 reverseHello를 여러번 요청해도 계산이 다시 되지 않고 계산 되어 있던 결과를 즉시 반환한다
cf) function
computed는 해당 속성이 변경될때만 함수가 실행된다.
언제 computed 사용?
- 캐싱을 원하는 경우 사용
- computed의 set, get속성
computed: {
fullName: {
get:function() {
return this.firstName+''+this.secondName
},
set:function() {
let name=newValue.splite('')
this.firstName = names[0]
this.lastName = name[names.length-1]
}
}
}
watch
-
옵션
deep: true - Objects 내부의 중첩된 값 변경 감지
immediate: true - 표현식의 현재 값으로 즉시 콜백 호출
-
첫번째 콜백할때 호출함
-
만약, 콜백대신에 unwatch 함수를 먼저 호출하고 싶으면
watch: { value: { handle(newVal) { this.doSomething() } immediate: true } }
-
'Vue.js > vue2' 카테고리의 다른 글
[vue2] 뷰 라이프 사이클 다이어그램 (0) | 2020.09.30 |
---|---|
[vue2] 인스턴스 (0) | 2020.09.30 |
[vue2] 용어 및 기본 개념 (0) | 2020.09.30 |
[vue2] vue 규칙 (0) | 2020.09.30 |