deep watch

감시자를 이용하다 보면 객체나 배열을 감시해야 하는 경우가 발생한다. 이 때 일반적인 감시자를 이용하면 정상적으로 감시가 이루어지지 않는 상황이 발생한다.

아래의 예제를 통해 확인한다.

<!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 deep watch</title>
    <style>
        * {
            box-sizing: border-box;
            font-size: 15px;
        }
        textarea{
            resize: none;
            padding:0.5em;
        }
        input{
            padding:0.5em;
        }
    </style>
</head>
<body>
    <div id="app">
        <label>
            title<br>
            <input type="text" v-model="board.title">
        </label>
        <br><br>

        <label>
            content<br>
            <textarea v-model="board.content" cols="50" rows="5"></textarea>
        </label>
        <br><br>
        revision count : {{revision}}
    </div>

    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const app = Vue.createApp({
            data(){
                return {
                    board:{
                        title:"Welcome to Vue JS 3!",
                        content:"VueJS는 사용자 인터페이스를 만들기 위한 progressive framework 입니다."
                    },
                    revision:0
                };
            },
            watch:{
                // not working
                board:function(){
                    this.revision++;
                }
            }
        });
        app.mount("#app");
    </script>
</body>
</html>

data에 board라는 이름의 객체가 존재하며, 객체 안에는 title과 content라는 세부 항목이 존재한다.

data(){
    return {
        board:{
            title:"Welcome to Vue JS 3!",
            content:"VueJS는 사용자 인터페이스를 만들기 위한 progressive framework 입니다."
        },
        revision:0
    };
},

입력창은 객체가 아니라 객체 안의 항목인 title, content에 연결되어 있다.

<input type="text" v-model="board.title">
<textarea v-model="board.content" cols="50" rows="5"></textarea>

이 경우 객체의 내부 값이 변했다고 해서 객체가 변했다고 할 수 있을까? 그렇지 않다. 사람의 경우도 이름을 바꾼다고 해서 다른 사람이 되지 않듯이 객체도 내부의 값이 변경되었다고 해서 객체가 변화했다고 볼 수 없다. 따라서 일반적인 감시자로는 변화를 감지해낼 수 없다.

사용법

내용물의 변화까지도 감시자로 감지하고 싶은 경우 사용할 수 있는 것이 깊은 감시(deep watch)이다.

깊은 감시는 다음과 같이 객체형태로 설정한다.

watch:{
    항목명:{
        deep:true,
        handler(v, p){

        }
    }
},

사용 예제 - 깊은 감시 적용

<!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 deep watch</title>
    <style>
        * {
            box-sizing: border-box;
            font-size: 15px;
        }
        textarea{
            resize: none;
            padding:0.5em;
        }
        input{
            padding:0.5em;
        }
    </style>
</head>
<body>
    <div id="app">
        <label>
            title<br>
            <input type="text" v-model="board.title">
        </label>
        <br><br>

        <label>
            content<br>
            <textarea v-model="board.content" cols="50" rows="5"></textarea>
        </label>
        <br><br>
        revision count : {{revision}}
    </div>

    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const app = Vue.createApp({
            data(){
                return {
                    board:{
                        title:"Welcome to Vue JS 3!",
                        content:"VueJS는 사용자 인터페이스를 만들기 위한 progressive framework 입니다."
                    },
                    revision:0
                };
            },
            watch:{
                // not working
                // board:function(){
                //     this.revision++;
                // },

                // deep watch
                board:{
                    deep:true,
                    handler(){
                        this.revision++;
                    }
                }
            }
        });
        app.mount("#app");
    </script>
</body>
</html>

실행해보면 정상적으로 잘 감시가 되는 것을 확인할 수 있다.

immediate

감시자 객체에 immediate 속성을 설정하면 Vue instance 실행 후 최초 1회는 대상의 변화가 없어도 실행된다.

<!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 deep watch</title>
    <style>
        * {
            box-sizing: border-box;
            font-size: 15px;
        }
        textarea{
            resize: none;
            padding:0.5em;
        }
        input{
            padding:0.5em;
        }
    </style>
</head>
<body>
    <div id="app">
        <label>
            title<br>
            <input type="text" v-model="board.title">
        </label>
        <br><br>

        <label>
            content<br>
            <textarea v-model="board.content" cols="50" rows="5"></textarea>
        </label>
        <br><br>
        revision count : {{revision}}
    </div>

    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const app = Vue.createApp({
            data(){
                return {
                    board:{
                        title:"Welcome to Vue JS 3!",
                        content:"VueJS는 사용자 인터페이스를 만들기 위한 progressive framework 입니다."
                    },
                    revision:0
                };
            },
            watch:{
                // not working
                // board:function(){
                //     this.revision++;
                // },

                // deep watch
                board:{
                    deep:true,
                    immediate:true,
                    handler(){
                        this.revision++;
                    }
                }
            }
        });
        app.mount("#app");
    </script>
</body>
</html>

Previouswatch Nextvs Computed

Last updated 3 years ago