Vue 의 감청 방법 사례 상세 설명
watch
주의 하 다.
이름 은 어떤 속성 을 감청 하고 싶 으 면 그 와 같은 이름 을 지어 야 한다.
1.역할
vue 인 스 턴 스 의 데이터 변 화 를 감청 하 는 데 사용 합 니 다.
수시로 상태의 변 화 를 수정 할 수 있다.
2.트리거 조건
감청 의 속성 이 바 뀌 면 해당 감청 방법 이 자동 으로 호출 됩 니 다.
3.필드 사용
비동기 처리 에 사용 되 며,비용 이 비교적 큰 연산 이다.
4.예시
watch:{
name(newvalue,oldvalue){
// , ,
// this.age
// console.log('name ')
console.log(newvalue,oldvalue)
}
<script>
export default {
data() {
return {
obj: {
name: " ",
age: 20,
children: [
{
name: " ",
age: 27
},
{
name: " ",
age: 23
}
]
}
};
},
watch: {
obj: {
handler: function(newVal, oldVal) {
console.log("newVal:", newVal);
console.log("oldVal:", oldVal);
},
deep: true,
immediate: true
},
"obj.name": function(newVal, oldVal) {
console.log("newVal obj.name:", newVal);
console.log("oldVal obj.name:", oldVal);
}
},
};
</script>immediate 속성:불 값
immediate:true:처음 불 러 오 면 감청 데이터 변화
immediate:false:변경 이 있어 야 감청 합 니 다.
deep:true；
심층 감청 을 여 는 것 입 니 다.즉,모든 속성 에 감청 기 를 추가 하고 그 중 하나 가 바 뀌 면 handler 함 수 를 실행 합 니 다.
Vue 의 감청 방법 사례 에 대한 상세 한 설명 을 담 은 이 글 은 여기까지 입 니 다.더 많은 Vue 의 감청 방법 내용 은 저희 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 해 주시 기 바 랍 니 다.앞으로 많은 응원 부탁드립니다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue Render 함수로 DOM 노드 코드 인스턴스 만들기render에서createElement 함수를 사용하여 DOM 노드를 만드는 것은 직관적이지 않지만 일부 독립 구성 요소의 디자인에서 특수한 수요를 충족시킬 수 있습니다.간단한 렌더링 예는 다음과 같습니다. 또한 v...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
