VUE学習ノート(二)-computedとmethodsの違い

最近VUEを勉強していると、computedとmethodsの役割が似ていることがわかり、一部のサイトではこの2つを互いに置き換えて使うことができると言われていますが、実際に使っていると、実はこの2つの間に違いがあることがわかりました.
computed計算プロパティ
属性を定義するためのsetterメソッドとgetterメソッドは、一般的には特に強調しないと、自動的に属性として宣言されるgetterメソッドに呼び出されます.つまりcomputedでは定義時に形式やメソッドが似ていますが、実際に定義されているのは属性で、属性のメソッドで使用することができます.方法で使うと(括弧を付けて)間違えてしまいます.
例:

	
{{message}}
	
{{reversemessage}}


var app = new Vue(
	{
		el:"#app",
		data:{message:"hello world!",
		},
		computed:{
			reversemessage:function(){
				return this.message.split('').reverse().join('');
			}
		}
	}
);

では、dataでreversemessageと同じ名前のプロパティを定義すると、その表示結果がdataの値のデータになり、計算プロパティで定義されたsetterメソッドやgetterメソッドは呼び出されません.
methodsはメソッドで、彼の呼び出し方式はメソッドの呼び出し方式に従い、カッコをつけなければならない.そうしないと、エラーが発生する.しかし、上記の計算属性と同様の効果を達成することができる.

	
{{message}}
	
{{reversemessage()}}


var app = new Vue(
	{
		el:"#app",
		data:{message:"hello world!",
		},
		methods:{
			reversemessage:function(){
				return this.message.split('').reverse().join('');
			}
		}
	}
);

同僚が同じ名前の計算プロパティと方法を定義したらどうなりますか?
例えばそうですか?このような参照は間違って報告され、methodsのメソッドだけが使用可能であり、計算属性は意味を失うことに気づきます.

	
{{message}}
	
{{reversemessage}}


var app = new Vue(
	{
		el:"#app",
		data:{message:"hello world!",
		},
		computed:{
			reversemessage:function(){
				return this.message.split('').reverse().join('');
			}
		},
       methods:{
			reversemessage:function(){
				return this.message.split('').reverse().join('');
			}
		}
	}
);

彼らは引用方法の違いに加えて、最大の違いがあります.
計算プロパティは、それらの依存に基づいてキャッシュされます.依存関係が変更された場合にのみ、それらは再評価されます.これは、messageが変更されていない限り、reversedMessage計算プロパティに複数回アクセスすると、関数を再実行する必要がなく、以前の計算結果がすぐに返されることを意味します.
対照的に、呼び出し方法は、再レンダリングがトリガーされるたびに関数を再実行します.
計算プロパティの比較は、パフォーマンスを大幅に消費する必要がある場合や、結果が大量のデータの数値に依存する場合に適しています.例えば、非常に複雑な数値Aは、非常に複雑な計算プロセスと大量のデータを経て計算する必要があります.インタフェースが再レンダリングされるたびにAの数値を計算するのではなく、計算プロパティでAを格納することができます.これにより、毎回再計算されることを避けることができます.
over~