Vue.js () 있는 메서드 호출과 없는 메서드 호출 차이 (Vue.js method calling with or without ())

v-on:click="a" 코드는 이벤트 핸들러로써 a() 메서드 함수를 호출하는 형태로 이벤트 핸들러를 지정한다. 그래서 클릭 이벤트가 발생하였을 때 a() 메서드를 호출한다.

v-on:click="a()" 도 이벤트 핸들러로써 a()메서드 함수를 호출하는 형태이다. 

 

이 두가지 차이를 자세하게 다뤄보려고 한다.

 

	v-on:click="a()"	v-on:click="a"
메서드 호출 시점	해당 요소가 렌더링될 때마다 메서드가 호출된다. 이는 a() 메서드를 템플릿에서 직접 호출하는 것과 유사한 동작을 한다.	메서드 이름만을 이벤트 핸들러로 지정하는 방식은 이벤트가 발생했을 때 메서드가 호출된다. 따라서 이벤트가 발생해야만 메서드가 실행된다.
메서드 인자 전달	v-on:click="a(arg)">와 같이 메서드 호출 시 인자를 전달하려면 () 안에 인자를 포함하여 작성해야 한다. 예를 들어 a(arg)라는 메서드를 호출하려면 v-on:click="a(arg)"로 작성합니다. v-on:click="a(arg)"와 같은 방식으로 메서드를 호출하는 경우, 해당 인자가 이벤트 객체 $event 뒤에 자동으로 추가된다. 예를 들어 v-on:click="a(arg, $event)"로 작성하면 메서드의 첫 번째 인자로 arg가 전달되고, 두 번째 인자로 이벤트 객체 $event가 전달된다.
메서드 내부에서 this 사용	v-on:click="a()">와 같이 메서드를 호출하는 방식에서는 this를 사용하여 Vue 인스턴스의 데이터와 메서드에 접근할 수 있다. 따라서 this.msg와 같이 데이터를 변경하거나 참조할 수 있다.	v-on:click="a"와 같이 메서드 이름만을 이벤트 핸들러로 지정하는 방식에서는 this를 사용할 수 없다. 따라서 메서드 내부에서 Vue 인스턴스의 데이터와 메서드에 접근하기 위해서는 명시적인 방법(예: Vue 인스턴스의 변수를 참조하는 방식)을 사용해야 한다.