홍준혁

Vue.js-watch속성 본문

Vue.js

Vue.js-watch속성

홍준혁 [Hong-JunHyeok] 2020. 9. 14. 17:23
728x90

watch는 감시자라는 뜻이다.

특정 데이터를 감시하고 있다가 그 데이터가 변경이 일어났을때 watch속성이 자동으로 실행이 된다

아래의 코드를 보고 분석해보도록 하자

 

<!DOCTYPE html>
<html>
    <head>
        <title>Vue.js Sample</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            {{ message }}
            <button v-on:click="changeMessage">Click</button>
            {{ update }}
        </div>
        <script>
            new Vue({
                el: "#app",
                data: {
                    message: "홍준혁",
                    update: "아니요",
                },
                methods: {
                    changeMessage() {
                        this.message = "허새찬";
                    },
                },
                watch: {
                    message(newVal, oldVal) {
                        //message를 감시하고 있다가 바뀌면 message를 자동으로 실행
                        console.log(newVal, oldVal);
                        this.update = "네";
                    },
                },
            });
        </script>
    </body>
</html>

 

위 코드를 하나하나 톺아보도록 하자

message data와 update data를 만들고 Vue인스턴스에 watch속성에 message를 만든다.

그럼 이때 message는 data에 있는 message를 감시하고 있다는 의미가 된다.

이떄 message를 지켜보고 있다가 변화됨을 감지하면 watch에 있는 message가 실행된다.

이때 message는 두가지 인자값을 받게 되는데 바뀐 값과 바뀌기 전의 값을 받게 된다.

그래서 console.log를 통해 그 값을 확인할 수 있다.

 

그래서 message data가 변경됨을 감지하면 update의 내용을 바꾸는 코드를 짜보았다.

 

하지만 watch를 쓰는거보다 computed를 쓰는것이 코드가 효율적으로 짧아지고 더 좋다

728x90

'Vue.js' 카테고리의 다른 글

Vue.js-하위에서 상위 컴포넌트로 데이터 전달  (0) 2020.09.21
Vue.js 상위-하위 컴포넌트 데이터 전달  (0) 2020.09.21
Vue.js-computed  (1) 2020.09.14
Vue.js-폼 입력 바인딩  (1) 2020.09.14
Vue.js-이벤트  (0) 2020.09.14
'Vue.js' Related Articles more
Comments