15. watchers

내용

Watcher 소개: Vue에서는 데이터의 변화를 감시하고, 변화가 발생할 때 추가 로직을 실행할 수 있는 'watcher'라는 기능이 있습니다. 값이 업데이트될 때 특정 프로세스에 연결(hook)하는 방식입니다.
사용 빈도: Watcher는 자주 사용되지 않으며, 애플리케이션에서 몇 번 사용될 수 있습니다. 이 강의에서는 watcher의 실제 사용 사례를 볼 수 있습니다.
구현 방법: Watcher는 데이터(data)와 메소드(methods) 속성과 같은 수준에서 구현됩니다. 'watch'라는 새로운 속성을 객체로 설정하고, 감시할 속성 목록을 포함합니다.
감시할 수 있는 속성: Vue 인스턴스의 모든 속성(데이터 및 계산된 속성)을 감시할 수 있습니다. 키 이름은 인스턴스 내의 키 이름과 일치해야 합니다.
함수와 인수: 각 속성에 대해 변화가 발생할 때 실행할 함수를 설정할 수 있으며, 이 함수는 새로운 값과 이전 값을 인수로 받습니다.
Watcher와 비동기 작업: 개발자들은 값이 변경될 때 추가적인 작업을 수행하기 위해 watcher를 사용합니다. 특히 비동기 작업을 수행하고자 할 때 유용합니다.
계산된 속성과의 차이: 계산된 속성도 데이터 변화를 감시하지만, 비동기적으로 작동하지 않습니다. 반면, watcher는 비동기 작업을 수행할 수 있는 자유가 있습니다.
예시: 나이(age)가 변경되면 3초 후에 원래 값으로 되돌리는 예제를 통해 watcher 사용법을 설명합니다.
사용 빈도와 중요성: Watcher는 데이터 메소드나 계산된 속성만큼 자주 사용되지 않으며, 강의를 통해 언제 사용해야 하는지 경험적으로 배울 수 있습니다.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
<div id="app" v-cloak>
    <p>{{  fullName }}</p>
    <p><a :href="url" target="_blank">Google</a></p>
    <p>{{ raw_url }}</p>
    <p v-html="raw_url"></p>
    <p>{{ age }}</p>
    <hr />

    <label>First Name</label>
    <input type="text" v-model.lazy.trim="firstName">

    <br />
    <br />

    <label>Middle Name</label>
    <input type="text" @keyup.enter="updateMiddleName">

    <br />
    <br />

    <label>Last Name</label>
    <input type="text" :value="lastName" @input.prevent="updateLastName('Last name event triggered!', $event)">

    <br />
    <br />

    <label>Age</label>
    <input type="number" v-model.number="age">

    <br />
    <br />

    <button type="button" @click="increment">Increment</button>
    <button type="button" @click="age--">Decrement</button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.6/vue.global.prod.min.js"></script>
<script src="app.js"></script>
</body>
</html>

app.js

const vm = Vue.createApp({
    data() {
        return {
            firstName: 'John',
            middleName: '',
            lastName: 'Doe',
            url: 'https://google.com',
            raw_url: '<a href="https://google.com" target="_blank">Google</a>',
            age: 20,
        }
    },
    methods: {
        increment() {
            this.age++;
        },
        updateLastName(msg, event) {
            this.lastName = event.target.value;
        },
        updateMiddleName(event) {
            console.log(event.target.value)
            this.middleName = event.target.value;
        },
    },
    computed: {
        fullName() {
            console.log('Full name method was called!');
            return `${this.firstName} ${this.middleName} ${this.lastName.toUpperCase()}`
        },
    },
    watch: {
        age(newVal, oldVal) {
            setTimeout(() => {
                this.age = 20;
            }, 3000)
        },
    },
}).mount('#app');

main.css

[v-cloak] {
    display: none;
}

# 15. watchers

# 내용

15. watchers

내용