watch

watch 감시 속성

Vue watch는 특정 대상에 대한 감시를 수행하기 위한 속성이다. 감시를 하려면 대상이 있어야 하므로 감시자를 생성하기 전 감시 대상을 먼저 정의해야 한다.

사용법

watch 속성은 다음과 같이 생성한다.

const app = Vue.createApp({
    //...(생략)...
    watch:{
        //기본 watch
        //v는 변경된 값, p는 변경 직전의 값
        항목명:function(v, p){},
        
        //deep(깊은) watch
        항목명:{
            deep:true,
            handler(v, p){}
        },
    }
    //...(생략)...
});

watch는 일반적인 watch와 deep watch로 나뉘며, 이 문서에서는 일반적인 watch를 다룬다.

사용 예제 - 변경 횟수 측정

아래의 예제는 text 항목의 변경(revision) 횟수를 측정하는 예제이다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue watch</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="text">
        <br>
        revision count : {{revision}}
    </div>

    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const app = Vue.createApp({
            data(){
                return {
                    text : "Welcome to Vue JS 3!",
                    revision:0
                };
            },
            watch:{
                text:function(){
                    this.revision++;
                },
            }
        });
        app.mount("#app");
    </script>
</body>
</html>

실행한 뒤 입력창의 글자를 변경하면 변경할 때마다 revision count가 증가하는 것을 확인할 수 있다. 이는 computed 속성에서 수행하기 어려운 작업이다.

Previouscomputed Nextdeep watch

Last updated 2 years ago