今回はウォッチャーについて。
ウォッチャーを使わなくてもリアクティブな動作ができますが、随時更新され負荷が大きいです。
ウォッチャーを使えば、入力の切れ目にだけ処理をすることができます。
目次
ウォッチャーを使わない例
サンプル
入力された値：{{test1}}
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Vue.js</title>
</head>
<body>
<div id="app">
<label>名前：
<input type="text" v-model="name" />
</label>
<p>入力された値：{{name}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
</body>
</html>
JavaScript
new Vue({
el: '#app1',
data: {
test1: ''
}
});
ウォッチャーを使う例
サンプル(入力が完了後に遅れて表示されます)
入力された値：{{upperName}}
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Vue.js</title>
</head>
<body>
<div id="app">
<label>名前：
<input type="text" v-model="name" />
</label>
<p>入力された値：{{upperName}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
</body>
</html>
JavaScript
new Vue({
el: '#app2',
data: {
test2: '',
upperName: ''
},
created: function() {
this.delayFunc = _.debounce(this.getUpper, 2000);
},
watch: {
test2: function(newValue, oldValue) {
this.delayFunc();
}
},
methods: {
getUpper: function() {
this.upperName = this.test2.toUpperCase();
}
}
});