Vue 의 감청 방법 사례 상세 설명

vue 의 감청 방법
watch
주의 하 다.
이름 은 어떤 속성 을 감청 하고 싶 으 면 그 와 같은 이름 을 지어 야 한다.
1.역할
vue 인 스 턴 스 의 데이터 변 화 를 감청 하 는 데 사용 합 니 다.
수시로 상태의 변 화 를 수정 할 수 있다.
2.트리거 조건
감청 의 속성 이 바 뀌 면 해당 감청 방법 이 자동 으로 호출 됩 니 다.
3.필드 사용
비동기 처리 에 사용 되 며,비용 이 비교적 큰 연산 이다.
4.예시

	 watch:{
             name(newvalue,oldvalue){
                  //            ,           ,          
                    // this.age
                    // console.log('name       ')
                    console.log(newvalue,oldvalue)
                }

5.감청 대상 시

<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>

감청 대상 은 deep:true 를 넣 어야 밑바닥 에 깊이 들 어가 실시 간 으로 감청 할 수 있 고 추가 하지 않 으 면 대상 은 감청 에 변화 가 없다.
immediate 속성:불 값
immediate:true:처음 불 러 오 면 감청 데이터 변화
immediate:false:변경 이 있어 야 감청 합 니 다.
deep:true；
심층 감청 을 여 는 것 입 니 다.즉,모든 속성 에 감청 기 를 추가 하고 그 중 하나 가 바 뀌 면 handler 함 수 를 실행 합 니 다.
Vue 의 감청 방법 사례 에 대한 상세 한 설명 을 담 은 이 글 은 여기까지 입 니 다.더 많은 Vue 의 감청 방법 내용 은 저희 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 해 주시 기 바 랍 니 다.앞으로 많은 응원 부탁드립니다!