Vue watch의 속성

 

immediate

watch는 속성의 값이 변할때마다 실행되지만,
변경과 관계없이 처음 실행해야 하는 경우가 있다.

watch: {
    myData(value) {

    }
},

페이지가 처음 로드될때 watch로 바라보는 값이 기본값으로 설정된다.
이때는 속성이 변경이 되지 않아 watch는 실행이 되지않는다.

immediate: true로 설정하고 핸들러 함수를 아래처럼 옮긴다.

watch: {
    myData: {
        immediate: true,
        handler(value) {
            // ...
        }
    }
},

 

deep

const array = [1, 2, 3, 4];
array.push(5);
array.push(6);
array.push(7);
// array = [1, 2, 3, 4, 5, 6, 7]

위와 같이 배열을 업데이트 해줬지만 watch에서는 감지가 되지 않는다.
배열이나 객체를 watch할 때 속성의 내부를 검사하기 위해서는 deep: true를 설정해주고
handler메서드를 사용하여 원하는 값을 얻을 수 있다.

watch: {
    myData: {
        deep: true,
        handler(value) {
            // ...
        }
    }
},

 

handler

handler는 watch된 속성이 변경될 때 호출될 함수를 지정한다.
deep, immediate를 지정할 필요가 없는 경우 사용하는 단축표현이다. 

단축표현 대신 아래처럼 사용할 수 있다.

watch: {
    myData(value) {
        // ...
    }
},

watch: {
    myData: {
        handler(value) {
            // ...
        }
    }
},