Vueで関数を実装するために、computed、methods、およびwatchの属性が存在する.
例を挙げて、細かいが大きな違いを理解しましょう.

methods

このmethodを使用しようとするたびに計算が行われる.

すなわち、登録のたびにmethodが呼び出される.

サンプルコード

<div id="app">
	<input type="text" v-model="message" />
	<p>원본 메시지: "{{ message }}"</p>
	<p>역순으로 표시한 메시지1: "{{ reversedMsg() }}"</p>
	<p>역순으로 표시한 메시지2: "{{ reversedMsg() }}"</p>
	<p>역순으로 표시한 메시지3: "{{ reversedMsg() }}"</p>
</div>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			message: '글씨뒤집기',
		},
		methods: {
			reversedMsg: function () {
				console.log('호출!');
				return this.message.split('').reverse().join('');
			},
		},
	});
</script>

コンソール結果ウィンドウ

呼び出し

は計3回methodであり、呼び出すたびに実行が見られる.

computed

Vueインスタンスを作成するとき、dataの値を受け入れ、事前に計算して保存します(キャッシュ)

合成形式はmethodであるが、処理方式はVueからproxyであり、propertyと同様である.

特定のデータの変更をリアルタイムで処理します.

コール時にもmethodではなく、propertyのようにコールします.

サンプルコード

<div id="app">
	<input type="text" v-model="message" />
	<p>원본 메시지: "{{ message }}"</p>
	<p>역순으로 표시한 메시지1: "{{ reversedMsg() }}"</p>
	<p>역순으로 표시한 메시지2: "{{ reversedMsg() }}"</p>
	<p>역순으로 표시한 메시지3: "{{ reversedMsg() }}"</p>
</div>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			message: '글씨뒤집기',
		},
		computed: {
			reversedMsg: function () {
				console.log('호출!');
				return this.message.split('').reverse().join('');
			},
		},
	});
</script>

コンソール結果ウィンドウ

methodのように、合計3回実行されますが、最初に登録されると캐싱の値が格納されます.

次のログイン時、値が変わらなければ캐싱の値を返します.

watch

Vue Instanceの特定のproperty変更時に実行されるコールバック関数を設定します.

watch dataを変更すると、他のdataを変更するなどの操作が行われます.

サンプルコード

<div id='app'>
	<p>변경 전 : {{message}}</p>
	<p>변경 후 : {{reverseMsg}}</p>
	<input type="text" v-model="message">
</div>
<script>
	const app = new Vue({
		el: '#app',
		data:{
			message: 'Hello',
			reverseMsg: ''
		},
		watch:{
			message :function(newVal, oldVal){
			console.log('newVal : ' + newVal + '  oldVal : ' + oldVal);
			this.reverseMsg = newVal.split('').reverse('').join('');
			},
		},
	});

    </script>

コンソール結果ウィンドウ

ヘッダ

文字入力時