[Vue]メソッド、計算、監視
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>
コンソール結果ウィンドウ
呼び出し
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>
コンソール結果ウィンドウ
Reference
この問題について([Vue]メソッド、計算、監視), 我々は、より多くの情報をここで見つけました https://velog.io/@pang_e/Vuemethods와-computedテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol