vue 에서 watch 에서 대상 속성 변 화 를 감지 하지 못 하 는 해결 방법
vue 개발 과정 에서 문 제 를 발견 했다.vue.$data 에서 대상 의 속성 을 바 꾸 면 watch 는 변 화 를 관측 할 수 없 지만 대상 의 속성 은 변화 가 있다.이..믿 기지 가 않 아!
본문
<template>
<div>
<dl>name: {{option.name}}</dl>
<dl>age: {{option.age}}</dl>
<dl>
<button @click="updateAgeTo25">update age with 25</button>
</dl>
</div>
</template>
<script>
export default {
data () {
return {
option: {
name: "isaac",
age: 24
}
}
},
watch: {
option(val) {
console.log(val)
}
},
methods: {
updateAgeTo25() {
this.option.age = 25
}
}
}
</script>
결과 와 같이 option.age 는 업데이트 되 었 으 나 watch 의 option 함 수 는 트리거 되 지 않 았 습 니 다.
vue 의 watch 갈고리 가 그렇게 닭 갈비?안 믿 어.
심층 시계
...
watch: {
option: {
handler(newVal) {
console.log(newVal);
},
deep: true,
immediate: true
}
},
...
결과 와 같다.
또한,age 가 변 하지 않 기 전에 option 을 출력 하 는 것 을 발견 할 수 있 습 니 다.이것 은 immediate 속성 을 열 고 true 로 설정 하기 때 문 입 니 다.
이 반전 은 수사 가 시 작 된 후 즉시 호출 될 것 이다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 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에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
