함수 호출 시 괄호 사용

<form v-on:submit="submitForm()">
...
</form>

<form v-on:submit="submitForm">
...
</form>

submitForm(event) {
  event.preventDefault();
  alert('Submitted');
}

 

위 코드에서 괄호를 사용하지 않고 함수 호출 시 event.preventDefault() 설정에 따라 페이지 새로고침(form 태그의 submit에 대한 기본 동작)을 하지 않는다. 반면 괄호를 사용하여 함수 호출 시 페이지를 새로고침한다.

 

함수를 괄호 없이 호출하면 함수에 대한 참조를 전달한다. Vue가 컴포넌트 템플릿을 해석할 때 메소드 이름이 괄호 없이 사용된 것을 확인하고, 이벤트 발생시 해당 메소드를 참조하도록 설정한다. Vue는 자동으로 이벤트 객체를 해당 이벤트 핸들러 메소드에 전달한다. 이 과정을 통해 메소드는 이벤트에 대한 모든 정보를 알 수 있고, 이벤트의 기본 동작을 조작할 수 있다.( 'event.preventDefault()' ) 

이벤트 객체와 함께 메소드가 호출되기 때문에 이벤트 정보를 사용하여 다양한 작업을 수행할 수 있다.

 

괄호와 함께 작성하면 템플릿 파싱 시 함수가 즉시 호출된다.(템플릿이 렌더링 될 때마다, 즉 컴포넌트가 생성되거나 업데이트될 때마다 함수가 실행) 이는 이벤트에 연결되지 않으므로 이벤트 객체에 접근할 수 없고, 함수는 이벤트 발생 시점이 아닌 컴포넌트가 렌더링될 때 호출된다. 이 경우 함수는 이벤트와 독립적으로 실행되고, 이벤트 객체는 자동으로 전달되지 않는다.