[Vue.js TIL] 중첩 라우트 / 데이터 바인딩 / computed methods watch의 차이

중첩 라우트

라우터 index.js 에서 다음과 같이 설정해 중첩 라우트를 만들 수 있음.

• 한 path 아래에 children 속성을 사용하여 다른 Path를 연결함

  DATA ={path: '/b/:bid', component: Board, children : [
  {path: '/c/:cid', component : Card}
  ]},
  }

그러나 이렇게만 만들고 지정된 화면으로 이동하면 Board 화면만 보이게 됨.

Card는 Board의 하위 컴포넌트이기 때문에 Board 컴포넌트에서 Card 컴포넌트가 보일 위치를 지정해 주어야 하기 때문임.

데이터 바인딩하기

데이터는 화면이 created() 된 후에 담을 수 있음. 이 상태에서는 데이터 속성과 메소드 속성은 정의되어 있지만 template의 Dom 속성에는 접근할수 없다.

 

아래와 같이 data 속성과 화면을 연결하는것을 data 바인딩이라고 한다. 만약 데이터가 변하는 것을 원하지 않으면 v-once 속성을 통해 막을 수 있다.

 

• 라우터 링크 문법

data : {{data}}

<script>export default { data() { return {data:0} }, created(){ this.cid = this.$route.params.data } }</script>

computed와 watch의 차이

탬플릿 내에 데이터를 이용한 로직을 작성해야 할 때 탬플릿 내에 그대로 작성되는 것은 지양되어야 한다. 이를 위해 사용되는 것이 computed와 watch이다.

 

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

computed

computed 는 함수 내에 속한 데이터 값의 변경 여부를 추적해서 변화가 일어날 때를 감지하여 변화가 있을 시 함수 내의 계산을 실행해 그 값을 돌려준다.

 

그리고 한번 연산한 값을 캐싱 해놓은 후 필요한 부분에 다시 재사용 한다. 만약 message 라는 데이터의 값에 변화가 없는 한 reversedMessage 를 아무리 호출해도 계산을 다시 하지 않고 계산되어 있던 결과를 즉시 반환한다.

 

<template>
  <div>
    <p>원본 메시지: "{{ message }}"</p>
    <p>역순으로 표시한 메시지: "{{ reversedMessage }}"</p>
  </div>
</template>

<script>
export default {
  name: 'test',
  data(){
    return {
      message: '안녕하세요'
    }
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
}
</script>

methods

만약 이 캐싱이 필요가 없다면 methods 를 사용하는 게 좋다. computed 와 같은 동작을 하지만 캐싱이라는 개념이 없어 매번 재 렌더링된다.

methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

watch

watch 속성은 데이터 변화를 감지하여 자동으로 특정 로직을 수행한다. computed 속성과 유사하지만 computed는 종속 관계가 단순한 경우 사용하고 watch는 비동기 연산 데이터 호출과 같이 특정 요소의 데이터 변경 시점에 어떤 액션을 취할 때 사용하는 게 좋다.

즉 watch 는 특정 함수를 따로 선택할 필요 없이 데이터 변화 그 자체를 감지하는 반면, computed 는 함수 안의 값을 직접 지정하고 데이터 바인딩을 해주어야 한다...?

<div id="app">
  <h1>{{ count }}</h1><br>
  <p>{{ text }}</p>
  <button @click="count --">카운트 감소</button>
</div>

new Vue({
    el: "#app",
  data: {
    count: 3,
    text: '변경 전입니다.'
  },
  watch: {
    count: function (newVal, oldVal) {
      this.text = oldVal + '에서 ' + newVal + '로 변경되었습니다.'
    }
  }
})

watch 로 중첩 라우트 제어하기

라우터가 fetchData의 데이터 변화를 감지하도록 함

    watch:{
      '$route': {
          handler:'fetchData',
          immediate:true
      }
    },

 

중첩 라우트 watch로 제어하기 참고

 

API — Vue.js

 

Vue에서 중첩 데이터를 감시하는 법