[Vue.js] data 변수 값 watch를 사용하여 변경 감지

data 에 변수를 하나 넣어준다.

 

 data() {
        return {
            activeTab : 'a'
        }
    },

해당 값은 아래처럼 컴포넌트에서 클릭시 변동이 되게 해두었다.

<a href='#' @click="activeTab = 'b'">
    <span>목록</span>
</a>

 

해당 컴포넌트 하단 스크립트 파일 쪽에 watch 를 생성해준다.

 

<script>
export default {
    name: 'Layout',
    components: {
    },
    props: {},
    data() {
        return {
            activeTab : 'form'
        }
    },
    computed: {},
    watch : {
        activeTab(newVal, oldVal){
            console.log(newVal, oldVal)
        }
    },
    methods: {
    },
    created() {
    },
    mounted() {
    },
    beforeUnmount() {
    }
}
</script>

 

그러면 클릭할 때 마다 새로운 값과 과거 값이 출력된다.

​

oldVal 은 변경되기 이전의 값이고 newVal은 새로운 값이다. 

 

 watch : {
        activeTab(newVal){
            console.log(newVal)
        }
    },

oldVal은 이런식으로 작성을 하지 않아도 된다.