Vue 인 스 턴 스 대상 기반 데이터 옵션
일반적으로 템 플 릿 내용 이 간단 할 때 data 옵션 을 사용 하여 표현 식 에 맞 추 면 됩 니 다.복잡 한 논리 와 관련 될 때 methods,computed,watch 등 방법 을 사용 해 야 한다.본 고 는 Vue 실례 대상 의 데이터 옵션 을 상세 하 게 소개 할 것 이다
data
data 는 Vue 인 스 턴 스 의 데이터 대상 입 니 다.Vue 는 data 의 속성 을 getter/setter 로 재 귀적 으로 변환 하여 data 속성 이 데이터 변화 에 응답 할 수 있 도록 합 니 다.
[주의]속성 에 화살표 함 수 를 사용 해 서 는 안 됩 니 다.
<div id="app">
{{ message }}
</div>
<script>
var values = {message: 'Hello Vue!'}
var vm = new Vue({
el: '#app',
data: values
})
console.log(vm);
</script>
Vue 인 스 턴 스 생 성 후
data
를 통 해 원본 데이터 대상 에 접근 할 수 있 습 니 다.
console.log(vm.$data);
Vue 인 스 턴 스 도 data 대상 의 모든 속성 을 대리 합 니 다.
<script>
var values = {message: 'Hello Vue!'}
var vm = new Vue({
el: '#app',
data: values
})
console.log(vm.$data === values);//true
console.log(vm.message);//'Hello Vue!'
console.log(vm.$data.message);//'Hello Vue!'
</script>
프 록 시 속성 은 응답 합 니 다.즉,값 의 모든 변 화 는 보 기 를 다시 렌 더 링 하 는 것 입 니 다.속성 설정 도 원본 데이터 에 영향 을 미 칠 수 있 으 며,반대로 도 마찬가지 입 니 다.그러나
vm.$data
또는_
로 시작 하 는 속성 은 Vue 인 스 턴 스 에 의 해 대리 되 지 않 습 니 다.Vue 에 내 장 된 속성 이나 방법 과 충돌 할 수 있 기 때 문 입 니 다.예 를 들 어$
방식 으로 이 속성 에 접근 할 수 있 습 니 다.
<script>
var values = {
message: 'Hello Vue!',
_name: ' '
}
var vm = new Vue({
el: '#app',
data: values
})
console.log(vm._name);//undefined
console.log(vm.$data._name);//' '
</script>
computed계산 속성 함수 computed 는 Vue 인 스 턴 스 에 혼 입 됩 니 다.모든 getter 와 setter 의 this 컨 텍스트 는 Vue 인 스 턴 스 로 자동 으로 연 결 됩 니 다.
[주의]화살표 함 수 를 사용 하여 속성 함 수 를 정의 해 서 는 안 됩 니 다.
다음은 computed 에 관 한 예 입 니 다.
<div id="example">
<p> : "{{ message }}"</p>
<p> : "{{ reversedMessage }}"</p>
</div>
<script>
var vm = new Vue({
el: '#example',
data: {
message: ' '
},
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})
</script>
결 과 는 다음 과 같다.여기에 계산 속성
vm.$data._property
을 설명 했다.제 공 된 함 수 는 속성reversedMessage
의 getter 로 사 용 됩 니 다.
console.log(vm.reversedMessage) // -> ' '
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // -> 'eybdooG'
결 과 는 다음 그림 에서 보 듯 이 vm.reversedMessage 는 vm.message 의 값 에 의존 하고 vm.reversedMessage 자체 가 할당 되 지 않 습 니 다.【setter】
계산 속성 은 기본적으로 getter 만 있 지만 필요 할 때 setter 를 제공 할 수 있 습 니 다.
<script>
var vm = new Vue({
data: { a: 1 },
computed: {
// ,
aDouble: function () {
return this.a * 2
},
//
aPlus: {
get: function () {
return this.a + 1
},
set: function (v) {
this.a = v - 1
}
}
}
})
console.log(vm.aPlus);//2
vm.aPlus = 3
console.log(vm.a);//2
console.log(vm.aDouble);//4
</script>
methods표현 식 의 methods 를 호출 하면 같은 효 과 를 얻 을 수 있 습 니 다.
[주의]화살표 함수 로 methods 함 수 를 정의 해 서 는 안 됩 니 다.
<div id="example">
<p> : "{{ message }}"</p>
<p> : "{{ reversedMessage() }}"</p>
</div>
<script>
var vm = new Vue({
el: '#example',
data: {
message: ' '
},
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})
</script>
[캐 시]최종 결과 에 대해 서 는 두 가지 방식 이 확실히 같다.
그러나 계산 속성 은 그들의 의존 을 바탕 으로 캐 시 를 하 는 것 이 다르다.계산 속성 은 관련 의존 이 바 뀔 때 만 값 을 다시 구 할 수 있 습 니 다.이 는 message 가 변경 되 지 않 았 다 면 reversedMessage 계산 속성 을 여러 번 방문 하면 이전 계산 결 과 를 즉시 되 돌려 주 고 함 수 를 다시 실행 하지 않 아 도 된다 는 뜻 이다.
비교 해 보면,다시 렌 더 링 이 발생 하면,method 호출 은 항상 이 함 수 를 실행 합 니 다.아래 와 같다
<div id="example">
<p> : "{{ time1 }}"</p>
<p>methods : "{{ time2() }}"</p>
</div>
<script>
var vm = new Vue({
el: '#example',
computed:{
time1: function () {
return (new Date()).toLocaleTimeString()
}
},
methods: {
time2: function () {
return (new Date()).toLocaleTimeString()
}
}
})
</script>
만약 에 개성 이 비교적 큰 계산 속성 A 를 쓸 수 있다 고 가정 하면 아주 큰 배열 을 옮 겨 다 니 고 대량의 계산 을 해 야 한다.다른 계산 속성 이 A 에 의존 할 수 있 습 니 다.캐 시가 없 으 면 A 의 getter 를 여러 번 실행 할 수 밖 에 없습니다!캐 시 를 원 하지 않 으 면 method 로 대체 합 니 다.
watch
Vue 는 Vue 인 스 턴 스 의 데이터 변동 을 관찰 하고 응답 하 는 일반적인 방식 을 제공 합 니 다:watch 속성.watch 속성 은 대상 입 니 다.키 는 관찰 해 야 할 표현 식 입 니 다.값 은 리 셋 함수 에 대응 하고 리 셋 함수 가 얻 은 매개 변 수 는 새 값 과 오래된 값 입 니 다.값 도 방법 명 이나 옵션 을 포함 하 는 대상 일 수 있 습 니 다.Vue 인 스 턴 스 는 워 치 대상 의 모든 속성 을 예화 할 때 호출 됩 니 다
vm.reversedMessage
.[주의]화살표 함수 로 watch 함 수 를 정의 해 서 는 안 됩 니 다.
<div id="app">
<button @click="a++">a 1</button>
<p>{{ message }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
a: 1,
message:''
},
watch: {
a: function (val, oldVal) {
this.message = 'a ' + oldVal + ', ' + val;
}
}
})
</script>
위의 코드 에서 a 의 값 이 변 할 때 watch 의 모니터링 을 통 해 message 가 해당 하 는 내용 을 출력 합 니 다.【$watch】
데이터 옵션 의 watch 방법 을 사용 하 는 것 외 에 도 인 스 턴 스 대상 의$watch 방법 을 사용 할 수 있 습 니 다.이 방법의 반환 값 은 관찰 함 수 를 취소 하고 리 셋 을 중단 하 는 데 사 용 됩 니 다.
<div id="app">
<button @click="a++">a 1</button>
<p>{{ message }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
a: 1,
message:''
}
})
var unwatch = vm.$watch('a',function(val, oldVal){
if(val === 10){
unwatch();
}
this.message = 'a ' + oldVal + ', ' + val;
})
</script>
위의 코드 에서 a 의 값 이 10 으로 업데이트 되면 unwatch()를 터치 하여 관찰 을 취소 합 니 다.단 추 를 눌 렀 을 때,a 의 값 은 여전히 변 하지만,watch 의 반전 함 수 는 더 이상 터치 하지 않 습 니 다이상 의 Vue 인 스 턴 스 대상 을 기반 으로 한 데이터 옵션 은 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 께 참고 가 되 고 저희 도 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.