Vue.js - data, computed, watch, methods 정리

Vue에 Root Component는 const app = createApp({});으로 생성하고 mount 를 호출하여 Html에 마운트하여 렌더링에 적용할 수 있다.

Vue를 새로 시작하면서 기본 DOM 조작 방식에 대해 배웠다.
DOM에 변수, 이벤트를 바인딩하는 방법을 배웠고, 각각에 차이에 대해서 정리해보자

data binding

가장 기본적인 binding은 {{ }} 구문을 이용한다. 공식문서에서 Template Syntax라고 정의하고 있다.

<span>Message: {{ msg }}</span>

위와 같은 형태이다.

{{ }} 내에는 자바스크립트 문법을 사용할 수 있다.

또 다른 바인딩 방법으로 속성 바인딩이 있다.

<div v-bind:id="dynamicId"></div>

v-bind 키워드를 사용하고 속성에 값을 바인딩할 때 사용한다.
단축해서 :id로 사용할 수 있다.

이렇게 바인딩하는 값은 javascript -> html 단방향 바인딩만 가능하다.

data

data 속성는 바인딩할 값을 정의할 때 사용한다.

const app = createApp({
  data() {
    return {
      msg: "hello"
    };
  }
})

가장 기본적인 사용법이다.

method 

메서드를 호출하여 결과값을 데이터 바인딩에 사용할 수도 있다.

<p>{{ calculateBooksMessage() }}</p>

const app = createApp({
	data() {
    	return {
        	name: '',
        	book: []
        }
    },
    methods: {
    	calculateBooksMessage() {
      		return this.books.length > 0 ? 'Yes' : 'No'
    	}
    }
})

 

methods는 리턴값을 가진다.

단순 데이터 값을 그대로 보여주는 것으로 부족할 때,

{{ }} 내부에 자바스크립트 문법을 사용해서 값을 변형할 수도 있지만 method 속성에 별도로 정의하여 사용할 수 있다.

하지만 이 방식에 단점이 있다. 

위의 예시에서 calucateBooksMessage는 books 변수만 참조하고 있다. 하지만 methods는 본인이 어떤 변수에 의존적인지 알 수 없기 때문에 data의 포함된 어떠한 값이 바뀌더라도 항상 재렌더링 된다는 단점이 있다.

 

computed

데이터 바인딩에 computed 속성도 사용된다.

const app = createApp({
      data() {
      return {
        name: "John",
        msg: "hello"
      }
    },
    computed: {
    fullName() {
      return this.name === "" ? "" : this.name + " " + "LastName";
    },
  }
})

data 속성을 바인딩하는 방법과 동일하게 사용되며 함수를 호출하지 않는다. 

computed가 가지는 가장 큰 장점은 해당 속성에 사용된 변수에 업데이트가 있을 때만 리렌더링이 된다는 것이다.
위의 코드에서 fullName은 name 값이 업데이트 될 때만 렌더링이 다시 되고 다른 경우에는 렌더링이 되지 않는다.

 

watch

watch 속성은 직접적으로 템플릿에 사용되지 않고 데이터의 변경을 감지하는 목적으로 사용된다.

어떤 목적 데이터 값을 '감시'하고 있다가 원하는 시점에서 실행하는 목적으로 사용할 수 있다.

  data() {
    return {
      counter: 0,
    };
  },
  watch: {
    counter(value) {
      if (value > 50) {
        this.counter = 0;
      }
    },
  }
  }

위의 예시는 counter 값을 감시하다 50 이상이 되면 0으로 초기화하는 코드이다.

watch에 정의되는 메소드의 이름을 감시할 데이터의 이름과 동일해야하고 data속성에 정의된 값, computed 속성에 정의된 값이 대상이 될 수 있다.

 

 

 

event binding

바닐라 자바스크립트에서 addEventListner로 이벤트를 추가해준다.

vue에서는 이벤트 바인딩을 통해 쉽게 이벤트를 등록할 수 있다.

v-on:'event' 를 이용하고 축약으로 @'event'를 사용할 수 있다.

<button v-on:click="handleButtonClick">Click Me</button>
<button @click="handleButtonClick">Click Me</button>

method

methods 속성은 데이터 바인딩에도 사용했지만 이벤트 바인딩에도 사용된다.

methods에 이벤트 메소드를 정의할 수 있다.

methods: {
    handleButtonClick() {
      console.log("Button Clicked!");
    }
}

 

메소드는 매개변수를 전달하면서도 호출할 수 있다.

<button @click="add(1)">Add 1</button>
<button @click="add(5)">Add 5</button>

 

이럴 때에는 메소드 정의시 매개변수를 넣어주면 된다.

methods: {
    add(value) {
      this.count += value;
    }
}

 

메소드 호출시 매개변수가 주어지지 않으면 기본적으로 첫번째 파라미터로 이벤트객체가 들어가게 된다.

<input type='text' @change='changeName' />

methods: {
	changeName(event) {
		this.name = event.target.value;
    },
	/*
     event.preventDefault와 같이 이벤트 객체가 직접적으로 필요하지 않는 경우에는 다음과 같이 작성하는걸 더 선호하는 편이다
     changeName({target}) {
   	 this.name = target.value;
     }
    */
}

 

이벤트 객체와 파라미터가 동시에 필요한 상황이라면 다음과 같이 사용할 수 있다.

  <input
    type="text"
    v-on:input="changeName($event, 'LastName')"
    v-on:keyup.enter="confirmInput"
  />